Leaflet 通过二维图片生成canvas三维地图
Leaflet是一个很成熟的地图组件其中有一个api是imageOverlay通过此api可实现功能。过程很简单首先需要UI提供一张三维地图的图片然后将图片根据bouder放上去即可。1、创建一个地图容器div classmap idleafletMap/div2、创建地图this.map L.map(leafletMap, {crs: L.CRS.Simple,minZoom: -5,maxZoom: 20,center: [500, 500],zoom: 0,doubleClickZoom: false,attributionControl: false,zoomControl: false,zoomSnap: 0.1,zoomDelta: 0.1,rander: {background: none,},});this.map.getContainer().style.background none;//取消地图的自带背景或将地图的背景置为透明transparent3、添加影像图层this.markerlayer L.layerGroup();this.imagelayer.addTo(this.map);4、定义图片的边界const bounds [[0, 0],[1000, 1000],];5、添加图片图层const image L.imageOverlay(require(./images/map_new.png), bounds);this.imagelayer.addLayer(image);6、设置地图视图到图片的边界this.map.fitBounds(bounds);完整代码如下可直接复制替换图片本地地址插入组件即可使用。template div classbox div classmap idleafletMap/div /div /template script export default { data() { return { map: null, markerlayer: null, imagelayer: null, }; }, mounted() { this.mapInit(); }, methods: { mapInit() { this.map L.map(leafletMap, { crs: L.CRS.Simple, minZoom: -5, maxZoom: 20, center: [500, 500], zoom: 0, doubleClickZoom: false, attributionControl: false, zoomControl: false, zoomSnap: 0.1, zoomDelta: 0.1, rander: { background: none, }, }); this.map.getContainer().style.background none; this.imagelayer L.layerGroup(); this.imagelayer.addTo(this.map); // 定义图片的边界 const bounds [ [0, 0], [1000, 1000], ]; // 添加图片图层 const image L.imageOverlay(require(./images/map_new.png), bounds); this.imagelayer.addLayer(image); // 设置地图视图到图片的边界 this.map.fitBounds(bounds); }, }, }; /script style scoped langscss .box { position: absolute; width: 100%; height: 100%; z-index: 1; } .map { width: 100%; height: 100%; } /style具体页面效果如下如想添加图片或添加鼠标事件可看我下一篇文章
)
