Vue3 + TS + Leafletjs 打造企业级原神大地图
获取ZY↑↑方打开链接↑↑
在开发涉及地图的应用或游戏时，实现大地图的控制功能（如缩放和平移）以及在地图上展示地名和标点是非常常见的需求。下面我将分别介绍这些功能的实现方法。
1. 大地图控制实现
缩放
缩放通常涉及到改变地图的比例尺，即地图显示的详细程度。在Web环境中，这通常是通过改变地图的缩放级别（zoom level）来实现的。对于原生应用或游戏，这可能涉及到改变地图纹理的细节层次（LOD, Level of Detail）。
示例代码（JavaScript + HTML5 Canvas） :
javascript浅色版本1// 假设我们有一个Canvas元素2let canvas = document.getElementById('mapCanvas');3let context = canvas.getContext('2d');45let zoomLevel = 1; // 初始缩放级别6let scale = 1; // 当前缩放比例78function zoomIn() {9 zoomLevel++;10 scale *= 1.2;11 renderMap();12}1314function zoomOut() {15 if (zoomLevel > 0) {16 zoomLevel--;17 scale /= 1.2;18 renderMap();19 }20}2122function renderMap() {23 // 这里假设drawMap函数会根据scale绘制地图24 drawMap(context, scale);25}
拖拽
拖拽功能允许用户通过鼠标或触摸屏移动地图的位置。这通常涉及到记录用户交互的起始位置，并根据用户的移动来更新地图的显示位置。
示例代码（JavaScript + HTML5 Canvas） :
javascript浅色版本1let isDragging = false;2let lastX = 0;3let lastY = 0;45canvas.addEventListener('mousedown', function(e) {6 isDragging = true;7 lastX = e.clientX;8 lastY = e.clientY;9}, false);1011canvas.addEventListener('mousemove', function(e) {12 if (isDragging) {13 let dx = e.clientX - lastX;14 let dy = e.clientY - lastY;15 // 更新地图的位置16 translateMap(dx, dy);17 lastX = e.clientX;18 lastY = e.clientY;19 }20}, false);2122canvas.addEventListener('mouseup', function() {23 isDragging = false;24}, false);2526function translateMap(dx, dy) {27 // 这里假设translateMap函数会根据dx, dy来平移地图28 // 可能需要计算新的坐标并重新绘制29}
边界限制
为了避免地图超出显示范围，需要检测地图的位置是否超出了预定义的最大和最小边界，并在必要时阻止进一步的移动。
示例代码:
javascript浅色版本1function checkBounds(x, y) {2 let maxX = /* 最大x坐标 */;3 let minX = /* 最小x坐标 */;4 let maxY = /* 最大y坐标 */;5 let minY = /* 最小y坐标 */;67 if (x < minX) x = minX;8 if (x > maxX) x = maxX;9 if (y < minY) y = minY;10 if (y > maxY) y = maxY;1112 return { x: x, y: y };13}
2. 地名展示
地名可以在地图上以文本标签的形式展示出来。通常，这些标签会放置在对应地点的附近，避免与其他标签重叠。
示例代码:
javascript浅色版本1function drawLabels() {2 let labels = [3 { name: '北京', position: { x: 100, y: 100 } },4 { name: '上海', position: { x: 200, y: 200 } }5 ];67 labels.forEach(label => {8 context.fillText(label.name, label.position.x, label.position.y);9 });10}
3. 标点展示
标点（例如兴趣点POI）可以通过图标或者特殊符号来表示。通常，每个标点都有自己的坐标，并且可能包含额外的信息（如名称、描述等）。
示例代码:
javascript浅色版本1function drawMarkers() {2 let markers = [3 { image: 'marker.png', position: { x: 150, y: 150 } },4 { image: 'marker2.png', position: { x: 250, y: 250 } }5 ];67 markers.forEach(marker => {8 context.drawImage(marker.image, marker.position.x, marker.position.y);9 });10}
以上是基本的实现思路，具体实现细节会根据实际的技术栈和框架有所变化。
