说在前面
相比较于leaflet
,mapbox
现在已经日益强大,他提供了很多应用的例子给我们,但是总会有些不能照顾到所有人的实际需求,所以今天来介绍一些mapbox
加载本地图片的例子。
开门见山
<template>
<div class="mapbox-container">
<div class="mapbox-container" id="mapContainer"></div>
</div>
</template>
<script>
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";
export default {
name: "mapbox",
data() {
return {};
},
mounted() {
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: "mapContainer",
style: { // 加载空白底图
version: 8,
layers: [],
sources: {},
},
center: [120.58823713531, 30.052169796647],
zoom: 10,
});
map.on('load', () => {
map.loadImage(require('./a.png')),function(error, image) {
if (error) throw error;
map.addImage('ref-name', image) // 此时map已经存储了一个图片对象,后续需要的时候可直接调用
map.addLayer({
id: "points",
type: "symbol",
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features: [{
type: "Feature",
geometry: {
type: "Point",
coordinates: [120.58823713531, 30.052169796647], // 图片位置
},
}],
},
},
layout: {
"icon-image": "ref-name",
"icon-size": 0.9,
},
})
}
})
}
}
</script>
说到最后
最后发散一下思维,如果大家希望添加多张相同的图片在不同位置可以怎么做呢? 大家可以看到features
变量接收的是一个数组,所以我们可以传递多个{},然后使用不同的坐标信息就可以啦。
以上。