map-box地图点击图标高亮事件

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: [// 高德地图 卫星影像'http://ak.dynamic.t0.tiles.virtualearth.net/comp/ch/{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-box地图点击图标高亮事件相关推荐

echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】
效果图: 1.点击省,跳转到河北省 2.返回,从省返回到中国地图话不多说,直接上代码,1.复制粘贴,2.在引入对应js即可注:全部各省地图,下载地址:** <!DOCTYPE html> ...
地图点击区域高亮 vue_这个Excel技巧很强大，鼠标点击即高亮显示数据区域
单于吹落山头月.漫漫江上沙如雪.谁唱缕金衣.水寒船舫稀.芦花枫叶浦.忆抱琵琶语.身未发长沙.梦魂先到家. ------[宋]王观<菩萨蛮·单于吹落山头月> 之前给大家分享过,当我们根据 ...
html引入echart地图点击,基于echarts实现3D地图的定时高亮和点击事件
技术选型文章所选技术栈:vue.echarts.echarts-gl 安装Vue和echarts 1.安装echarts和echarts-alnpm i echarts --save npm i e ...
react可视化项目 ECharts 3D区域地图图表+点击取消高亮黄色
react 可视化项目 ECharts 3D区域地图图表地图介绍 echarts图表引入 react页面中引入使用地图介绍做可视化项目时需要3d的区域地图,在网上搜到ECharts社区的一个其他 ...
高德地图 - 点击改变当前 marker 图标（marker点击切换 icon 上一个 icon 恢复原样）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
小程序地图插入图标后怎么实现点击图标弹出窗口
1问题描述本次博客的要解决的问题是:小程序地图插入图标后怎么实现点击图标弹出窗口如图: 2算法描述点击标记点获取数据想要在地图等页面上显示弹窗,是使用的是marke的方法,点击标记点获取数据 ...
html地图无法点击,无法触发谷歌地图标记点击事件从HTML按钮
我尝试创建一个HTML按钮,可以触发谷歌地图上的标记的点击事件,所以每当我点击按钮,地图将自动放大到标记和显示infowindow.这里是我的代码无法触发谷歌地图标记点击事件从HTML按钮 Semua ...
Vue 移动端项目百度地图点击事件无效、不触发解决方案
解决百度地图手机端点击事件不触发的一种方案版权声明:本文为博主原创文章,转载请标明原文出处. 问题背景我是半路接手的这个项目,该项目使用 Vue 开发的一款手机端的页面.到手里时,使用百 ...
openlayers 地图上加图标_Openlayers 定位，添加自定义图标，点击图标弹框
之前已经把地图展示出来,现在可以在地图上做相关操作. 首先定义一个位置图层,这样可以动态操作 import Feature from 'ol/Feature' import {Vector as Ve ...

map-box地图点击图标高亮事件

map-box地图点击图标高亮事件相关推荐

最新文章

热门文章