使用data-driven风格绘制圆形的Mapbox GL加载circle样式图层

最新推荐文章于 2024-09-24 13:52:26 发布

自由翱翔碧海蓝

最新推荐文章于 2024-09-24 13:52:26 发布

阅读量228

点赞数 1

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/ByteZenith/article/details/132291562

js 专栏收录该内容

440 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了如何使用Mapbox GL加载circle样式图层，并通过data-driven风格绘制不同大小和颜色的圆形。首先建立Mapbox GL地图实例，然后创建数据源，接着添加circle图层并利用属性控制圆形的半径和颜色。通过这种方式，可以灵活定制地图上的圆形元素。

使用data-driven风格绘制圆形的Mapbox GL加载circle样式图层

Mapbox GL是一种流行的地图绘制库，它提供了多种强大的功能和样式选项。其中一个重要的功能是绘制圆形图层，这在许多地图应用中都很常见。本文将介绍如何使用Mapbox GL加载circle样式图层，并使用data-driven风格来绘制圆形。

首先，我们需要一个Mapbox GL地图实例以及对应的HTML容器。以下是一个基本的HTML结构：

<!DOCTYPE html>
<html>
<head>

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

自由翱翔碧海蓝

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

129：vue+openlayers的extent 在EPSG:4326，EPSG:3857，EPSG:900913，CRS:84的范围值

大剑师兰特的GIS世界

09-07

1597

openlayers中会使用extent来设定地图的显示范围。以下是一屏map的范围。

mapbox进阶，添加绘图扩展插件，绘制圆形

我哎GIS博客

02-07

638

mapbox进阶，添加绘图扩展插件，绘制圆形

参与评论您还未登录，请先登录后发表或查看评论

Mapbox封装图形绘制工具线，圆，polygon，删除，点 mapbox-gl-draw-circle mapbox-gl-draw

LBY_XK的博客

09-24

891

使用插件，安装vue案例，封装的组件使用方式，通过tools控制需要哪些绘制控件。

mapbox 数据驱动样式

u012551120的博客

07-04

352

【代码】data-driven styling。

mapbox-gl画圆注意事项

Heyuner的博客

07-10

738

首先，要实现地图上按照一定距离（米）画圆，需要使用mapbox-gl的表达式功能（expressions），首先找到墨卡托坐标距离和屏幕上的像素换算公式。根据函数，传入圆的地理距离和圆中心点所在的纬度坐标，计算地图缩放到20级时，圆在屏幕上的像素尺寸。circle-radius 那里用stops。

027：Mapbox GL加载circle样式图层，用data-driven风格绘制圆形

大剑师兰特的GIS世界

04-25

1331

第027个本示例的目的是介绍演示如何在vue+mapbox中加载circle样式图层。圆形样式图层在地图上呈现一个或多个实心圆。您可以使用圆形图层来配置矢量切片中点或点集合要素的视觉外观。圆形层渲染其半径以屏幕单位测量的圆形。

Mapbox GL JS 中文文档

qq_38436431的博客

07-06

8253

Mapbox GL JS-地图是通过在浏览器中而不是在服务器上将矢量瓦片与样式规则相结合来动态渲染的，这使得可以根据用户交互来更改地图的样式和显示数据。在开始使用Mapbox GL JS之前，您需要有一个Mapbox访问令牌，并使用 CDN 或 Mapbox GL-npmpackage 将 Mapbox GL JS.添加到您的项目中。由于Mapbox GL JS中的层是远程的，所以它们是异步的。有关Mapbox GL JS地图中使用的Mapbox设计和自定义地图样式的更多示例，请参阅我们的。

Mapbox GL示例教程【目录】-- 已有93篇

大剑师兰特的GIS世界

04-12

5100

vue+mapbox系列教程旨在为开发者提供简单快捷的。在每一个示例中，解释相应的API知识点，做到。

mapbox js 实现风杆图层

最新发布

09-13

