使用百度地图MapvThree搞定距离面积测量

用户95208161179
59 阅读5分钟

用 MapV Three.js 的 Measure 工具，三分钟就能给地图加上点、线、面测量功能！

为什么要聊这个？

前阵子有个朋友跟我说："我这个项目需要在地图上量距离、算面积，但不知道从哪儿下手..."

我想想也是，咱们平时做地图开发的时候，测量功能真的是太常用了！比如：

  • 想知道两个地方之间有多远
  • 算算某个区域有多大
  • 在地图上标记一些关键点位

但是，如果要从零开始实现这些功能，还得考虑坐标转换、交互逻辑、样式渲染...哇，想想都头大！

别担心，今天我就来跟大家聊聊 MapV Three.js 里的测量工具，它已经把这些复杂的事情都帮你处理好了～

正文部分

测量工具有哪些功能？

Measure 工具支持三种测量类型：

1. 点测量（POINT）

  • 用途：在地图上标记点位
  • 场景：标注兴趣点、标记位置
  • 效果：点击地图就会在对应位置生成一个点

2. 距离测量（DISTANCE）

  • 用途：测量两点或多点之间的距离
  • 场景：规划路线、测量长度
  • 效果：连续点击多个点，自动计算总长度并显示

3. 面积测量（AREA）

  • 用途：测量多边形区域的面积
  • 场景：计算地块面积、统计覆盖范围
  • 效果：绘制多边形，自动计算面积

怎么使用测量工具？

使用起来超级简单，就像搭积木一样～

第一步：创建地图引擎

// 创建引擎实例
const engine = new Engine(mapContainer, {
  rendering: {
    enableAnimationLoop: true,
    sky: null,
  },
});

// 设置地图中心和缩放级别
engine.map.setCenter([116.516303, 39.799170]);
engine.map.setZoom(18);

第二步：创建测量工具

// 创建测量工具实例
const measure = engine.add(new Measure({
  type: MeasureType.POINT, // 设置测量类型
}));

第三步：开始测量

// 开始测量
measure.start({
  continuous: false, // 是否连续绘制
});

就这么简单！点击地图就能开始测量了～

连续绘制模式是个好东西

你可能会问："如果我想一次测好几个线段，每次都要点开始会不会很麻烦？"

别担心，连续绘制模式来帮你！

开启后，你画完一个图形，工具会自动帮你开始下一个，不用重复点击"开始"按钮。这在需要批量测量的时候特别有用～

measure.start({
  continuous: true, // 开启连续绘制模式
});

样式也能随心定制

默认样式不够好看？没问题，Measure 工具支持丰富的样式定制：

点测量样式

{
  fillColor: '#ff4d4f',      // 点的颜色
  pointRadius: 10,            // 点的大小
  fillOpacity: 1,             // 透明度
}

线测量样式

{
  strokeColor: '#1890ff',    // 线的颜色
  strokeWidth: 2,             // 线的宽度
  strokeOpacity: 1,           // 透明度
}

面测量样式

{
  fillColor: '#52c41a',      // 填充颜色
  fillOpacity: 0.3,           // 填充透明度
  strokeColor: '#52c41a',     // 边框颜色
  strokeWidth: 2,             // 边框宽度
  strokeOpacity: 1,           // 边框透明度
}

设置样式也很简单：

measure.setStyle(styleConfig);

切换测量类型

有时候我们需要在点、线、面测量之间切换，这也很容易：

// 切换到距离测量
measure.setType(MeasureType.DISTANCE);

// 切换到面积测量
measure.setType(MeasureType.AREA);

切换类型的时候记得先停止当前的测量哦：

measure.stop();

清空测量结果

画错了怎么办？没关系，清空重来就行：

// 清空指定类型的测量结果
measure.clearByType(MeasureType.POINT);

// 或者清空所有测量结果
measure.clear();

事件监听：知道什么时候测量完成

Measure 工具提供了事件监听，你可以在测量完成时做些额外处理：

// 监听测量完成事件
measure.addEventListener('created', () => {
  console.log('测量完成了！');
  // 可以在这里保存测量结果、更新UI等
});

如果是连续绘制模式，'created' 事件会在每个图形绘制完成时触发。

资源清理要记得

用完了记得清理资源，这是个好习惯～

// 移除事件监听
measure.removeEventListener('created', handler);

// 从引擎中移除测量工具
engine.remove(measure);

// 销毁引擎
engine.dispose();

核心要点

好了，讲了这么多，咱们来总结一下重点：

  1. 三种测量类型：点（POINT）、距离（DISTANCE）、面积（AREA），覆盖了常见的测量需求
  2. 连续绘制模式：批量测量时的好帮手，不用重复点击开始
  3. 样式自定义：颜色、大小、透明度都能调，打造你想要的效果
  4. 事件监听：通过 'created' 事件知道什么时候测量完成了
  5. 资源管理：用完记得清理，避免内存泄漏

💡 实用小技巧

技巧1：动态修改样式 在测量过程中，如果你觉得当前的样式不好看，可以随时调整：

// 修改样式会实时生效
measure.setStyle(newStyle);

技巧2：切换类型时的处理 切换测量类型时，最好先停止当前测量，避免状态混乱：

if (isMeasuring) {
  measure.stop();
}
measure.setType(newType);

技巧3：根据场景选择模式

  • 如果只需要测一次：用普通模式
  • 如果要批量测量：用连续绘制模式
  • 根据实际需求来选择，体验会更好！

思考

现在已经掌握了 Measure 工具的使用方法，想想看：

  • 你的项目中哪些地方可以用到测量功能？
  • 除了基础的测量，还能在测量结果的基础上做哪些扩展？
  • 比如把测量结果保存起来，或者导出成报告？

你有没有在项目中用过测量功能？有没有遇到过什么坑？或者有什么更好的实现思路？欢迎在评论区分享你的经验

如果觉得这篇文章对你有用，别忘了点个赞哦～

avatar
文章
阅读
粉丝