maobox-gl测量工具

一、介绍

这里使用到的库有：turf、mapbox-gl-js、mapbox-gl-draw
为了解决mapbox-gl的测量功能实现
功能有：测距（MEASURE_LINE）、测面（MEASURE_AREA）、清除测量（MEASURE_CLEAR）
使用方法也简单，直接调用方法即可，如测距：MEASURE_LINE()

二、效果图

测量面积
测量距离

三、代码

/*** 地图中的方法*/import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
import * as turf from '@turf/turf';
import { message } from 'antd';mapboxgl.accessToken = 'pk.eyJ1Ijoid3VsZWkwNDA3IiwiYSI6ImNrcTI2Y2g0MjAzMTUybnBnNjJ2Y3kxeXoifQ._56mKfU2QkCyCCSNxkCw3w';// 变量定义
let MAP = null;
let Draw = null;/*** 初始化地图*/
export const ADD_INIT_MAP = (container) => {MAP = new mapboxgl.Map({container,style: 'mapbox://styles/mapbox/streets-v11',center: [-74.5, 40],zoom: 9,projection: 'globe',});Draw = new MapboxDraw({displayControlsDefault: false,});MAP.addControl(Draw);return MAP;
};/*** 地图测量功能-添加标注*/
const MEASURE_ADD_TEXT = (coordinates, properties) => {if (MAP.getSource('measureText')) {MAP.removeLayer('measureTextLabel');MAP.removeSource('measureText');}MAP.addSource('measureText', {type: 'geojson',data: {type: 'Feature',geometry: {type: 'Point',coordinates,},properties: {Name: properties,},},});MAP.addLayer({id: 'measureTextLabel',type: 'symbol',source: 'measureText',layout: {visibility: 'visible','text-field': ['get', 'Name'],'text-justify': 'auto','text-size': 15,},paint: {'text-color': '#e73f32','text-halo-width': 2,'text-halo-color': '#ffffff',},});
};/*** 地图测量功能-清除测量标注图层*/
const MEASURE_CLEAR_TEXT_LAYER = () => {if (MAP.getSource('measureText')) {MAP.removeLayer('measureTextLabel');MAP.removeSource('measureText');}
};/*** 地图测量功能-测距*/
export const MEASURE_LINE = () => {Draw.deleteAll();Draw.changeMode('draw_line_string');MEASURE_CLEAR_TEXT_LAYER();function updateLine(e) {const data = Draw.getAll();if (data.features.length > 0) {const line = turf.length(data, { units: 'kilometers' });const lastPoint = turf.coordAll(data);// 测量的距离（千米）const rounded_line = line.toFixed(3);MEASURE_ADD_TEXT(lastPoint.at(-1), `${rounded_line}千米`);} else {if (e.type !== 'draw.delete') message.info('请点击地图以绘制线段');}}MAP.on('draw.create', updateLine);MAP.on('draw.delete', updateLine);MAP.on('draw.update', updateLine);
};/*** 地图测量功能-测面*/
export const MEASURE_AREA = () => {Draw.deleteAll();Draw.changeMode('draw_polygon');MEASURE_CLEAR_TEXT_LAYER();const updateArea = (e) => {const data = Draw.getAll();if (data.features.length > 0) {const area = turf.area(data);const center = turf.getCoord(turf.centroid(data));MEASURE_ADD_TEXT(center, `${(area / 1000).toFixed(3)}平方千米`);} else {if (e.type !== 'draw.delete') message.info('请点击地图以绘制面');}};MAP.on('draw.create', updateArea);MAP.on('draw.delete', updateArea);MAP.on('draw.update', updateArea);
};/*** 地图测量功能-清除*/
export const MEASURE_CLEAR = () => {Draw.deleteAll();MEASURE_CLEAR_TEXT_LAYER();
};

maobox-gl测量工具相关推荐

初识mapbox GL
一.概述最近由于项目的需求,借此机会对mapbox GL做了一个系统的学习,同时也对整个学习过程做一个记录,一方面留作自用,另一方面也希望看到此文的人在学习mapbox GL的时候,能够有所启发.有 ...
实现php实现价格的排序,PHP实现二维数组排序(按照数组中的某个字段)
CentOS 7 学习笔记(一)时间管理 1 获取当前时间 [root@limt01 ~]# date 2015年 05月 22日星期五 01:30:50 CST 2 获取当前日期 [root@li ...
deck.gl 调研
0 结论 deck gl 是基于 WebGL 的数据可视化框架,可以集成在主流的地图框架(arcgis,google maps,mapbox )中使用, 也可以单独使用. deck gl 通过laye ...
Mapbox gl tile瓦片渲染点以及图片Icon
Mapbox gl tile瓦片渲染点以及图片Icon 1. 效果图 2. 源码参考 1. 效果图点效果图如下: 以图标渲染效果图如下: 注意图片要不能跨域,需要下载的下来才能正常展示. 2. 源 ...
【Qt】错误GL/gl.h: No such file or directory的解决方法（以及cannot find -lGL解决方法）
1.问题描述 QtCreator第一次编译时,报错GL/gl.h: No such file or directory 错误信息如下: /home/Qt5.6.3/5.6.3/gcc_64/inclu ...
【Qt】Qt5.9.0: error: GL/gl.h: 没有那个文件或目录
重新安装ubuntu,在编译Qt时报错: /home/Qt5.9.0/Examples/Qt-5.9/widgets/widgets/calculator/button.cpp:51: from -/ ...
测量工具（keras）
keras提供了一些常用的测量工具,位于keras.metrics模型块中,专门用于统计训练过程中常用的指标数据使用方法分四个步骤:新建测量器->写入数据->读取统计信息->清零测 ...
SAP LSMW 导入Open PO单据，系统报错 --- GL account 670100 cannot be used ---
SAP LSMW 导入Open PO单据,系统报错 --- GL account 670100 cannot be used --- 笔者所在的项目,近期忙于主数据的准备和导入,我导入Open PO的 ...
谷歌为URL缩短服务goo.gl开放API
谷歌API的新消息:谷歌公司刚刚宣布为其URL缩短服务goo.gl开放API.现在,开发人员可以使用这些API将goo.gl的URL集成到自己的项目中.它是RESTful JSON API,可以在这里 ...
Qt 5.5增加了新的GL模块，并改进了跨平台支持
距离Qt 5.4发布仅仅六个月,Qt 5.5就修复了将近1500个已知缺陷,并增加了新的特性. 另外,除了可以确保及时为Windows 10做好准备外,它还改进了Linux及OS X兼容性. \\ Q ...

maobox-gl测量工具

一、介绍

二、效果图

三、代码

maobox-gl测量工具相关推荐

最新文章

热门文章