mapbox 展示地图添加点、线、面绘制工具

先看一下效果图

1、使用npm安装需要用到的依赖

安装mapbox地图展示时需要用到的依赖
npm install --save mapbox-gl
安装自定义点线面工具的依赖包
npm install --save mapbox-gl-draw
npm install --save turf
自定义点线面样式引入（在公共的index.html部分引入，一般都在public文件夹下）

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

- 如果不想安装依赖包，可以在公共的index.html部分引入js
（vue项目中不推荐这样引用，因为可能会影响其他模块，一般情况下推荐import引入方法）

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

2、html部分准备一个盛放地图的容器

<template><div id="map"></div>
</template>

3、javascript部分

import mapboxgl from 'mapbox-gl'
import turf from 'turf'
import MapboxDraw from 'mapbox-gl-draw'export default {data() {return {map: {}}}mounted() {this.initMap()this.initDraw()},methods: {// 初始化地图initMap() {// 访问通道，去官网注册一下就可以生成自己的通道mapboxgl.accessToken = 'pk.eyJ1IjoiMTgzODI0ZHl0IiwiYSI6ImNqbHExNDVjZzI0ZmUza2wxMDhocnlyem4ifQ.FZoJzmqTtli8hAvvAc1OPA' // 设置地图展示范围 lng: 经度  lat:纬度var bounds = new mapboxgl.LngLatBounds(new mapboxgl.LngLat(65, 15),new mapboxgl.LngLat(140, 55))this.map = new mapboxgl.Map({style: 'mapbox://styles/mapbox/streets-v11',  // 设置地图风格，官网提供了十种风格，可以去官网自行查看center: [118.78, 32.04],  // 中心点，默认值为[0, 0]zoom: 10,  // 缩放级别，默认值为0pitch: 45, // 倾斜角度，默认值为0bearing: -17.6, // 旋转角度，默认值为0container: 'map',  // 地图容器antialias: true,maxBounds: bounds  // 约束到给定边界})this.map.addControl(new mapboxgl.NavigationControl(), 'top-left')  // 放大、缩小、指北针控件}},// 自定义绘图工具initDraw() {this.draw = new MapboxDraw({displayControlsDefault: false,controls: {polygon: true,line_string: true,point: true,trash: true}})this.map.addControl(this.draw)this.map.on('draw.create', this.updateArea)this.map.on('draw.delete', this.updateArea)this.map.on('draw.update', this.updateArea)},updateArea(e) {var data = this.draw.getAll()var answer = document.getElementById('calculated-area')if (data.features.length > 0) {var area = turf.area(data)// restrict to area to 2 decimal pointsvar rounded_area = Math.round(area * 100) / 100answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>'} else {answer.innerHTML = ''if (e.type !== 'draw.delete') alert('Use the draw tools to draw a polygon!')}}
}

官方文档很重要，此处附上官方文档地址，一定要读文档啊！！！

官方API地址：https://docs.mapbox.com/mapbox-gl-js/api/

mapbox 展示地图添加点、线、面绘制工具相关推荐

C4D画笔工具绘制的曲线怎么添加点?
<C4D的十万个为什么>首发于公众号:苦七君免费搜索查看更多问题:kuqijun.com 问题: C4D画笔工具绘制的曲线怎么添加点? 答案: 一.为曲线添加点的方法 1.打开C4D操 ...
百度地图-绘制工具以及覆盖物的简单使用
这几天重拾了地图相关的功能,做一个小小的总结. 本文的示例的后端为flask框架,前端使用了bootstrap和jQuery以及百度地图API. 接下来是展示部分. 地图上的覆盖物表示高校所处的位置, ...
MpAndroidChart-LineChart 折线图使用（含动态添加点，动态添加曲线）
目录零.简介一.MpAndroidChart的基本使用 1.依赖:project的build.gradle 中添加 2.app的build.gradle 中添加 3.举例 4.常用API 二.Mp ...
Mapbox HTML可视化点，线，多线，面带底图
Mapbox HTML可视化点,线,多线,面带底图 1. 效果图 2. 源码参考 1. 效果图如下所示:可显示蓝色点.红色线.红色多线.浅紫色多边形面: 2. 源码 <!DOCTYPE ht ...
【高德地图进阶】--- 使用DistrictSearch 绘制城市版块
在[高德地图入门]-通过geoJson绘制点,线,面一章中,我们学会了如何使用GeoJson绘制城市版块.今天我们使用高德自己的api来绘制城市版块 DistrictSearch DistrictS ...
基于Mapbox的地图样式规范
Mapbox 地图样式规范关于Mapbox更多开发信息,可以直接访问Mapbox中文官网 Mapbox 样式文件定义的是地图所呈现的视觉外观,包括:需要绘制哪些数据.绘制的顺序.以及绘制数据时如何进 ...
echarts 地图九状线显示钓鱼岛系列（1）之 3.0 与2.0区别
由于echarts 3.0 和2.0版本不一样, 下文将分别介绍. (vue项目,可以参考 echarts 地图九状线显示钓鱼岛(续-vue项目) echarts地图需要按数据值大小,显 ...
vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
开源方案搭建可离线的精美矢量切片地图服务-3.Mapbox个性化地图定制入门
系列文章目录开源方案搭建可离线的精美矢量切片地图服务-1.开篇(附成果演示地址) 开源方案搭建可离线的精美矢量切片地图服务-2.PostGIS+GeoServer矢量切片开源方案搭建可离线的精美矢 ...

mapbox 展示地图添加点、线、面绘制工具

mapbox 展示地图添加点、线、面绘制工具相关推荐

最新文章

热门文章

mapbox 展示地图 添加点、线、面绘制工具

mapbox 展示地图 添加点、线、面绘制工具相关推荐

最新文章

热门文章

mapbox 展示地图添加点、线、面绘制工具

mapbox 展示地图添加点、线、面绘制工具相关推荐