mapboxgl绘制3D线教程

最新推荐文章于 2024-08-21 08:56:45 发布

2301_82242204

最新推荐文章于 2024-08-21 08:56:45 发布

阅读量632

点赞数 22

分类专栏：程序员文章标签： 3d 面试职场和发展

本文链接：https://blog.csdn.net/2301_82242204/article/details/138364416

版权

《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！

设置完效果如下

效果好多了。

接下来继续尝试添加区县边界，之前也看到过类似效果，感觉应该也好实现

然鹅。。。

经过一番查找，发现发现mapboxgl可以对面进行拔高处理，但没有对线做拔高处理的方法，也就是说不支持绘制3D线。这可如何是好

既然线数据不能做拔高处理，那么把线处理成面总可以吧

于是从这个思路出发，按下面两步来操作

对行政区划边界进行缓冲，这里需要用到turf.js的缓冲方法
获取到缓冲后的边界面数据，再用fill-extrusion方式绘制

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

2301_82242204

关注关注

22
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

从零开始Vue项目中使用MapboxGL开发三维地图教程（四）改变鼠标style、地图置于单击feature中心、量测距离和polgon面积和中心点坐标

tigerhhzz的博客

06-14

1798

该功能使用mapbox gl draw绘制多边形，并使用Turf.js计算其面积（平方米）和中心点坐标。绘制最终顶点时双击以完成多边形。多边形的总面积将显示在地图的左上角。在地图上画一个多边形，并计算多边形中包含的面积和中心点坐标。要删除多边形并绘制新多边形，请使用地图右上角的绘制工具。单击地图上的点来创建线，使用turf测量线的长度距离。这里我们使用到turfjs库，安装并引入turf。单击地图开始绘制多边形。

从零开始Vue项目中使用MapboxGL开发三维地图教程（二）Mapbox地图样式

tigerhhzz的博客

06-12

1760

Mapbox地图样式：按照Mapbox地图样式规范中描述的模式定义的一个JSON对象，或者是此类JSON的URL。可以接受null值以允许手动添加样式。要从Mapbox API加载样式，可以使用表单的URL其中：owner是您的Mapbox帐户名，：style是样式ID。

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

mapboxgl绘制3D线

GIS兵器库

07-01

2226

