WebGIS小智
GIS工程师,架构师一名,B站抖音搜索WebGIS小智可免费学习系列教程,号JLA3002
展开
-
WebGIS前端框架(openlayers,mapbox,leaflet)图形图像底层渲染原理分析
对于矢量图形的绘制渲染部分,底层调用的是canvas 的stroke(),fill()等方法,这些方法熟悉canvas的朋友都知道是用来绘制线条,绘制面的。相比于单纯的canvas,webGL拥有了三维空间的概念,可以设计出xyz的笛卡尔坐标系。包括前端现在最流行的开源三维框架cesium也是采用类似的架构,甚至cesium比mapbox在三维方面更加的精细和丰富其实有的时候渲染一幅地图也并不需要这么复杂的架构,只是简单的加载几个图片,简单的加载几个图形,其实像我们最初讲的使用svg也是够的。原创 2023-02-16 13:29:19 · 2357 阅读 · 0 评论 -
GeoJSON全网最详细的介绍与解读
geometry字段用来记录这个地理要素的图形信息,我们刚才在上面讲过,地理要素分三种:点,线,面,因此我们还需要一个字段来记录这个要素的类型,所以在geometry字段下面还有个type字段,点要素的type就是。geojson数据在我们的webgis领域扮演了非常重要的角色,从服务端数据存储,网络传输,前端数据渲染,贯穿了整个链路,geojson标准被所有的地图框架所支持,所有前端地图框架在渲染canvas图形的时候也是依据这个标准的,因此掌握geojson,理解透彻geojson是非常重要的。原创 2023-01-26 13:16:20 · 2669 阅读 · 1 评论 -
MapBox GL JS 与OpenLayers,Leaflet,maptalk等前端众多地图框架对比
如果你关注的是地图的美,前端渲染的炫酷,强调展示层面,那你选择mapbox准没错,如果你的地图应用有很多客户提出的个性化需求,对地图有很多频繁的操作需求,那你不妨试试ol,如果你要做移动端的app,可以使用leaflet,如果你要支持国产,那你也可以使用maptalk。maptalk的缺点在于稳定性不是很好,性能上与其他几个框架相比也稍微有点差,毕竟国内开源的,而且还是由个人编写的,背后没有资本的注入,确实没办法将框架有质的提升,不过对于新手练习,简单地图应用的构建还是完全够用的。原创 2022-09-05 16:47:59 · 5418 阅读 · 0 评论 -
OpenLayers构建4490坐标系地图解决方案
openlayers默认支持的坐标系有4326(基于美国wgs84坐标系)和3857(墨卡托投影)两种。但是我们国内在使用的时候非常的不便利,国内大多数的数据和产品大多是基于4490(GCGS2000坐标系)的,所以我们需要把openlayers进行扩展和变化,让其支持4490坐标系。...原创 2022-08-17 14:32:55 · 2564 阅读 · 0 评论 -
OpenLayers API 整理及代码架构解析(字典级解释)
这个方法很重要,而且经常用到,意思是飞行至某个要素feature,这个要素可以是一个点,一条线,一个面,如果是飞行至点就是点坐标,飞行至面或者线就是对应的面的extent,也就是范围坐标,在飞行的过程中还可以设置飞行动画时间duration,设置地图的缩放级别maxZoom或者maxResolution,注意这里只能是最大级别或者最大分辨率,也就是飞行结束时地图的级别或者分辨率。注意他的参数有两个,你可以以字符串的形式传入一个地图需要挂载的dom元素的id,也可以直接声明一个dom的js对象传入。.....原创 2022-07-26 10:24:10 · 1538 阅读 · 0 评论 -
GIS系列(七)Vue-cli工程与OpenLayers的整合
上篇文章介绍了Vue-cli工程如何与cesium框架做整合。这篇文章我们来介绍一下如何与OpneLayers做整合。安装node环境,搭建vuecli工程的过程和前一篇文章一样,如果不会可以戳这里。我们还是用vs code打开上篇文章中说的cesiumtext文件夹,先来一句命令把openlayers依赖包引入vue-cli工程里:npm install ol对,你没看错,就这么简单一个命令,就把ol引进来了,接下来我们用一个示例介绍一下具体的业务代码怎么写。我们打开openlaye原创 2021-05-10 13:03:04 · 701 阅读 · 3 评论 -
GIS系列(二)OpenLayers入门和详细解读
OpenLayers是一款开源的前端地图框架。它几乎能够解决绝大部分前端地图开发过程中的需求。这篇文章我为大家详细解读一下OpenLayers。首先,来看一张图,接下来我介绍的文字大家再阅读的时候可以对照着这幅图来理解。1.一副地图的核心当然是地图本身,任何框架和设计都是如此。OpenLayers(以下简称ol)也不例外。map类是整个框架的核心类,其余的类和接口都是围绕着map类来设计的。 如上图所示map包含了常用的6大方面,首先是view,视图。这个类相当于人的眼睛,它定义了...原创 2021-04-28 14:42:43 · 2136 阅读 · 1 评论