引用[1]提到Mapbox GL可以加载circle样式图层并使用data-driven风格。虽然风杆不是圆形，但我们可以借鉴其数据驱动的样式设置方法。 2. 引用[3]提到了自定义图层的使用，这可能是实现风杆的一种方式，因为风杆需要...

Data-driven Raster Layer with Mapbox GL

weixin_34402090的博客

04-11

307

为什么80%的码农都做不了架构师？>>> ...

draw-tool:在线绘制矢量元素（mapbox-gl + mapbox-gl-draw + nebula.gl）

05-28

draw-tool Draw vector elements online (mapbox-gl + mapbox-gl-draw + nebula.gl) 在地图中绘制编辑点线面等矢量要素 Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints and fixes files npm run lint

mapbox-gl-draw:mapbox-gl-js的绘图工具

04-30

@ mapbox / mapbox-gl-draw 增加了对地图上的绘图和编辑功能的支持。需要。兼容版本记录在package.json中在NPM上，此软件包最近已从mapbox-gl-draw移至@mapbox/mapbox-gl-draw 正在安装 npm install @mapbox/mapbox-gl-draw Draw随CSS一起提供，请确保将其包含在构建中。打字稿 Typescript定义文件可作为包的一部分提供。 npm install @types/mapbox__mapbox-gl-draw 使用模块时 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css' 使用CDN时 < link rel =' stylesheet ' href =' https://api.mapbox.com/mapbox

MapBox 绘制方法

Passerby_OK的博客

07-31

1063

MapBox 绘制图形

mapbox-gl自定义图层：画圆

地理信息技术杂谈博客，欢迎技术交流

01-13

2265

mapbox-gl的自定义图层（Custom Layer），是在地图的基础上，以webgl的形式进行勾画，mapbox-gl本身提供了画圆的接口，且是以像素的单位进行勾画的，参见公众号文章：mapbox-gl开发：画圆的一些问题，下边介绍一种使用自定义图层画圆的形式。 mapbox-gl自定义图层的使用中，需要将经纬度坐标转换成墨卡托的形式进行使用，参见公众号文章：mapbox-gl开发：自定义图层CustomLayer，在实际的开发中，是在地图上画一个正方形，使用webgl的shader进行半径控制，显示

mapbox-gl开发教程（十四）：画圆技巧

地理信息技术杂谈博客，欢迎技术交流

07-29

1928

mapbox-gl提供了一个画圆的图层方式，图层的类型设置成circle，通过设置circle-radius，实现圆的大小变化，不过这个参数的单位是像素（pixels），在地图缩放的时候，圆一直是像素尺寸，在地图上覆盖的空间面积也不同，不能满足按照地理距离单位的变化。mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论。...

vue中使用mapBox绘制圆形范围

甜甜圆圆圈圈的博客

03-24

3821

需求：根据给定经纬度坐标绘制给定半径的圆形区域。代码： <template> <div> <div id="map"></div> </div> </template> <script type="text/ecmascript-6"> //npm install ...

vue+mapbox-gl-draw 绘制矩形并添加第一个点

xm_w_xm的博客

03-25

4043

添加draw组件 let modes = MapboxDraw.modes; modes.draw_rectangle = DrawRectangle; //添加工具 this.draw = new MapboxDraw({ modes: modes, displayControlsDefault: false, }); map.addControl(this.draw, "top-right")..

Mapbox GL JS实现移动端H5实时多边形（涂鸦）绘制

做GIS梦的人

11-11

2870

关于使用MapBox GL进行图形绘制，很多人都在使用mapbox-gl-draw。但是它只是封装了一些简单的点、线、面的绘制功能。最近的一个项目提出了要求在手机上用手指拖动实现多边形涂鸦绘制，要求实时记录点。开始一直使用mapbox-gl-draw来做，但是始终无法实现手指拖动绘制的功能。最后，通过监听touch事件，实时改变source实现了这个效果。效果如下图：代码如下：注意，这里使用的监听事件，仅适合移动端使用，或者将Chrome调成移动端模式 <template>

使用mapbox自定义绘制工具（point，line，polygon，circle，rectangle）