柚子快報(bào)邀請(qǐng)碼778899分享：前端 mapbox 顯示數(shù)據(jù)
柚子快報(bào)邀請(qǐng)碼778899分享：前端 mapbox 顯示數(shù)據(jù)
示例演示:
通過(guò)外部數(shù)據(jù)導(dǎo)入顯示地圖點(diǎn)位數(shù)據(jù):
第一步: 添加圖例
export const horizontalAnalyseResultLayers = [
{
id: ['管線', '管線背景'], // 對(duì)應(yīng)圖層的id
alias: '管線名稱', // 顯示圖例名稱
showState: true, // 地圖上顯示隱藏
legendActive: true, // 圖例是否存在
identityActive: true,
// 如果一個(gè)圖例對(duì)應(yīng)的有兩個(gè)圖層的話,一定要加childMultiLayer這個(gè)! 否則后面的某些操作只會(huì)對(duì)數(shù)組的第一個(gè)生效!
childMultiLayer: true,
children: [
{
alias: '錯(cuò)誤管線',
icon: {
image: require('@/assets/img/map/legend/錯(cuò)誤管線.png'),
iconName: '',
style: { // 圖標(biāo)樣式
position: 'relative',
top: '0.5vh'
}
},
filter: ['==', ['get', 'GXLB'], '合流管'],
showState: true,
legendActive: true,
identityActive: true
},
{
alias: '正常管線',
icon: {
image: require('@/assets/img/map/legend/正常管線.png'),
iconName: '',
style: {
position: 'relative',
top: '0.5vh'
}
},
filter: ['==', ['get', 'GXLB'], '污水管'],
showState: true,
legendActive: true,
identityActive: true
}
]
}
]
第二步: 添加圖層
const pipeLayer = {
id: '管線',
source: 'pipeHorizontalSource',
type: 'line', // 圖層類型
minzoom: 6,
layout: {
'line-cap': 'round',
'line-join': 'round'
},
paint: {
'line-color': [
'case',
['==', ['get', 'GXLB'], '合流管'],
'rgba(255, 60, 53, 1)',
'rgba(0, 140, 255, 1)'
],
'line-width': ['interpolate', ['linear'], ['zoom'], 12, 0.5, 20, 3],
'line-translate-anchor': 'viewport'
}
}
?
const pipeBgLayer = {
id: '管線背景',
source: 'pipeHorizontalSource',
type: 'line',
minzoom: 6,
layout: {
'line-cap': 'round',
'line-join': 'round'
},
paint: {
'line-color': [
'case',
['==', ['get', 'GXLB'], '合流管'],
'rgba(255, 60, 53, 1)',
'rgba(0, 140, 255, 1)'
],
'line-width': ['interpolate', ['linear'], ['zoom'], 12, 8, 20, 36],
'line-blur': ['interpolate', ['linear'], ['zoom'], 12, 8, 20, 36],
'line-translate-anchor': 'viewport'
}
}
第三步: 添加數(shù)據(jù)
/* ---------------------------------- 將后端返回的geom添加到source---------------------------------- */
export function updateLayerSource(map, entities, sourceId) {
let features = []
if (entities.length > 0) {
if (entities[0].geometry) {
features = entities
} else {
for (let i = 0; i < entities.length; i++) {
features.push({
type: 'Feature',
geometry: entities[i].location || entities[i].geom || entities[i]
})
}
}
} else {
// features.push({
// type: 'Feature',
// geometry: []
// })
}
const featureCollection = {
type: 'FeatureCollection',
features
}
if (map.getSource(sourceId)) {
map.getSource(sourceId).setData(featureCollection)
}
}
/* ---------------------------------- JSON數(shù)據(jù)---------------------------------- */
export const getPipeJSONMock = [
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[121.35223797404194, 28.389245927439447],
[121.36999918096282, 28.398835603118304]
]
},
properties: {
Id: 1,
OBJECTID: 208,
FEATUREID: '123456789',
GXLB: '污水管',
}
}
]
通過(guò)矢量切片顯示地圖點(diǎn)位數(shù)據(jù):
第一步: 放置矢量切片數(shù)據(jù)在 @/configs/map/mapStyleConfig.js 文件夾下:
const mapStyle = {
'name': '底圖',
'sources': {
// 檢查井的矢量切片
waterlPipeWell: {
type: 'vector',
tiles: [
'http://10.10.11.31:16705/titanium/tiles/server/vector/streaming/1657925269876424704/{z}/{x}/{y}.pbf' // 矢量切片地址(后端發(fā)的)
]
}
}
}
第二步: 添加圖層:
const waterlPipeWellLayer = {
id: '檢查井', // 圖層名稱
source: 'waterlPipeWell',
type: 'symbol',
minzoom: 6,
'source-layer': 'waterl_pipe_well', // 對(duì)應(yīng)矢量切片的圖層名稱(后端發(fā)的)
layout: {
'icon-size': 1,
'icon-padding': 2,
'icon-image': [
'case',
['>', ['index-of', 'YS', ['get', 'featureid']], -1],
'檢查井',
'檢查井'
],
'visibility': 'none'
},
paint: {
'text-color': 'rgba(255, 255, 255, 1)',
'text-translate': [0, -34],
'text-halo-color': 'rgba(0,0,0,0.6)',
'text-halo-width': 50,
'text-opacity': 1,
'text-halo-blur': 0,
'text-translate-anchor': 'map'
}
}
第三步: 添加圖例:
export const defaultLayers = [
{
id: ['檢查井'],
alias: '檢查井',
icon: {
image: require('@/assets/img/map/legend/檢查井.png'),
iconName: '',
style: {
position: 'relative',
top: '0.3vh',
width: '2vh',
height: '2vh'
}
},
showState: true,
legendActive: true
}
]
圖層系列:
圖層類型:
線:
const pipeBgLayer = {
id: '水平凈距管線背景',
source: 'pipeHorizontalSource',
type: 'line',
minzoom: 6,
layout: {
'line-cap': 'round',
'line-join': 'round'
},
paint: {
'line-color': [
'case',
['==', ['get', 'GXLB'], '合流管'],
'rgba(255, 60, 53, 1)',
'rgba(0, 140, 255, 1)'
],
'line-width': ['interpolate', ['linear'], ['zoom'], 12, 8, 20, 36],
'line-blur': ['interpolate', ['linear'], ['zoom'], 12, 8, 20, 36],
'line-translate-anchor': 'viewport'
}
}
點(diǎn):
const waterlPipeWellLayer = {
id: '檢查井',
source: 'waterlPipeWell',
type: 'symbol',
minzoom: 6,
'source-layer': 'waterl_pipe_well',
layout: {
'icon-size': 1,
'icon-padding': 2,
'icon-image': [
'case',
['>', ['index-of', 'YS', ['get', 'featureid']], -1],
'檢查井',
'檢查井'
],
'icon-allow-overlap': false, // 是否允許圖標(biāo)重疊
'icon-ignore-placement': false, // 是否護(hù)理圖標(biāo)位置
'visibility': 'none'
},
paint: {
'text-color': 'rgba(255, 255, 255, 1)',
'text-translate': [0, -34],
'text-halo-color': 'rgba(0,0,0,0.6)',
'text-halo-width': 50,
'text-opacity': 1,
'text-halo-blur': 0,
'text-translate-anchor': 'map'
}
}
面:
const customLayer = {
id: '自定義范圍面',
source: 'divisionSource',
type: 'fill',
minzoom: 6,
paint: {
'fill-color': '#FF2121',
'fill-outline-color': '#FF2121',
'fill-opacity': 0.2
}
}
const customBoundaryLayer = {
id: '自定義范圍線',
source: 'divisionSource',
type: 'line',
minzoom: 6,
paint: {
'line-color': 'rgba(255, 0, 0, 1)', // 紅色
'line-width': 2,
'line-dasharray': [2, 2] // 虛線
}
}
圖層操作:
// 獲取圖層
mapObj.value.getLayer(poiLayerSet.id)
?
// 添加圖層
mapObj.value.addLayer(poiLayerSet)
?
// 移除圖層
mapObj.value.removeLayer(poiLayerSet.id)
?
// 圖層的點(diǎn)擊事件
mapObj.value.on('click', poiLayerSet.id, (e) => {})
?
// 圖層左鍵雙擊事件
mapObj.value.on('dblclick', (e) => {
const feature = mapObj.value.queryRenderedFeatures(e.point, { layers: ['自定義范圍面', '自定義范圍線'] })
if (feature.length > 0) {
console.log('dblclick左鍵雙擊事件')
}
})
?
// 圖層右鍵單擊事件
mapObj.value.on('contextmenu', (e)=> {
const feature = mapObj.value.queryRenderedFeatures(e.point, { layers: ['自定義范圍面', '自定義范圍線'] })
if (feature.length > 0) {
console.log('contextmenu右鍵單擊事件')
}
})
源的操作：
// 獲取源信息
mapObj.value.getSource(poiLayerSet.id)
?
// 移除源（一般和圖層伴隨操作）
mapObj.value.removeSource(poiLayerSet.id)
?
/* ---------------------------------- 將后端返回的geom添加到source---------------------------------- */
export function updateLayerSource(map, entities, sourceId) {
let features = []
if (entities.length > 0) {
if (entities[0].geometry) {
features = entities
} else {
for (let i = 0; i < entities.length; i++) {
features.push({
type: 'Feature',
geometry: entities[i].location || entities[i].geom || entities[i]
})
}
}
} else {
// features.push({
// type: 'Feature',
// geometry: []
// })
}
const featureCollection = {
type: 'FeatureCollection',
features
}
if (map.getSource(sourceId)) {
map.getSource(sourceId).setData(featureCollection)
}
}
/* ---------------------------------- entities--JSON數(shù)據(jù)---------------------------------- */
export const getPipeJSONMock = [ // 包含基本信息的JSON數(shù)據(jù)
{
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
[121.35223797404194, 28.389245927439447],
[121.36999918096282, 28.398835603118304]
]
},
properties: {
Id: 1,
OBJECTID: 208,
FEATUREID: '331081WS000208',
GXLB: '污水管',
}
}
]
export const getPipeJSONMock = [ // 不包含基本信息的JSON數(shù)據(jù)
{
type: 'LineString',
coordinates: [
[121.35223797404194, 28.389245927439447],
[121.36999918096282, 28.398835603118304]
]
}
]
圖例系列:
圖例寫法:
// 方法一
export const defaultLayers = [
{
id: ['水平凈距管線', '水平凈距管線背景'], // 對(duì)應(yīng)圖層的id
alias: '水平凈距不足', // 顯示圖例名稱
icon: {
image: require('@/assets/img/map/legend/水平凈距不足.png'),
iconName: '',
style: { // 圖標(biāo)樣式
position: 'relative',
top: '0.3vh',
width: '2vh',
height: '2vh'
}
},
showState: true, // 地圖上顯示隱藏
legendActive: true // 圖例是否存在
},
{
id: ['水平凈距管線', '水平凈距管線背景'],
alias: '水平凈距正常',
icon: {
image: require('@/assets/img/map/legend/水平凈距正常.png'),
iconName: '',
style: {
position: 'relative',
top: '0.3vh',
width: '2vh',
height: '2vh'
}
},
showState: true,
legendActive: true
}
]
?
// 方法二
export const horizontalAnalyseResultLayers = [
{
id: ['水平凈距管線', '水平凈距管線背景'], // 對(duì)應(yīng)圖層的id
alias: '水平凈距', // 顯示圖例名稱
showState: true, // 地圖上顯示隱藏
legendActive: true, // 圖例是否存在
identityActive: true,
// 如果一個(gè)圖例對(duì)應(yīng)的有兩個(gè)圖層的話,一定要加childMultiLayer這個(gè)! 否則后面的某些操作只會(huì)對(duì)數(shù)組的第一個(gè)生效!
childMultiLayer: true,
children: [
{
alias: '水平凈距不足',
icon: {
image: require('@/assets/img/map/legend/水平凈距不足.png'),
iconName: '',
style: {
position: 'relative',
top: '0.5vh'
}
},
// filter: ['===', ['index-of', 'JS', ['get', 'featureid']], -1],
filter: ['==', ['get', 'GXLB'], '合流管'], // 紅色
showState: true,
legendActive: true,
identityActive: true
},
{
alias: '水平凈距正常',
icon: {
image: require('@/assets/img/map/legend/水平凈距正常.png'),
iconName: '',
style: {
position: 'relative',
top: '0.5vh'
}
},
// filter: ['>', ['index-of', 'JS', ['get', 'featureid']], -1], // 給水
filter: ['==', ['get', 'GXLB'], '污水管'],
showState: true,
legendActive: true,
identityActive: true
}
]
}
]
圖例操作:
// 控制圖例的顯示與隱藏, 就是控制當(dāng)前圖例里面legendActive屬性
// 隱藏
store.currentLayerLegends.forEach((ele) => {
// ele.showState = false // 地圖上點(diǎn)的顯示隱藏
ele.legendActive = false // 圖例是否存在
})
?
// 顯示
store.currentLayerLegends.forEach((ele) => { // 退出高級(jí)查詢
// ele.showState = true // 地圖上點(diǎn)的顯示隱藏
ele.legendActive = true // 圖例是否存在
})
柚子快報(bào)邀請(qǐng)碼778899分享：前端 mapbox 顯示數(shù)據(jù)
相關(guān)閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Digimart跨境數(shù)碼
