WebGIS小智
GIS工程师,架构师一名,B站抖音搜索WebGIS小智可免费学习系列教程,号JLA3002
展开
-
Cesium分屏对比功能实现,完整版代码案例
同样的,如果想左右互相控制,可以把rightViewer的相机参数也设置到leftViewer的相机上即可。首先我们创建2个viewer,分别叫leftViewer和rightViewer。使用cesium开发的小伙伴们,分屏对比功能是视图功能中比较常见的一个需求。首先我们要准备一左一右2个div容器,用来挂在两个cesium实例。因此我们需要对相机camera的改变事件做一个监听。其实分屏对比的关键就在于左右两个视图如何联动起来。那么我们需要借助相机之间的参数传递来实现这个过程。原创 2024-04-24 18:08:06 · 41 阅读 · 0 评论 -
Mapbox 实现热力图教程
heatmap-radius热力图的半径和heatmap-opacity热力图的密度都是通过 zoom 来确定的,跟数据本身也无关,所以这里面可以总结出一点。只有热力图的权重这个参数是跟数据息息相关的,剩下的都只和缩放层级有关系。这个颜色和热力图密度heatmap-intensity是有关系的,密度从 0-1 之间的话,每个阶段的密度值可以对应一个颜色,自己可以根据区间进行调整。热力图在 maobox 中属于专题图的一种,他通过点的颜色和权重 来渲染点和点周围的指标情况。原创 2023-07-04 10:32:08 · 628 阅读 · 0 评论 -
MapBox 实现自定义地图样式配置(包含本地静态引入)
还有一种方法,我们如果不想把自己的样式暴露在互联网上,不想让别人也访问到。引入的方式有很多种,直接读取 json 或者变成 js 再引入都可以,看自己的喜好。你可以点击右上角的 share 按钮,然后在弹出的窗口中往下滚动。建议各位配置的样式都是基于已有的样式进行改动,不建议自己建立空白样式。点击按钮之后我们就来到了配置的页面,选择右上角的 new style。然后复制这里的 style url 你就可以直接加载你配置的地图了。这样就可以随心所欲的改变样式玩转地图了。这就需要我们要有自己配置地图的能力了。原创 2023-06-26 12:18:58 · 1406 阅读 · 0 评论 -
WebGIS统计及聚合统计效果实现
我们在实际的开发过程中难免会碰到聚合统计的需求,或者是有的时候我们一次性展示不了太多数据,我们就必须用到聚合的概念。其实在webgis中,聚合多半是空间上的聚合,也就是俗称的拓扑聚合。拓扑聚合就是将一个范围区域内的数据用一个点来表示,这个点上展示这个范围内的数据量,随着用户的选择和操作再逐步显示具体的数据(比如用户放大地图。我们本篇文章采用的是dom元素叠加到地图上,自定义聚合点的样式。不过这个行政区数据的属性中最好是携带每个子行政区中心点的数据,方便后续的名称展示和聚合dom的展示。原创 2023-05-18 15:24:17 · 269 阅读 · 0 评论 -
使用mapbox+turf.js完成迁徙图,流向图教程
尽管它这段弧线不是很明显,因为它的角度比较大,因此如果距离短的话,几乎就是一条直线,为了优化这一缺陷。我们可以配合另一个函数叫做:bezierSpline,这个函数是贝塞尔曲线函数,它能够将一段折线变得更加平滑,我们把greatCircle的结果放入bezierSpline中就会让这条线更有弧度。首先我们要把思路捋清楚,迁徙图表示的是从一个点出发向多个点均有流向(这个流向用线条表示)或者是从多个地方向一个地方汇总。也就是一对多或者是多对一,这里面的多和一都是城市位置,也就是经纬度坐标点。原创 2023-05-15 18:20:33 · 1323 阅读 · 0 评论 -
Mapbox多边形光效晕影特效的实现
2.使用turf.js中的transformScale获取该行政区的缩小边界,将这个边界以线要素的方式重新加载到地图上,线条的颜色和上面行政区的边界颜色一样透明度是0.3,比填充透明度稍微高一点就行。将线条的宽度设置的宽一点,线条的模糊度,也就是line-blur这个属性,设置的大一点,这样我们就得到了一个模糊的边界线,这也正是我们发光晕影的来源。这相比普通的多边形样式,边界有了渐变发光的效果,那么这篇章交给大家如何实现这样一个效果,让你的行政区,地块之类的多边形要素展示成发光的效果。原创 2023-04-25 10:40:16 · 1169 阅读 · 0 评论 -
Cesium三维数据格式以及生产流程详解(glb,osgb,obj,bim,ifc)等
统一是指不管你什么格式,你都必须符合我的标准,我的标准是考虑到浏览器的垃圾性能而制定的。手工模型最常见的是gltf格式的模型。这种数据是一种二进制文件,osgb数据由两部分组成,第一部分是结构信息,内部存储了文件的lod(层级信息),以及三维顶点数据结构,第二部分是纹理信息,包含结构内部的纹理。这一点有点像文件压缩的zip和rar格式的文件,对你的文件进行了压缩,但是却饱含你文件的全部信息。其实就是大家所熟知的shape,geojson之类的传统的矢量数据,进行三维的拉伸,给他一个高度,生成一个立体。原创 2023-03-04 15:22:39 · 3151 阅读 · 0 评论 -
WebGIS行政区炫酷特效——流光特效教程
接下来就是动画的部分了,我们要让这个线条不断的动起来,因此我们就是要不断的选择新的线条,比如最开始的0-5个坐标是一组,然后下次渲染就变成了6-10这样,因此我们可以根据这个算法将线条不断的更新。我们就是要利用这个经纬度数组进行切割,假设我们提取第1个经纬度到第5个经纬度作为一段,我们让这段经纬度以线要素的方式进行渲染,那么我们就可以利用这段经纬度构造一个标准的线要素的geojson,为此我们可以封装一个函数,用于专门从多边形的geojson数据中提取一段线的geojson。原创 2023-03-03 13:51:55 · 1041 阅读 · 0 评论 -
MapBox采用marker方式加载图标图层(解决symbol图标丢失问题)
也就是点要素已经添加在地图上了,但是点要素对应的图片还没请求回来,mapbox在这方面的处理是请求不回来就不请求了,然后给你抛出一个监听,叫做:styleimagemissing,然而我发现在这个监听里面写代码显得尤为费劲,即使你在这个监听里再次请求没请求成功的图片,也不会再次触发地图渲染,必须调用map.repaint()。2.图层的删除问题。我们可以预先设定一个数组。这样的话marker对象就会存储在这个数组中,然后删除的时候遍历这个数组里的marker,调用marker自身的remove方法。原创 2023-03-01 18:17:05 · 1682 阅读 · 5 评论 -
MapBox实现散点图教程
mapbox官网上提供了散点图的思路,不过那是用circle做的。说白了还是canvas绘图,操作比较麻烦表达式也不容易懂,本文给大家提供另一种思路。实现思路呢是基于mapbox提供的marker,marker能够设置html元素挂载在marker上面,因此我们只需要设计html元素的样式就可以了。下面是源代码,大家复制下来以后可以直接运行,不依赖于任何环境(但必须联网)这篇文章就是根据上面的思路写的,我介绍了相关的过程。原创 2023-02-22 17:40:05 · 363 阅读 · 0 评论 -
webGIS图形3D(2.5D)立体化地块阴影图形3D拉伸效果实现
关于颜色搭配在这里要强调一点,如果你的边缘颜色是亮色,鲜艳的颜色,那么填充颜色就必须设置成暗一点的颜色,你可以把上面的图层的填充颜色设置成暗色也可以直接设置成rgba(0,0,0,0.4)这种黑色阴影遮罩。如果你的边缘颜色是暗色,那么你的填充颜色必须是亮色,这考验你自己颜色搭配的能力了!2.交互问题,如果你的应用存在点击地块高亮的功能,那建议你还是在需要高亮的地块上面覆盖一个新的图形,或者直接替换掉其中上层地块对应的颜色也可以,总之需要调试到最好的展现效果。这是一个数学和美术结合的问题。原创 2023-02-23 10:51:15 · 793 阅读 · 0 评论 -
GIS矢量图形多边形地块行政区发光,阴影发光特效实现
首先我们要考虑,我们需要两个图层,一个图层用来发光,另一个图层用来做背景。我们都知道行政区图层肯定是面状图层,所以我们要为这个面生成一个线要素图层,或者是准备一个填充色为透明的和此行政区一样的图层铺在底下。总之方法有很多,我们关心的就是多边形的边界。具体根据不同的框架API所给的参数的不同,设置好线条的宽度和颜色即可。首先这是视觉反差,其次,我们的背景色不一定非得是同色系,其实像暗灰色,暗黑色等深色都是可以的。原因很简单,第二幅图我没有加衬托色 ,无论你的颜色多么鲜艳,看起来都是不会发光的。原创 2023-02-09 21:24:40 · 831 阅读 · 0 评论 -
物联网IOT项目以及地理实测数据记录等应用与GIS项目的整合处理方案
在GIS系统需要展示的时候将数据按照某些规则从云端获取,这样一方面做到了数据的分割提取,另一方面将大数据托管给云服务和云计算也是高效的。比如说现在有农田,林地,以及建设用地等等很多类型的地块,需要实际测量并实时记录。尽管在实际应用中可能在中间还会封装很多层,比如说设备点位的云存储,很多设备的地理位置及携带信息不是直接通过网络第一手传至GIS系统,而是先存储在云端,然后GIS系统从云端接入数据。绝大多数设备不仅拥有访问网络的能力,其自身还携带有包括芯片,嵌入式程序在内的多种功能,也就是说物联网设备是智能的。原创 2023-02-07 13:52:00 · 724 阅读 · 0 评论 -
turf.js实现行政区(多边形)图形合并边界提取,掩膜等效果
上面的例子就是根据数据中的combine字段来进行合并的,turf底层会把combine字段值相同的要素进行合并。在做前端行政区展示的时候,可能经常会遇到这样的需求,就是给定一个行政区比如杭州市各个区,县的行政区边界图形,但是我们现在需要一个杭州市的行政区边界,我们是否可以通过前端合并这些行政区,答案当然是可以的,我们可以使用turf.js来实现这个需求。另外dissolve所要合成的多边形是可选的,并不是全部的,假如地图上有11个要素,如果我只想合成其中几个,那么我可以根据某个字段来将这个个要素来合并。原创 2023-02-04 14:34:15 · 1865 阅读 · 0 评论 -
webgis应用的几种设计模式与构建方式
3.如果你是极其私密性的应用,并且整个应用非常的庞大复杂,但后续的迭代性不高,属于那种“一次性做好一劳永逸”类型的,你可以使用纯原生的方式去开发,就是不使用任何的前端框架,不用封装组件,也不用构建什么平台,就是直接把原生的GIS框架(openlayers,mapbox)拿来用,拿来开发,这样绝对是最省事并且自由度最高的方式,不用担心在封装过程中会产生什么bug,不好用爷就换一种方式🤪。GIS相关的部分单独处理。这样的平台也只是能抽象一些基础的常用的功能,对于深层次的复杂的功能还是需要开发人员手动编写代码。原创 2023-02-03 14:55:05 · 516 阅读 · 0 评论 -
GIS模块化介入常规项目的解决方案
2.写一套抽象出来的组件库,利用开源的GIS框架,将一些常用的GIS功能抽象出来,写成组件,比如说,基础底图的展示,封装几个wms,wfs,wmts的方法,请求一些底图,包括天地图等。这种方式是最笨重最累的,每次有了新的项目总是等前端后端的人开发完之后,再吧项目代码下载下来,开始写自己的GIS模块的功能,写完之后还得和非GIS的功能联调,不断地和纯前端的人员沟通,从开发效率上讲非常低下,耗费的时间也长,另外不断地和不懂GIS的前端交流真的很让人拴Q......3.基于上面的思想,我们能否优化一下?原创 2022-10-12 21:42:50 · 531 阅读 · 0 评论 -
turf.js介绍及使用(地图掩膜遮罩功能的实现)
其实turf的功能很强大,还有很多很实用的功能,由于时间有限我暂时就不分享那么多了,大家可以自己研究,turf实际上也算是一个前端的简易的地理分析,GIS空间分析库,我之前的文章中也有提到过,如果轻应用,小项目完全可以不用再服务端进行空间分析,前端用turf足以完成你的需求。上面是官网的示例,实际上可以计算边界的不仅仅是线要素,我们更多使用的是面要素,因此呢在使用这个函数的时候大家可以将一个标准的面要素,geojson格式的面要素当作参数传入,turf也会计算出一个extent给我们的。原创 2022-11-16 16:23:28 · 2367 阅读 · 0 评论