map

admin 管理员组

文章数量: 887021

map

npm install --save mapbox-gl

<template><div id="map-box"></div>
</template><script>
import mapboxgl from 'mapbox-gl' // 引入map-box
const loadId = 'map-box' // 唯一的id
const IMAGES = { // 这些都是地图大点图标，直接引入自己喜欢的图标就行[loadId + 'parking']: require('./img/illegal_parking.png'),[loadId + 'parking-selected']: require('./img/illegal_parking-selected.png'),[loadId + 'personnel']: require('./img/personnel_aggregation_density.png'),[loadId + 'personnel-selected']: require('./img/personnel_aggregation_density-selected.png'),[loadId + 'pedlar']: require('./img/coord-pedlar.png'),[loadId + 'pedlar-selected']: require('./img/coord-pedlar-selected.png'),[loadId + 'roadside']: require('./img/roadside_booths.png'),[loadId + 'roadside-selected']: require('./img/roadside_booths-selected.png')
}
const data = {  // 模拟的点位假数据'type': 'FeatureCollection','features': [{"id": 167932,"type": "Feature",'properties': {'event_subtype_code': '0405','selected':0},"geometry": {"type": "Point","coordinates": [104.9093974867,31.1110811505],}},{"id": 167931,"type": "Feature",'properties': {'event_subtype_code': '0406','selected':0},"geometry": {"type": "Point","coordinates": [104.5093984867,31.3110841505],}},{"id": 167847,"type": "Feature",'properties': {'event_subtype_code': '0407','selected':0},"geometry": {"type": "Point","coordinates": [104.5995422476,31.1364776882],}},{"id": 167763,"type": "Feature",'properties': {'event_subtype_code': '0408','selected':1},"geometry": {"type": "Point","coordinates": [104.3715422674,31.1384774881],}}]
}
export default {data() {return {map: null}},mounted() {this.mapBox()},methods: {onMapClick(map) { // 点击地图图标事件（打印map看不到features属性） map.features console.log(map.features[0]);const projection=map.features[0].propertiesdata.features.forEach(item=>{item.properties.selected=0if (projection.event_subtype_code===item.properties.event_subtype_code) {item.properties.selected=1}})this.map&&this.map.getSource(loadId).setData(data) // 重新放回addSource里面},mapBox() {// map-box秘钥tokenmapboxgl.accessToken = 'pk.eyJ1Ijoiemhhb3h1eHUiLCJhIjoiY2w3azVnbGx3MGdlaTNxb2JhdTR4NHpwZiJ9.yM69RYEDfy5o5u0b9Lb_nw';const map = new mapboxgl.Map({container: loadId, // IDstyle: {version: 8,sources: {'gd-satellite': {type: 'raster',tiles: [// 高德地图 卫星影像'/{quadkey}?mkt=zh-CN&it=A,G,L&og=819&n=z',],tileSize: 206, // 文字大小},},layers: [{id: 'gd-satellite',type: 'raster',source: 'gd-satellite', // 对应sources里的属性layout: {visibility: 'visible', // 显示地图  隐藏地图none},minzoom: 0,maxzoom: 20,},],},center: [104.3995192745, 31.1364077264], // 中线点zoom: 10,  // 视角远近projection: 'globe' });this.map = mapmap.on('load', () => {map.addSource(loadId, {"type": "geojson","data": data  // 初始展示的图标数据});if (!map.hasImage(loadId)) {Object.keys(IMAGES).forEach((key) => {map.loadImage(IMAGES[key], function (error, image) { // 放入图片以及每种图片唯一keyif (error) throw errormap.addImage(key, image)})})}map.addLayer({  // 图标添加到视图上id: loadId,type: 'symbol',source: loadId,  layout: { // 图标点击高亮显示'icon-anchor': 'bottom','icon-image': [ // 图标对应的data中的属性'case',['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'event_subtype_code'], '0405']], loadId + 'parking-selected',['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'event_subtype_code'], '0406']], loadId + 'personnel-selected',['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'event_subtype_code'], '0407']], loadId + 'pedlar-selected',['all', ['==', ['get', 'selected'], 1], ['==', ['get', 'event_subtype_code'], '0408']], loadId + 'roadside-selected',['==', ['get', 'event_subtype_code'], '0405'], loadId + 'parking',['==', ['get', 'event_subtype_code'], '0406'], loadId + 'personnel',['==', ['get', 'event_subtype_code'], '0407'], loadId + 'pedlar',loadId + 'roadside'],'icon-offset': [-8, -8],visibility: 'visible'}});map.on('click', loadId, this.onMapClick) // 点击事件setTimeout(() => {//判断存在才移除//图层Id// if (map.getLayer(loadId)) {//   map.removeLayer(loadId);// }// //图片Id// if (map.hasImage(loadId)) {//   map.removeImage(loadId);// }// if (map.getSource(loadId)) {//   map.removeSource(loadId);// }}, 5000)})}}
}
</script><style>
#map-box {width: 100%;height: 100%;
}
</style>

出图效果

本文标签： mAP