- 博客(105)
- 收藏
- 关注
RSS订阅
原创 《WebGIS快速开发教程》第7版发布
拿到新书我们可以看到第7版的整体风格是以“业务场景”为核心，所有讲解的知识点和案例都是围绕着业务场景来进行，很多讲到的内容都是各位在实际开发过程中多多少少会遇到的。书籍获取方式：链接: https://pan.baidu.com/s/1G7evzZ07u70qt2f_DH40yA?可以看到我们在封面上加了“classic”的字样，这意味着第7版将会是经典版本，或者说具有里程碑意义的一个版本。
2024-07-09 10:25:25
323
1
原创 《WebGIS快速开发教程》第6版正式发布啦！
大家过完了一个开心快乐团圆的春节之后，现在也开始慢慢进入到工作和学习的节奏中去了，最近的这段时间是大家考研结果公布和换工作的高峰期，很多成绩不太理想的学生和即将打算换工作的同学都可能会想学习webgis相关，因此我们团队赶在这之前将书籍的第6版进行了发布。此外我们还细化了leaflet、mapbox、openlayers、cesium等四个章节，大家最关心的其实还是研发本身，因此我们新增了很多实践性的开发技巧。同时我们还优化了纸质版的印刷体验，我们采用了护眼纸，和更优质的封面材料。
2024-02-28 16:13:27
570
原创 《WebGIS快速开发教程》第5版“惊喜”更新啦
1.我们增加了一章——openLayers，是的，我们也开始讲openlayers了，之前一直有小伙伴要求讲一讲ol，因为ol的API相对来说比较难，因此过去的几个版本没有融入ol，但是在长时间的思考之后，在想明白如何才能讲清楚ol之后，第5版我们终于增加了ol的讲解。过去的几个版本关于前端的知识都是建议大家自学，学习别人的前端讲解，但是有小伙伴反应别人的前端讲的很一般听不懂，希望我能补充补充前端的知识。这次的封面我们经过了全新的设计，不同于以往的任何一个版本。6.书籍的整体达到了接近10万字的篇幅。
2023-12-06 17:07:28
715
1
原创 《WebGIS快速开发教程第四版》重磅更新
1.最重要的部分是在书籍的末尾新增了三个实战案例，这三个案例来自于真实的项目（稍稍改编），对各位上手练习起到了非常大的帮助，另外这个三个项目分别对应书中之前讲过的leaflet框架，mapbox框架以及cesium框架。随着笔者夜以继日的不断忙碌，丰富和完善心血之作《WebGIS快速开发教程》，第四版也终于发布了，第四版相比于前三个版本可以用四个字概括那就是“重磅更新”，重磅两个字该如何理解呢？的知识，之前只有针对于图层的交互和事件，此版本补全了针对于地图的交互和操作。2.本书在第六章新增2节分别是。
2023-10-16 17:19:12
487
原创 Leaflet封装以及扩展自定义插件教程
在这个例子当中，我们首先新建了一个自己的类叫做GIS，然后写了一个自定义的方法叫做addColorfulLayer，方法的内容就是使用L.geoJson( )来建立一个geojson图层，设置其样式为随机颜色，最后把新建的layer对象返回，由于不想让外界访问这个layer因此我写成了_layer。L.Class.extend( )的使用流程是，先建立一个自定义的类，然后使用L.Class.extend( )将L身上的方法和属性都传递给你自己建立的类，然后使用自定义类的实例去调用你自己封装的方法。
2024-08-01 17:40:00
47
原创 Cesium分屏对比功能实现，完整版代码案例
同样的，如果想左右互相控制，可以把rightViewer的相机参数也设置到leftViewer的相机上即可。首先我们创建2个viewer，分别叫leftViewer和rightViewer。使用cesium开发的小伙伴们，分屏对比功能是视图功能中比较常见的一个需求。首先我们要准备一左一右2个div容器，用来挂在两个cesium实例。因此我们需要对相机camera的改变事件做一个监听。其实分屏对比的关键就在于左右两个视图如何联动起来。那么我们需要借助相机之间的参数传递来实现这个过程。
2024-04-24 18:08:06
168
原创 Mapbox中点图层和面图层点击事件重叠，禁止点击穿透方案
然后mapbox会为我们返回一个数组，这个数组里对应的是我们每个图层查出来的元素，比如上面的写法，我们得到的features就是数组，里面有两项第一个是点要素，第二个是面要素，然后我们就可以针对不同的结果做不同的操作，这里我采用的是状态标记法，当获取到点要素之后证明用户点击了点位，那么这个时候我把state状态改掉，然后执行面要素的操作时首先判断这个state，如果他的值是true就证明点图层被点击过，那这个时候就不能执行面图层的任何操作。这表示当我点击到点位的时候。我想阻止鼠标事件下穿。
2023-11-23 16:05:25
851
原创 MapBox免Token离线部署全套成熟方案
首先你需要把mapbox-gl.js源码文件中的一行代码进行改动，mapbox-gl.js大家可以在官网直接下载下来，然后进行修改，官网的这个文件是打包压缩之后的，修改后我们就可以直接使用，访问下面这个地址。其实需要申请token使用的本质原因是。这些东西mapbox官方肯定是不想让大家免费无脑使用的，所以加了token验证，而且这个token及其难申请，导致困扰到大家连起步都没法开始。这样的话，我们使用了非官方的layers资源，不仅可以正常的使用mapbox的功能，而且也不会因为没有token而报错。
2023-11-10 10:54:05
2667
原创 WebGIS国产化（信创）研发流程一：数据库的调研与介绍
因此如果你使用的国产数据库是openGauss数据库，还想存储计算空间数据，那么是必须要安装禹贡——YukonDB，额，这个命名的话总是感觉很奇怪，理论上讲禹贡是一个扩展，是一个产检，但是它又叫禹贡数据库。瀚高数据库是瀚高股份有限公司开发的空间数据库，官方称是基于postgresql来进行的开发，因此理论上讲应该是继承了postgresql的一些特性，并且应该也是支持postgis的。以上三个数据库都是国内比较主流的数据库，尤其涉及到toG的应用，更是几乎必选，本文先对这三个数据库进行简单的介绍。
2023-10-30 13:58:31
485
原创 MapBox 做聚合图点位聚合效果实现教程
聚合之后的点的位置还必须在点位比较密集的区域，那这样的话我们就得使用 mapbox 自带的聚合功能了。我们直接把图层的 cluster 设置开启，mapbox 会帮助我们自动计算聚合的结果。聚合多大范围也需要你指定。首先你可以手动的些代码来计算某个范围内的点的数量然后再把聚合的结果展示在这个范围的某个位置。这针对于简单的需求是比较有效的。注意聚合之后的点位必须用 circle 类型的图层来表示，使用其他的图层是不行的。第三个参数是聚合半径clusterRadius，这个半径越大会检索到越广的范围进行聚合。
2023-08-01 13:32:59
2997
原创 Cesium 中那些改变视角的方法，带你彻底了解 cesium 相机
offset 参数是指相机的偏移量。我们来看 camera 的 flyTo 方法如何使用，它一共有12 个参数其中有几个参数的意思和上面讲过的是一样的，比如duration参数和orientation参数，还有maximumHeight参数，orientation只不过是把 heading，pitch以及没跟大家说过的 roll 参数进行了封装。要注意，尽管 viewer 可以调用 camera ，并且 viewer 在执行飞行的过程中也是调用了相机，但是viewer 所调用的相机是经过进一步的封装的。
2023-07-14 15:10:11
2234
原创 Cesium 加载发光材质的行政区边界
那么如果我们在加载 geojson 行政区的时候，是不是 也可以利用这发光的线条来展示，但是在 cesium 中加载 geojson 使用的是GeoJsonDataSource这种方式，这种方式有个缺点，就是你的数据必须是线要素或者是把行政区的面要素转换成线要素在设置材质。具体的转化过程你可以依赖 turf.js将面转换成线要素,但是我不推荐这种方式原因有两个，第一转换起来比较麻烦，还得依赖第三方库，第二，不利于后续的交互操作，如果你将面转换成了线，那么后续点击面进行高亮的操作你又该如何应对？
2023-07-14 11:34:17
1769
原创 Vite+Vue3+Cesium工程搭建及初始化
cesium 中的一些资源文件是本地静态的，比如地球背后的宇宙贴图以及界面小组件的图标。这些文件必须放在项目中的静态文件夹之下，这些文件存在与 cesium 依赖包中的Build文件夹底下的Cesium文件夹之下，我们必须把整个 cesium 文件夹搬迁至项目中的 public 文件夹之下。现如今的前端更新太快了，我记得我一年前还在写 vue2+cesium 的工程构建方式。注意我们 public 文件夹是不需要写文件路径的，系统会自动帮我们锁定为根目录，也就是说直接写 Cesium/就好。
2023-07-05 15:37:01
861
原创 Mapbox 实现热力图教程
heatmap-radius热力图的半径和heatmap-opacity热力图的密度都是通过 zoom 来确定的，跟数据本身也无关，所以这里面可以总结出一点。只有热力图的权重这个参数是跟数据息息相关的，剩下的都只和缩放层级有关系。这个颜色和热力图密度heatmap-intensity是有关系的，密度从 0-1 之间的话，每个阶段的密度值可以对应一个颜色，自己可以根据区间进行调整。热力图在 maobox 中属于专题图的一种，他通过点的颜色和权重 来渲染点和点周围的指标情况。
2023-07-04 10:32:08
727
原创 MapBox 实现自定义地图样式配置（包含本地静态引入）
还有一种方法，我们如果不想把自己的样式暴露在互联网上，不想让别人也访问到。引入的方式有很多种，直接读取 json 或者变成 js 再引入都可以，看自己的喜好。你可以点击右上角的 share 按钮，然后在弹出的窗口中往下滚动。建议各位配置的样式都是基于已有的样式进行改动，不建议自己建立空白样式。点击按钮之后我们就来到了配置的页面，选择右上角的 new style。然后复制这里的 style url 你就可以直接加载你配置的地图了。这样就可以随心所欲的改变样式玩转地图了。这就需要我们要有自己配置地图的能力了。
2023-06-26 12:18:58
1566
原创 《WebGIS快速开发教程第二版》完成修订了
主要的内容集中在补充了第一版中所存在的一些不足的，知识衔接不够紧密的部分。另外就是修改了第一版中的一些错误的表达，以及错误的格式和错别字。之前没有购买过第一版书籍的小伙伴可以直接考虑第二版了，第二版是对第一版的补充和丰富，完全包含第一版的内容，但是价格和第一版是一样的哦～哦对了，还新增了常见问题解答环节，把大家伙经常问我的问题我都补充在这一部分了。最后需要告知大家的一个消息是：如果之前购买过第一版的小伙伴们现在可以。第二版相比于第一版新增了12页的内容，字数上新增了8000字左右。
2023-06-25 17:02:53
500
2
原创 Leaflet实现要素点击查询弹窗展示属性
这个click参数的值也是个回调函数，这个回调函数的参数是鼠标点击所拾取到的所有要素信息，e是包括经纬度，图层，要素等多个信息，e.target代表着图层本身的信息。e.target.feature即当前点击的要素。首先要清楚leaflet框架的构造，leaflet在加载图层的时候是对图层添加了事件监听的，也就是说用户对于图层的任何操作都可以被捕捉到。即我们在添加geojson图层的时候有个配置参数叫onEachFeature。这个参数的值是一个回调函数，这个回调函数有两个参数，分别是每个要素和整个图层。
2023-06-21 13:52:54
1418
原创 QGIS实现shape、geojson数据的矢量切片教程
如果是shape文件必须包含四个必要的文件即：.shp、.dbf、.shx、.prj。能够实现矢量切片的办法有很多，可以使用geoserver，可以使用qgis，当然也可以自己写代码实现。第二项选择图层，qgis支持同时对多个图层进行矢量切片，我们点击右侧 的...按钮选择要切片的图层即可。切片的速度极快，也可能是数据比较简单，层级比较小，如果设置层级高的话可能花的时间会更长一些。然后下面的extent是指数据的范围，这个通常能够自动计算出来，点击右侧的鼠标箭头按钮即可。本文我们使用geojson数据。
2023-06-20 16:16:14
2703
2
原创 QGIS实现tiff影像栅格数据切片教程
然后下面的参数各位就要根据自己的情况指定了，比如最小缩放层级minimun zoom和最大缩放层级maximun zoom分别决定着从第几个缩放层级开始切片，以及到第几个层级切片结束。这两个参数大家需要自己指定一个文件夹，不然切片结果会找不到，这些参数都填写好之后，就可以点击右下角的“run”按钮，开始执行切片过程。实现栅格切片的方式有很多种，geoserver可以，qgis可以。自己写代码也可以，方式非常多。但如果你是png格式的图片的话，它是无法计算的，所以需要你手动输入图片对应的经纬度范围。
2023-06-20 11:25:33
3490
原创 MapBox实现框选查询，多边形范围查询
我们可以监听地图的“onmousemove”事件，初始状态我们可以鼠标点击确定多边形的起点，然后鼠标移动的时候，我们让鼠标当前的位置和第一次点下的位置进行连线，这样就画成了一条线，顺着这个思路我们就可以不断的使用点击和鼠标移动的方式来绘制多边形。当然如果你是矩形或者圆形 的话思路是一样的，只不过画线的数学计算不一样，例如圆形的第一次点击是确定圆心的位置，鼠标的移动是为了确定圆的半径，第二次鼠标落下圆就画好了。第二个比较坑的地方是按照这个接口查询出来的结果并不准确，因为他选择的是外部边界的范围。
2023-06-12 14:02:00
864
原创 Mapbox表达式详细解读
初学mapbox 的小伙伴们一定会被表达式给弄的晕头转向的。明明条件判断或者回调函数能解决的问题。mapbox里非得让你用表达式。这确实比较ex。不过我们既然遇到了，也不要怕，这篇文章我就带着大家一点一点的搞明白这个所谓的表达式。首先从宏观上讲，要知道为什么使用表达式。在mapbox中。通常是为了把一些条件判断if/else简化，才选用了表达式的方式。一个表达式通常就一行代码。短短几十个字符就可以完成条件的自动匹配。
2023-06-07 14:48:23
1208
原创 自定义矢量切片工具tippecanoe的全网最详细的解读
的意思是如果在中低层级之下瓦片过大的话，要尽可能的把在一起的要素合并起来，这样做是为了在后续高层级的切片中够独立的区分出来每个要素。注意这个参数是必须的，如果你不写这个，输出的结果文件都是被mapbox提前预压缩的，这样的文件前端是不能够被渲染的，因此这里必须写这个。的意思是尽可能的切，就是指如果高缩放级别的瓦片体积还是比较大的话，就继续往下切，直到瓦片的体积不那么大为止。的意思是使用工具帮助我们判断切片的最大最小缩放层级，如果不写这个，就需要我们手动的来控制切片的最大和最小缩放层级。
2023-05-29 11:52:48
1302
原创 WebGIS统计及聚合统计效果实现
我们在实际的开发过程中难免会碰到聚合统计的需求，或者是有的时候我们一次性展示不了太多数据，我们就必须用到聚合的概念。其实在webgis中，聚合多半是空间上的聚合，也就是俗称的拓扑聚合。拓扑聚合就是将一个范围区域内的数据用一个点来表示，这个点上展示这个范围内的数据量，随着用户的选择和操作再逐步显示具体的数据（比如用户放大地图。我们本篇文章采用的是dom元素叠加到地图上，自定义聚合点的样式。不过这个行政区数据的属性中最好是携带每个子行政区中心点的数据，方便后续的名称展示和聚合dom的展示。
2023-05-18 15:24:17
308
原创 使用mapbox+turf.js完成迁徙图，流向图教程
尽管它这段弧线不是很明显，因为它的角度比较大，因此如果距离短的话，几乎就是一条直线，为了优化这一缺陷。我们可以配合另一个函数叫做：bezierSpline，这个函数是贝塞尔曲线函数，它能够将一段折线变得更加平滑，我们把greatCircle的结果放入bezierSpline中就会让这条线更有弧度。首先我们要把思路捋清楚，迁徙图表示的是从一个点出发向多个点均有流向（这个流向用线条表示）或者是从多个地方向一个地方汇总。也就是一对多或者是多对一，这里面的多和一都是城市位置，也就是经纬度坐标点。
2023-05-15 18:20:33
1432
原创 WebGIS支持国内各地方坐标系数据展示的方案
因为在国内我们认为wgs84坐标系和GCGS2000坐标系是等同的，因此很多webgis框架是支持wgs84坐标系展示数据的，甚至有的框架还支持GCGS2000坐标系，所以我们把地方坐标系转换成GCGS2000之后，其实数据就可以正常加载了。在我们的实际项目开发过程中，会存在着很多的客户提供的数据是地方坐标系的数据，这些数据通常是一些类似于地块数据，点位数据等等的矢量数据。地理坐标系又称为经纬度坐标系。我们的地方坐标系大多数都是投影坐标系，也即是地方坐标系的数据内部存储的不是经纬度，而是距离坐标。
2023-05-12 15:52:20
754
原创 《WebGIS快速开发教程》写好啦
内容上从基础的、底层的理论知识到前端的渲染再到服务端的介绍最后到架构上的设计。教会大家入门webgis，以系统化的知识体系作为基础，在这个基础上考虑了学生们没有开发经验的场景，考虑了前后端从业人员对于地理学不熟悉的场景。综合各位的需求，打造的这么一本适合入门和夯实基础的书籍。告诉大家一个好消息，经过我没日没夜，呕心沥血的创作，这本叫做《WebGIS快速开发教程》的书籍终于写好了。这本书适用于还未毕业的学生、以及正在从事传统前后端开发但是想转到WebGIS开发的人。九、GIS数据库基础。
2023-05-11 11:02:39
1403
1
原创 Mapbox多边形光效晕影特效的实现
2.使用turf.js中的transformScale获取该行政区的缩小边界，将这个边界以线要素的方式重新加载到地图上，线条的颜色和上面行政区的边界颜色一样透明度是0.3，比填充透明度稍微高一点就行。将线条的宽度设置的宽一点，线条的模糊度，也就是line-blur这个属性，设置的大一点，这样我们就得到了一个模糊的边界线，这也正是我们发光晕影的来源。这相比普通的多边形样式，边界有了渐变发光的效果，那么这篇章交给大家如何实现这样一个效果，让你的行政区，地块之类的多边形要素展示成发光的效果。
2023-04-25 10:40:16
1338
原创 使用Vite工具构建OpenLayers应用
当然这个神速是暂时的，vite不同于webpack，webpack在初始化项目的时候就会下载对应的依赖包。因此需要花费很长时间才能初始化好，而vite相反，它并没有去下载对应的依赖而是直接告诉你项目初始化好了，然后你去项目里开始运行的时候才开始给你下载对应的依赖包。openlayers最新版本的案例代码就使用了vite来构建，因此这一篇文章我们来给大家示范一下如何使用vite来构建一个基于openlayers的应用。所以我们只需要复制走html里的代码然后替换掉项目里的index.html的代码。
2023-04-19 11:42:28
378
原创 GeoServer发布一张纯图片作为地图教程
可以看到还是有一点误差，蓝色线是这个行政区标准得线，右下角的差距还是很明显，这主要是因为我们在地理配准的时候采用的是手工添加的控制点，难免会有误差，控制点误差越大就会对图形造成更严重的挤压变形，因此这就考验我们能不能精准的进行地理校准了。可能是一张手工绘图，也可能是一张影像图片，总归来说就是png，jpeg格式的纯图片，现在需要把这张图片加载到我们的地图上，该如何做呢？然后点击更新地理配准，完成后屏幕上就是我们矫正之后的地图，我们这时候可以右击图层，选择导出数据， 在弹出的对话框中要注意红色部分的配置。
2023-03-18 12:36:47
2065
1
原创 GeoServer图层切片（WMTS）详解
点击geoserver首页的图标，回到首页，点击wmts1.1.1，这时候会打开一个xml文件，这个文件内部记录了所有图层的wmts切片信息，包括每个图层是什么坐标系，切了几级，切片服务的地址等等，都记录在这个xml里面。这是 geoserver根据你的配置动态切割的图片，随着你鼠标滚轮的滚动，geoserver 会判断当前的层级比例尺分辨率，也就是zoom大小，动态的从服务端切割图片，然后再返回前端。首先我发布一个浙江省的shape作为数据源，这一步大家应该都会，不会的简单去百度一下这太简单我就不说了。
2023-03-14 15:26:28
2110
原创 PostGIS空间拓扑关系空间分析教程
但是这个函数比较不出来坐标顺序，也就是，这个函数认为两个相同的但是坐标顺序不一样的图形也是相同的图形。所以这个函数更偏重的是视觉上的是否相同。这个函数也指的是包含，两者的区别在于参数的顺序是相反的，st_within(A,B)表示B是否包含A，也就是A是否在B内部？注意这两个参数可以是任何类型的图形，可以是一个点和一个线，一个点和另一个点，一个线和另一个线，一个线和一个面，就是指空间上任意两个图形是否相交。要注意你比较的两个图形geom的坐标系必须是一样的，如果不一样需要提前转换成一样的再进行比较。
2023-03-13 15:04:30
723
原创 PostGIS扩展函数使用案例及解释（格式转换篇）(st_asGeoJSON,st_asText,st_asWKT.....)
这样写的结果和上面一样。2.st_aseWKT()此函数是将数据库中的数据转换为wkt格式的数据。本文我们来重点学习一下postGIS中对于空间数据格式转换常用的函数，postgis对于常用的空间数据格式例如geojson，wkt，kml，gml等。好我们进入正题，首先我们需要一个数据库的链接工具，当然你可以使用navicat，但是我在这里还是建议使用一款非常轻量开源且对gis非常友好的工具——DBeaver。注意上面的写法你得到的只是一个图形，只是geojson标准格式中的geometry而已。
2023-03-13 13:34:08
850
原创 一文带你彻底探究webgis坐标系知识（地理坐标系&投影坐标系）
我们国家定义和测算的数据和wgs84有些不一样，但是这个不一样又很微小，那就是我们国家测算的短半轴的数据和wgs84不同，这就导致了我们在经纬度的表示上会存在和wgs84有毫米-厘米级别的差异。我们都知道地球是一个两级略扁赤道略长的“扁球”，所以它的长半轴应该是赤道所在的圆面的半径，短半轴是地心到南北极的距离。它将立体的三维的地球渲染在了浏览器上。我们除了看到地图是长方形的之外，大家也可以注意一下靠近北极的部分，是不是感觉有点被压缩的感觉，感觉赤道附近的地图比较舒张，靠近两极的部分被拉长了一样。
2023-03-08 11:20:20
625
原创 WebGIS学习路线
7年经验的webgis码农在此文跟大家分享一些一路走来的所见所闻。希望能帮助刚刚跨入这个门槛的你。入门之前我相信你已经搞清楚了以下几个问题：1.什么是webgis？2.webgis能够解决什么样的问题？3.为什么你要学习webgis？如果还没考虑清楚也没关系，可能你看完这篇文章可能就顿悟这些问题的答案了。其实第三个问题的答案最简单，我想大多数人的答案无非是想多赚点玛尼。因为现在的前端已经非常卷了，卷的不像样了已经。前两天还有前端小伙子问我webgis学习路线，后来我想了想既然要分享路线，那也是首先分享给我的
2023-03-06 16:47:10
1104
原创 Cesium三维数据格式以及生产流程详解（glb，osgb，obj，bim，ifc）等
统一是指不管你什么格式，你都必须符合我的标准，我的标准是考虑到浏览器的垃圾性能而制定的。手工模型最常见的是gltf格式的模型。这种数据是一种二进制文件，osgb数据由两部分组成，第一部分是结构信息，内部存储了文件的lod（层级信息），以及三维顶点数据结构，第二部分是纹理信息，包含结构内部的纹理。这一点有点像文件压缩的zip和rar格式的文件，对你的文件进行了压缩，但是却饱含你文件的全部信息。其实就是大家所熟知的shape，geojson之类的传统的矢量数据，进行三维的拉伸，给他一个高度，生成一个立体。
2023-03-04 15:22:39
3411
原创 Leaflet基础入门教程（一）
leaflet加载天地图有两个地方需要特别注意，第一个是坐标系问题，需要先给leaflet指定坐标系，你可以指定4326 的地理坐标系，也可以是3857 的墨卡托投影坐标系。举个例子现在需要加载经纬度为单位的地图，那就要指定crs为EPSG4326，同样申请的天地图的服务为img_c如果是crs为EPSG3857那就需要加载img_w.我们有这样几种方式引入leaflet，第一种是cdn的形式，也就是在线的资源库，如果你是学生和小白为了测试和学习可以采用这种方式。leaflet默认是支持两种坐标系的。
2023-03-03 16:12:46
2064
原创 WebGIS行政区炫酷特效——流光特效教程
接下来就是动画的部分了，我们要让这个线条不断的动起来，因此我们就是要不断的选择新的线条，比如最开始的0-5个坐标是一组，然后下次渲染就变成了6-10这样，因此我们可以根据这个算法将线条不断的更新。我们就是要利用这个经纬度数组进行切割，假设我们提取第1个经纬度到第5个经纬度作为一段，我们让这段经纬度以线要素的方式进行渲染，那么我们就可以利用这段经纬度构造一个标准的线要素的geojson，为此我们可以封装一个函数，用于专门从多边形的geojson数据中提取一段线的geojson。
2023-03-03 13:51:55
1097
原创 MapBox采用marker方式加载图标图层（解决symbol图标丢失问题）
也就是点要素已经添加在地图上了，但是点要素对应的图片还没请求回来，mapbox在这方面的处理是请求不回来就不请求了，然后给你抛出一个监听，叫做：styleimagemissing，然而我发现在这个监听里面写代码显得尤为费劲，即使你在这个监听里再次请求没请求成功的图片，也不会再次触发地图渲染，必须调用map.repaint()。2.图层的删除问题。我们可以预先设定一个数组。这样的话marker对象就会存储在这个数组中，然后删除的时候遍历这个数组里的marker，调用marker自身的remove方法。
2023-03-01 18:17:05
1782
5
原创 总结一下这些年玩mapbox碰到的一些“坑”希望你们少走
不你删除的只是图层，你加进来的图片，对不起你得自己删除，我们不管，我们官方懒得很。，假设现在我有这么一个简单的需求，就是我希望加载杭州市的行政区划矢量图，我要求边框稍微粗一点，明显一点，中间的填充颜色半透明一点，我用mapbox我得写两遍addLayer，因为在mapbox的设计中，面的边缘和填充是分开的是两个图岑，面就面，边就是边。1A2B3C我写的很清楚啊，对不起，当你是这种情况的时候，你必须省略3不写，只写C，因为这是默认值，就是表示剩余的意思，剩余的都是C，所以你不能写3，看到这里你是不是无语了？
2023-02-23 23:50:01
938
原创 webGIS图形3D（2.5D）立体化地块阴影图形3D拉伸效果实现
关于颜色搭配在这里要强调一点，如果你的边缘颜色是亮色，鲜艳的颜色，那么填充颜色就必须设置成暗一点的颜色，你可以把上面的图层的填充颜色设置成暗色也可以直接设置成rgba(0,0,0,0.4）这种黑色阴影遮罩。如果你的边缘颜色是暗色，那么你的填充颜色必须是亮色，这考验你自己颜色搭配的能力了！2.交互问题，如果你的应用存在点击地块高亮的功能，那建议你还是在需要高亮的地块上面覆盖一个新的图形，或者直接替换掉其中上层地块对应的颜色也可以，总之需要调试到最好的展现效果。这是一个数学和美术结合的问题。
2023-02-23 10:51:15
862
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人