Vue Mapbox-GL 在地图中增加图标、线条、标记点击弹窗、地图平移

最近正在搞Mapbox-GL地图的一系列东西，按照公司的需求，要做成离线地图（点击这里），然后要在地图的基础上进行增加图标标记，线条连接、弹窗等等需求。ok废话不多，往下看。

如果还没有安装mapbox-gl的小伙伴请先看一下上篇的离线地图的文章，这里不再重复写安装步骤了，直接上代码：

一、在地图上增加图标

<template><div><div class="mapBOX" id="map" ref="basicMapbox"></div></div>
</template><script>
let map;import mapboxgl from 'mapbox-gl';export default {
methods: {this.initMap(){let mapStyle = require('../../../static/style.json');// sytle.json看上一篇文章，或者使用官方的网址也可以：let mapStyle = "mapbox://styles/mapbox/streets-v11"map = new mapboxgl.Map({container: this.$refs.basicMapbox,style: mapStyle,// 中心点：北京市center: [116.469000,40.251706],zoom: 10,minZoom: 3,maxZoom: 15,fadeDuration: 100,antialias: true,});this.map.on('load', () => {// 图片需要是网络地址，前端本地地址行不通map.loadImage('http://ip/file/img/icon.png', (error, image) => {if (error) throw error;map.addImage('iconImage', image);// 图标位置坐标let features = [{"type": "Feature","geometry": {"type": "Point","coordinates": [116.469000,40.251706]}}, {"type": "Feature","geometry": {"type": "Point","coordinates": [116.469000,40.351706]}}]map.addSource('iconImage', {type: 'geojson',data: {type: 'FeatureCollection',features}});// 增加图片map.addLayer({id: "iconImage",type: "symbol",source: 'iconImage', // 对应addSource第一个参数名字layout: {"icon-image": "iconImage", // 对应addImage()第一个参数名字"icon-size": 0.1,//图标的大小},})}
},
mounted() {this.initMap()
}
}
</script>

官网也有示例：
Add an icon to the map | Mapbox GL JS | MapboxAdd an icon to the map from an external URL and use it in a symbol layer.https://docs.mapbox.com/mapbox-gl-js/example/add-image/

二、在地图上画线条

<template><div><div class="mapBOX" id="map" ref="basicMapbox"></div></div>
</template><script>
let map;import mapboxgl from 'mapbox-gl';export default {
methods: {this.initMap(){let mapStyle = require('../../../static/style.json');// sytle.json看上一篇文章，或者使用官方的网址也可以：let mapStyle = "mapbox://styles/mapbox/streets-v11"map = new mapboxgl.Map({container: this.$refs.basicMapbox,style: mapStyle,// 中心点：北京市center: [116.469000,40.251706],zoom: 10,minZoom: 3,maxZoom: 15,fadeDuration: 100,antialias: true,});map.on('load', () => {map.addSource('lineSource', {type: 'geojson',data: {type: "FeatureCollection",features: [{type: "Feature",geometry: {type: 'LineString',coordinates: [[116.469000,40.251706],[116.469000,40.351706],[117.469000,40.351706]],}},{type: 'Feature',geometry: {type: 'Point',coordinates: [116.469000,40.251706]}},{type: 'Feature',geometry: {type: 'Point',coordinates: [116.469000,40.351706]}},{type: 'Feature',geometry: {type: 'Point',coordinates: [117.469000,40.351706]}},]}});// 增加线条map.addLayer({id: "lines",type: "line",source: "lineSource",layout: {line-cap: "round",line-join: "round",},paint: {"line-width": 3, // 线条宽度"line-opacity": 1, // 线条透明度"line-color": "#000000", // 线条颜色}});// 显示线路节点map.addLayer({id: "lineSources",type: "circle",source: "lineSource",paint: {"circle-radius": 6, // 圆角值"circle-color": "#000000" // 节点颜色 },})}
},
mounted() {this.initMap()
}
}
</script>

三、地图点击标记点弹窗

这里参考复制了部分代码：

Mapbox 添加弹窗点击标记点出现弹窗 vue_Windyluna的博客-CSDN博客_mapbox添加弹框方法一：字符串拼接弹框内容：（弹框内容样式少的情况下）效果图：核心代码：var popup = new mapboxgl.Popup({ offset: 25 }).setHTML(`<div class="makerTop"><h2 class="markerHear" > 综合办一处 </h2></div>' '<div class="markerBody" ><p>设https://blog.csdn.net/Windyluna/article/details/120658613官网API：
http://www.mapbox.cn/mapbox-gl-js/api/#popup#settexthttp://www.mapbox.cn/mapbox-gl-js/api/#popup%23settext

<template><div><div class="mapBOX" id="map" ref="basicMapbox"></div></div>
</template><script>
let map;import mapboxgl from 'mapbox-gl';
import InfoPopup from "./components/info-popup.vue";
export default {
components: { InfoPopup },methods: {this.initMap(){let mapStyle = require('../../../static/style.json');// sytle.json看上一篇文章，或者使用官方的网址也可以：let mapStyle = "mapbox://styles/mapbox/streets-v11"map = new mapboxgl.Map({container: this.$refs.basicMapbox,style: mapStyle,// 中心点：北京市center: [116.469000,40.251706],zoom: 10,minZoom: 3,maxZoom: 15,fadeDuration: 100,antialias: true,});map.on('load', () => {this.openPopup()        });},// 地图标记点弹窗openPopup(coordinate = [116.469000,40.251706]) {let el = document.createElement('div')el.id = 'markerId'el.style.backgroundColor= '#6699ff'el.style.width = 20 + 'px'el.style.height = 20 + 'px'el.style.borderRadius = '50%'let marker = new mapboxgl.Marker(el).setLngLat(coordinate).setOffset([0, -19]).addTo(map) // 将标记添加到地图上this.currentMarkers.push(marker)// 添加弹窗const popDetail = Vue.extend(InfoPopup)let vm = new popDetail({propsData: {color: '#6699ff',name: 'xxx',},})vm.$mount() //挂载let popupTemp = vm.$el// 添加弹窗var popup = new mapboxgl.Popup({ closeButton: false, offset: 25, className: 'map-popup' }).setDOMContent(popupTemp)new mapboxgl.Marker(el).setLngLat(coordinate).setPopup(popup).addTo(map)},
},
mounted() {this.initMap()
}
}
</script>

InfoPopup组件：

<!-- 地图弹窗 -->
<template><div class="info-popup"><div class="info-popup-content"></div>{{ name }}</div></div>
</template><script>
export default {name: '',props: {// 显示名称name: {type: String,default: '名称'}},data() {return {}}
};
</script>
<style lang='less' scoped>
.info-popup {border-radius: 10px;font-family: "Microsoft YaHei";
}
</style>

四、再附上一些可能用到的方法

1. 鼠标经过事件

map.on('mouseenter', 'addLayer的id值', (e) => {console.log('e', e);
});

2. 鼠标点击事件

map.on('click', 'addLayer的id值', (e) => {console.log('e', e);
});

3. 地图平移

// center为要平移的坐标，zoom为平移的缩放级别
map.flyTo({ center:[坐标], zoom: 9 });