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具体页面效果如下如想添加图片或添加鼠标事件可看我下一篇文章

Leaflet 通过二维图片生成canvas三维地图

相关推荐

集团网站群建设：打破信息孤岛，打造数字化协同新生态的实战思考

电气工程师必读：从指令集架构到硬件设计的核心指南

AI开发中段错误智能诊断：从内存访问原理到自动化修复实践

更多资讯

Trae与Cursor深度对比：AI编程工具六大维度选型指南

代码签名证书全链路实战：从选型到CI/CD集成与售后避坑指南

LTspice变压器建模全解析：耦合电感、参数化设计与反激仿真实践

扫雷游戏过程简介

POE供电的温湿度变送器如何落地？机房动环监测实践与选型指南

Orleans 虚拟 Actor 模型收益与权衡详解：稳定身份、轮次执行与可组合的运行时服务

今日更新

Play Framework 迁移指南：移除 GlobalSettings，全面转向依赖注入（Scala 与 Java）

Numba 类型推断机制详解：从 Numba IR 到编译期类型重建的完整原理与实践

企业级项目dragonballz_e159-1的技术架构与实现方案

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？