mapbox点线面绘画工具添加

1.安装

npm install @mapbox/mapbox-gl-draw

2.引入

import mapboxgl from 'mapbox-gl';
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import StaticMode from '@mapbox/mapbox-gl-draw-static-mode';import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'const modes = MapboxDraw.modes;
modes.static = StaticMode;

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.js'></script><link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.3.0/mapbox-gl-draw.css' type='text/css' />

3.使用

<template><div class="panel-map"><span class="title">停车场面域绘制</span><divclass="masking"v-loading="mapRendering"element-loading-text="地图渲染中"/><base-mapref="map":option="mapOption"@mapReady="addControl"></base-map></div>
</template><script>//底层地图import BaseMap from 'components/base-map-mapbox-ft';//引入import MapboxDraw from "@mapbox/mapbox-gl-draw";import StaticMode from '@mapbox/mapbox-gl-draw-static-mode';import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';import Api from '../api';const modes = MapboxDraw.modes;modes.static = StaticMode;export default {components: {BaseMap},props: {},computed: {},data() {return {mapOption: {zoom: 15,center:['113.738','22.755']},mapRendering:false,//添加绘制左上角绘制工具draw: new MapboxDraw({displayControlsDefault: false,controls: {polygon: true,trash: true},modes: modes}),geojson: {features: [],type: "FeatureCollection"},//绘制类型分为添加面域add或者修改面域updatetype:'add',}},methods: {//添加绘制组件addControl() {const map = this.$refs.map.getMap();map.addControl(this.draw, 'top-left');map.on('draw.create', this.updateArea);map.on('draw.delete', this.updateArea);map.on('draw.update', this.updateArea);if ( this.actionType === 'update') {this.initMapAndForm(map);}//左上侧工具按钮鼠标移入提示文字const polygonButton = document.querySelector('.mapbox-gl-draw_polygon');polygonButton.setAttribute('title', '绘制面域');const trashButton = document.querySelector('.mapbox-gl-draw_trash');trashButton.setAttribute('title', '删除面域');//地图加载状态this.mapRendering = false;},//将修改之前的面域绘制在地图上initMapAndForm() {//editData存储的是编辑之前的数据if(!this.editData.geometry?.coordinates){return}let arr = [];this.editData.geometry.coordinates[0].forEach(coor => {let poi = [coor[0]*1, coor[1]*1];arr.push( poi );});this.geojson = {type: "FeatureCollection",features: [{type: "Feature",geometry: {type: "Polygon",coordinates: [arr]},properties: {fname:this.editData.fname,}}]};this.draw.add(this.geojson);map.flyTo({center: [this.editData.longitude*1,this.editData.latitude*1],padding: 100,zoom:15,speed: 2,curve: 1,easing(t) {return t}});},updateArea() {//geojson存储的就是绘制面域的数据this.geojson = this.draw.getAll();}}}
</script><style lang="less" scoped>.panel-map{padding: 0 20px;height: 180px;.title{display: inline-block;margin-bottom: 10px;}}
</style>

4.效果

新增效果

编辑效果

mapbox点线面绘画工具添加相关推荐

R语言使用latticeExtra包可视化双Y轴线图实战（Dual Y axis）：单y轴线图、双y轴图线图、双y轴图线图（添加图例）
R语言使用latticeExtra包可视化双Y轴线图实战(Dual Y axis):单y轴线图.双y轴图线图.双y轴图线图(添加图例) 目录
二.mapbox使用loadImage和addLayer添加图片和文字
使用的离线地图中mapbox使用loadImage和addLayer添加图片和文字 <!DOCTYPE html> <html> <head><meta ch ...
R语言绘制箱线图并添加相关显著性
箱线图(又称盒须图)通过绘制连续型变量的五数总括,即最小值.下四分位数(第25百分位数).中位数(第50百分位数).上四分位数(第75百分位数)以及最大值,描述了连续型变量的分布. "它主 ...
【MAPBOX基础功能】09、mapbox绘制线图层并进行添加、删除、更新、显隐等操作
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
html增加删除线,HTML如何添加删除线？
HTML中可以使用<del>标签和<strike>标签来给文本文字添加删除线.<del> 标签用于定义文档中已被删除的文本:<strike> 标签用于定 ...
android字符串加删除线,android textview 添加上划线中划线删除线
很简单:两个例子一样例如1: android textview 添加下划线中划线删除线 tv=(TextView)findViewById(R.id.tvId); tv.getPaint().s ...
AutoCAD二次开发多段线分割、添加顶点
今天我们来学习关于多段线中添加顶点方面知识,这里使用的是autocad2016版,开发环境使用的是visual studio2012,很自然使用的.net4.5,这样做的主要的目的是,在使用polyl ...
mapbox和leaflet给地图添加遥感影像
mapbox map.addSource('raster-layer', {type: 'raster',tiles: ['你的地址']})map.addLayer({type: 'raster',s ...
复现《NC》图表（二）：R语言一键画表达量箱线图并添加显著性
我们接着重现NC这篇文章的Figure2,这篇文章里有很多这样的箱线图,这也是这个重现系列重点要讲的内容.原文作者提供了这部分代码,对于所有图提供了详细的数据,可以参考作图. 这里重现的重点在于批量画 ...

mapbox点线面绘画工具添加

mapbox点线面绘画工具添加相关推荐

最新文章

热门文章

mapbox点 线 面绘画工具添加

mapbox点 线 面绘画工具添加相关推荐

最新文章

热门文章

mapbox点线面绘画工具添加

mapbox点线面绘画工具添加相关推荐