最近遇到个需求，使用mapboxgl绘制行政区划图层，要求把行政区划拔高做出立体效果，以便突出显示。拿到这个需求后，感觉很简单呀，只需要用fill-extrusion方式绘制就可以啦，实现出来是这个样子的效果有点丑，并且这里有个问题就是我的数据是区县数据，而绘制出的效果却没有区分出各个区县的边界于是从下面两个方向做优化处理：各区县按不同颜色区分添加区县边界首先尝试不同区县按颜色区分。这个简单，只需要设置fill-extrusion-color即可 [外链图片转存失败,源站可能有防盗链机制,

mapbox-3dtiles:使用Mapbox GL JS自定义图层的3D Tiles实现

04-28

mapbox-3dtiles 使用Mapbox GL JS自定义图层的3D Tiles实现有关有效的演示，请参见。这是查看器作为自定义层的概念验证实现。 WebGL渲染是使用实现的。仅支持Web Mercator（EPSG：3857）切片集，因为这是投影mapbox所使用的。明确不支持以地球为中心的固定地球的图块集。使用使用带有EPSG：3857几何形状的PostGIS数据库生成用于测试的。这绝不是3D Tile规范的完整实现。当前支持以下功能：基于几何误差的图块加载替代和精炼仅支持Box边界体积平铺转换外部磁贴瓷砖类型：批处理3D模型（b3dm）点云（PNTS）：基本实施目前不支持以下功能： EPSG以外的任何坐标系：3857 区域和球体边界体积查看器请求量实例化3D模型（i3dm）切片复合（cmpt）瓷砖指示在Web服务器上的

Mapbox GL Language 开源项目教程

gitblog_01126的博客

08-21

594

Mapbox GL Language 开源项目教程 mapbox-gl-languageSwitch language of your Mapbox GL JS style项目地址:https://gitcode.com/gh_mirrors/ma/mapbox-gl-language 项目介绍 Mapbox GL Language 是一个开源项目，旨在为 Mapbox GL JS 地图提供多语...

Mapbox特效(3D飞线)

weixin_44927516的博客

01-15

2121

mapbox3D动态飞线

mapbox 添加3d模型

weixin_44766633的博客

11-16

2743

这边例子是已经封装好了的module的js。直接上例子 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> .

从零开始Vue项目中使用MapboxGL开发三维地图教程（三）添加全屏，缩放旋转和比例控制面板以及自定义图标、标记点击弹窗、地图平移等功能

tigerhhzz的博客

06-13

1619

/geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${

mapbox 修改初始位置_3dmax样条线的创建和修改

weixin_39925031的博客

11-28

199

大家好，今天我来为大家讲解一下3dmax中的样条线的创建和修改。样条线的应用是非常广泛的，比如说这个花瓶，它的周边就是用线绘制出来，然后载添加一个车削修改器就能够得到这样的一个效果，创建起来是比较简单的。这个场景里面的异形墙体、灯槽以及其他地板、灯带模型都是使用样条线制作出来的。单击创建，将对象切换为样条线，其中线的创建非常简单，但是它的用途是非常广的。我们现在单击线进行创建，选择线，在场景中点击...

Mapbox画一条跨全球的线

chiZCzhang的博客

04-15

1592

Mapbox画一条跨全球线时，会有一个180度的分界线如下图所示此时我们想要的是一条连贯的跨全球线，点的排列顺序如下 [ 167.348333333333, 35.535 ], [ 175.401666666667, 37.1016666666667 ], [ 175.401666666667, 3...

mapbox_polygon_demo.rar

03-31

最近在研究地图元素和客户端交互的方法，我将项目中的应用技能分享给大家！这是关于使用mapbox（点、线、多边形）选择或者称作拾取地图界面要素信息的demo

MapboxGL 折线图的绘制与展示

做GIS梦的人

09-01

623

前言前面的博文中介绍了一下如何在地图上展示饼状图和柱状图，下面简单介绍一下如何在地图上绘制折线图：使用方式下载依赖 npm install mapbox-map-tool --save 引入组件 import {LineCustomLayer} from "mapbox-map-tool"; import "mapbox-map-tool/dist/css/mapbox-map-tool.css"//建议在main.js中全局引入代码中使用 let chartLayer = new

Vue Mapbox-GL 在地图中增加图标、线条、标记点击弹窗、地图平移

qq_21138747的博客

01-10

1478

最近正在搞Mapbox-GL地图的一系列东西，按照公司的需求，要做成离线地图（点击这里），然后要在地图的基础上进行增加图标标记，线条连接、弹窗等等需求。ok废话不多，往下看。四、再附上一些可能用到的方法。三、地图点击标记点弹窗。一、在地图上增加图标。最后，react版本。

mapbox 实现点线面的绘制

weixin_50379372的博客

06-07

1962

mapbox

mapbox两点之间线的绘制

haoranyyy的博客

05-02

964

<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>绘制两点之间的线</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.m...

028：Mapbox GL 绘制线段，实时测量长度距离值

大剑师兰特的GIS世界

04-26

1443

第028个本示例的目的是介绍演示如何在vue+mapbox中添加draw组件，绘制线段，编辑线段，实时显示长度值。这里使用turf来计算长度值，采用默认的单位千米。

轻松绘制 3D 地图板块，自由配置纹理样式

weixin_42776027的博客

04-29

3538

在大屏效果中，3D 地图往往会成为设计师首选的主视觉，因为 3D 地图不仅仅能将数据和地理空间位置结合起来，还足够炫酷好看，而且地图还可以作为 3D 楼宇、园区、以及城市的基座。为了绘制上面的这些 3D 地图，最常见的做法就是使用 threejs/babylonjs 等常见的渲染引擎，自己拼接顶点构建地图版块，具体的实现可以参考下面的例子： three.js examples2912401452.github.io/easyvExamples/ 这种方法最大的问题就是自己绘制的地图板块

用 Mapbox 做 3D 地图，这篇文章快说透了（技术&案例大盘点）

hayaqi0504的博客

05-30

4786

我们在上个礼拜为大家整理了 2D 地图创作的神器 Mapbox Studio 入门教程合集《地图界的 PS — Mapbox Studio 入门指南（中英文教程合集）》，没想到获得了很多朋友的阅读、收藏和转发。那么既然如此，就一鼓作气把 3D 地图的教程也盘点出来吧。本文适合于想要入门 3D 地图制作的 Mapboxers，可能搞明白下面任何一个方法，都可以为你的项目带来绝佳的灵感。如果你是大神，请把它转发给你身边的「小白」吧。首先，我们先来看几个具有启发性的案例 3D 地图因为某个用户场景的存在，而

【WebGIS实例】（1）MapboxGL绘制端点有符号的线

ReBeX

10-26

1640

MapboxGL绘制端点有符号的线

mapboxgl绘制点线面