WebGIS小智
GIS工程师,架构师一名,B站抖音搜索WebGIS小智可免费学习系列教程,号JLA3002
展开
-
GIS矢量图形多边形地块行政区发光,阴影发光特效实现
首先我们要考虑,我们需要两个图层,一个图层用来发光,另一个图层用来做背景。我们都知道行政区图层肯定是面状图层,所以我们要为这个面生成一个线要素图层,或者是准备一个填充色为透明的和此行政区一样的图层铺在底下。总之方法有很多,我们关心的就是多边形的边界。具体根据不同的框架API所给的参数的不同,设置好线条的宽度和颜色即可。首先这是视觉反差,其次,我们的背景色不一定非得是同色系,其实像暗灰色,暗黑色等深色都是可以的。原因很简单,第二幅图我没有加衬托色 ,无论你的颜色多么鲜艳,看起来都是不会发光的。原创 2023-02-09 21:24:40 · 831 阅读 · 0 评论 -
GeoJSON全网最详细的介绍与解读
geometry字段用来记录这个地理要素的图形信息,我们刚才在上面讲过,地理要素分三种:点,线,面,因此我们还需要一个字段来记录这个要素的类型,所以在geometry字段下面还有个type字段,点要素的type就是。geojson数据在我们的webgis领域扮演了非常重要的角色,从服务端数据存储,网络传输,前端数据渲染,贯穿了整个链路,geojson标准被所有的地图框架所支持,所有前端地图框架在渲染canvas图形的时候也是依据这个标准的,因此掌握geojson,理解透彻geojson是非常重要的。原创 2023-01-26 13:16:20 · 2669 阅读 · 1 评论 -
MapBox在vue环境中添加图层样式错乱,修改样式无效的问题
如果你尝试将mapbox-gl引入vue环境,制作组件或者组件库,你会遇到这样的一个问题,就是你将mapbox-gl实例化以后的对象如果绑定到Vue的data选项里(将其设置为响应式对象)就会产生出一个很严重的bug,就是你调用addLayer接口的时候加载的图层样式发生错乱。正常情况下你可能写出了如下的错误代码:然而你发现你写完addLayer方法之后,图层是加载到地图上了,但是它的样式不对。并且无论你如何改颜色,他都是保持一种样式不变。并且我发现每个人遇到的样式错乱还不一样,具体原因也不清楚,但是原创 2022-12-06 11:54:25 · 718 阅读 · 0 评论 -
MapBox实现点图层图标分类加载
小白们写起来确实很费劲。在mapbox中,经常会有这样的需求,就是不同类别的点数据要展示不同的样式,例如学校有学校自己的图标,商店有商店的图标,医院有医院的图标,等等。首先有这么几种思路,第一是将数据提前做分类,通过filter方法将数据过滤成若干份,学校一份,医院一份,然后对应去渲染,代码逻辑也很简单,按照mapbox官网实例写的那样添加个图标就好。总之万事在于了解原理,其实不管你使用哪种办法,mapbox底层对于这种分类图标的渲染的基本逻辑是不变的,就是用数据中的字段对应图标,必须有一一对应的关系。原创 2022-11-20 18:16:16 · 842 阅读 · 0 评论 -
MapBox实现要素点击高亮的几种思路(点击颜色变化)
当点击要素的时候,会触发一个featureClick事件,在这个点击事件当中,我们重新设置B图层的过滤条件filter,使得我们选中的要素成为满足filter条件的要素,这样就会单独把我们选中的要素作为B图层所要展示的要素展示出来,进而叠加在A图层上,实现了高亮。实现思路是这样的,mapbox 中geojson图层展示的时候可以根据filter来进行局部的部分的展示,因此我们的思路就是准备一个和A图层一样的高亮图层B通过设置B的filter来单独展示某个要素。实际上高亮图层B就是专门为高亮而创建的。原创 2022-11-14 16:08:27 · 1977 阅读 · 0 评论 -
以MapBox为核心构建Vue地图组件库教程
不多废话直接讲干货,首先我们要清楚如何写一套组件库,类似于使用vue编写的elementui,使用react编写的antdesign等,我们现在要以GIS为核心写组件库,其实原理类似。一个是组件的主体vue文件,另一个是将组件局部暴露出去的index.js文件,当然你可以再此基础上增加你想要的其他的js文件和vue文件,上面讲的两个文件是必须的。这行命令可以将你写的组件库打包成压缩文件,一般是一个dist静态目录,在进行npm发布的时候也是将这个静态的dist发布在官网上。原创 2022-10-20 21:38:39 · 953 阅读 · 0 评论 -
MapBox入门教程一:token申请与环境搭建
然后点击提交之后会提示你认证失败,没关系,这时候你的邮箱已经收到了一封邮件,进入邮件以后,用自己的账户名和密码再次登录一遍就获得了token,他会给你一个公共token,当然你如果创建应用的时候需要只开放部分接口和功能的时候可以在单独申请一个token。然后 选择 developers ——documentation——Mapbox GL JS,点击左侧的installation或者直接在页面上找到 access-token,点击,然后找到。如果是简单的项目,一个html就够了,原创 2022-09-13 10:40:28 · 8719 阅读 · 7 评论 -
MapBox GL JS 与OpenLayers,Leaflet,maptalk等前端众多地图框架对比
如果你关注的是地图的美,前端渲染的炫酷,强调展示层面,那你选择mapbox准没错,如果你的地图应用有很多客户提出的个性化需求,对地图有很多频繁的操作需求,那你不妨试试ol,如果你要做移动端的app,可以使用leaflet,如果你要支持国产,那你也可以使用maptalk。maptalk的缺点在于稳定性不是很好,性能上与其他几个框架相比也稍微有点差,毕竟国内开源的,而且还是由个人编写的,背后没有资本的注入,确实没办法将框架有质的提升,不过对于新手练习,简单地图应用的构建还是完全够用的。原创 2022-09-05 16:47:59 · 5418 阅读 · 0 评论