1.经度纬度
lng:是Longtitude的简写,表示经度,0-180
lat:是Latitude的简写,表示纬度,0-90
2.map对象
container: 将地图呈现的html元素id,指定元素不能有子元素。参数:htmlElement|string
minZoom: 地图最小缩小级别(0-24)。参数number。
maxZoom: 地图最大放打级别(0-24)。参数number。
style: mapbox的地图样式。参数string
3.代码展示
this.map = new mapboxgl.Map({
container: mapDom,
style: {
version: 8,
sources: {
'raster-tiles': {
type: 'raster',
tiles: ['http://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'],
tileSize: 256,
},
},
layers: [
{
id: 'simple-tiles',
type: 'raster',
source: 'raster-tiles',
minzoom: 0,
maxZoom: 17,
},
],
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
},
center: [121.487899486, 31.24916171], // 地图中心点
minZoom: 2.5, //地图缩放最小层级
zoom: 11, // starting zoom
maxZoom: 17, //地图放大最大层级
}).on('load', () => {
this.$emit('load', this.map);
this.map.on('click', 'recommendLayer', this.handleRecommendLayerClick);
this.map.on('mouseenter', 'report', this.handleReportLayerHover);
this.map.on('mouseleave', 'report', () => {
setTimeout(() => {
if (this.reportPop && !this.mouseOnPop) {
this.reportPop.remove();
}
}, 100);
});
this.map.on('click', 'report', (e) => {
const routeData = this.$router.resolve({ path: `/report?id=${e.features[0].properties.id}` });
window.open(routeData.href, '_blank');
});
});
其他对象内容查看链接:www.jianshu.com/p/98b105e19…