WebGIS小智
GIS工程师,架构师一名,B站抖音搜索WebGIS小智可免费学习系列教程,号JLA3002
展开
-
Mapbox中点图层和面图层点击事件重叠,禁止点击穿透方案
然后mapbox会为我们返回一个数组,这个数组里对应的是我们每个图层查出来的元素,比如上面的写法,我们得到的features就是数组,里面有两项第一个是点要素,第二个是面要素,然后我们就可以针对不同的结果做不同的操作,这里我采用的是状态标记法,当获取到点要素之后证明用户点击了点位,那么这个时候我把state状态改掉,然后执行面要素的操作时首先判断这个state,如果他的值是true就证明点图层被点击过,那这个时候就不能执行面图层的任何操作。这表示当我点击到点位的时候。我想阻止鼠标事件下穿。原创 2023-11-23 16:05:25 · 688 阅读 · 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 评论 -
MapBox实现框选查询,多边形范围查询
我们可以监听地图的“onmousemove”事件,初始状态我们可以鼠标点击确定多边形的起点,然后鼠标移动的时候,我们让鼠标当前的位置和第一次点下的位置进行连线,这样就画成了一条线,顺着这个思路我们就可以不断的使用点击和鼠标移动的方式来绘制多边形。当然如果你是矩形或者圆形 的话思路是一样的,只不过画线的数学计算不一样,例如圆形的第一次点击是确定圆心的位置,鼠标的移动是为了确定圆的半径,第二次鼠标落下圆就画好了。第二个比较坑的地方是按照这个接口查询出来的结果并不准确,因为他选择的是外部边界的范围。原创 2023-06-12 14:02:00 · 773 阅读 · 0 评论 -
Mapbox表达式详细解读
初学mapbox 的小伙伴们一定会被表达式给弄的晕头转向的。明明条件判断或者回调函数能解决的问题。mapbox里非得让你用表达式。这确实比较ex。不过我们既然遇到了,也不要怕,这篇文章我就带着大家一点一点的搞明白这个所谓的表达式。首先从宏观上讲,要知道为什么使用表达式。在mapbox中。通常是为了把一些条件判断if/else简化,才选用了表达式的方式。一个表达式通常就一行代码。短短几十个字符就可以完成条件的自动匹配。原创 2023-06-07 14:48:23 · 1133 阅读 · 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 评论 -
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 评论 -
webGIS图形3D(2.5D)立体化地块阴影图形3D拉伸效果实现
关于颜色搭配在这里要强调一点,如果你的边缘颜色是亮色,鲜艳的颜色,那么填充颜色就必须设置成暗一点的颜色,你可以把上面的图层的填充颜色设置成暗色也可以直接设置成rgba(0,0,0,0.4)这种黑色阴影遮罩。如果你的边缘颜色是暗色,那么你的填充颜色必须是亮色,这考验你自己颜色搭配的能力了!2.交互问题,如果你的应用存在点击地块高亮的功能,那建议你还是在需要高亮的地块上面覆盖一个新的图形,或者直接替换掉其中上层地块对应的颜色也可以,总之需要调试到最好的展现效果。这是一个数学和美术结合的问题。原创 2023-02-23 10:51:15 · 793 阅读 · 0 评论 -
MapBox实现散点图教程
mapbox官网上提供了散点图的思路,不过那是用circle做的。说白了还是canvas绘图,操作比较麻烦表达式也不容易懂,本文给大家提供另一种思路。实现思路呢是基于mapbox提供的marker,marker能够设置html元素挂载在marker上面,因此我们只需要设计html元素的样式就可以了。下面是源代码,大家复制下来以后可以直接运行,不依赖于任何环境(但必须联网)这篇文章就是根据上面的思路写的,我介绍了相关的过程。原创 2023-02-22 17:40:05 · 363 阅读 · 0 评论 -
MapBox动态气泡图渲染教程
很简单,个性化,气泡的个性化需求太多,如果你传参传进来一个数组的话,那么每个数据身上都必须有一定的属性字段。大家一边读上面这段代码我一边来解释一下,首先我们要创建一个div,这个div就是那个气泡本身,那么这个的div的样式必须是气泡的样式,也就是说它必须是圆形的,具体的css细节我们后面再讲。对于mapbox和openlayers这样的框架来讲,气泡图中的气泡本质上就是一个div,就是将一个dom元素追加到canvas上的固定位置而已。那就将气泡的style的width和height设置成和数据相关的。原创 2023-02-22 15:33:06 · 702 阅读 · 0 评论 -
WebGIS前端框架(openlayers,mapbox,leaflet)图形图像底层渲染原理分析
对于矢量图形的绘制渲染部分,底层调用的是canvas 的stroke(),fill()等方法,这些方法熟悉canvas的朋友都知道是用来绘制线条,绘制面的。相比于单纯的canvas,webGL拥有了三维空间的概念,可以设计出xyz的笛卡尔坐标系。包括前端现在最流行的开源三维框架cesium也是采用类似的架构,甚至cesium比mapbox在三维方面更加的精细和丰富其实有的时候渲染一幅地图也并不需要这么复杂的架构,只是简单的加载几个图片,简单的加载几个图形,其实像我们最初讲的使用svg也是够的。原创 2023-02-16 13:29:19 · 2357 阅读 · 0 评论 -
MapBox实现自定义按钮全屏和自定义按钮地图导出(地图截屏下载)
所以呢,我们也可以通过这个挂载的元素的id来让它全屏,注意,如果是这种方式的全屏,覆盖在地图上的其他元素(比如你通过position:absolute)写的其他的div也会跟着全屏,因为这些元素都是#map的子元素,而如果你使用前两种办法 的话,全屏的就只是地图的canvas,不会附带其他元素。接下来再来说复杂的需求,我想让下载的地图附带一些元素(比例尺,放大按钮,全屏按钮)等等,我们可以把地图所在的外层的div导出。那么你就需要将地图所挂载的外层div元素作为图片导出。原创 2023-01-13 16:00:26 · 1150 阅读 · 0 评论 -
MapBox-draw绘制插件的使用教程(含修改样式和方法封装)
在这里顺便说一下:draw绘制工具的使用方法是单机一次激活,再单击一次进入编辑,也就是双击进入编辑,因此图形存在三个状态,未激活状态,激活状态和编辑状态。这些样式的id代表了不同的含义,比如第一个id的后缀是.cold并且有inactive字眼他代表的就是绘制结束以后未激活状态下的图形的样式。很多时候我们有这样的需求,比方说我们获得了一个地块,多边形,我们想把这个地块导入到地图中然后对其进行编辑,那该怎么做呢?有些同学觉得mapbox自带的绘制按钮太丑了,但是官方也没有提供可以修改其样式的api。原创 2023-02-15 12:31:16 · 2786 阅读 · 0 评论