最近正在搞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>
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#settext
http://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 });