
跟牛老师一起学WEBGIS
文章平均质量分 71
主要包含:1、跟webgis相关的GIS基础知识;2、webgis原理;3、从0到1,结合前两部的理论,实现从底层实现webgis。通过这三个层次,让你对webgis有更加深入的了解。因此,专栏的目标群体为在校学生或者刚入行者。
牛老师讲GIS
《WebGIS开发从入门到实践》作者。12年毕业于兰州大学地理信息系统专业,毕业后一直从事webgis开发相关工作,熟悉leaflet,openlayers,mapboxgl。csdn博客专家,csdn讲堂签约讲师,开发并录制了《开源GIS开发入门》、《mapboxGL开发入门》、《webgis开发暑期实践》等课程。
展开
-
分享一个多边形合并的实现
本文分享一个不用`turf`并且能合并成一个多边形的实现。原创 2025-04-10 09:07:44 · 403 阅读 · 0 评论 -
GIS大一新生该如何规划?
GIS大一新生该如何规划?原创 2025-03-27 09:13:43 · 481 阅读 · 2 评论 -
分享一个精灵图生成和拆分的实现
本文分享基于Node和`sharp`库实现精灵图的合并与拆分。原创 2025-03-20 23:27:41 · 337 阅读 · 0 评论 -
基于Martin的全国基础底图实现
前面有文章基于Martin实现MapboxGL自定义底图分享了Martin的使用,本文使用网络收集的数据实现了全国基础数据的收集和基础底图。原创 2025-02-22 16:25:25 · 787 阅读 · 0 评论 -
仿高德地图实现输入起点和终点规划路径并可切换
本文结合高德API和MapboxGL,仿照手机版高德地图实现用户输入起点和终点位置并模糊搜索选择具体位置,根据选择的起始点位置规划路径,并实现多条路径的切换展示。原创 2025-02-19 17:49:53 · 301 阅读 · 0 评论 -
2024年年终总结
“又是一年年终至,正是总结今年时”。原创 2025-01-22 11:52:51 · 708 阅读 · 0 评论 -
分享一下Excalidraw的使用技巧
Excalidraw一款轻量的手绘风格电子白板在线应用,在多种平台上均可使用,非常方便。本文分享一下自己在使用时的一点心得。原创 2024-11-28 22:42:12 · 1121 阅读 · 0 评论 -
driver.js实现页面操作指引
本文引用`driver.js`,教你在你的页面也加入这般高大上的操作指引。原创 2024-11-19 14:36:01 · 713 阅读 · 0 评论 -
有关《WebGIS开发 从入门到实践》的分享
有关《WebGIS开发 从入门到实践》的分享原创 2024-11-02 20:53:35 · 800 阅读 · 5 评论 -
WebGIS开发中一些常见的概念
本文介绍一些WebGIS中常见的概念原创 2024-08-15 21:37:15 · 1364 阅读 · 0 评论 -
vconsole助力实现在线代码编辑调试
前面有文章[monaco-editor做自己的代码测试工具](http://t.csdnimg.cn/R0Qyo) ,本文书接前文,在代码中加入`vconsole`工具,可以进行代码调试、查看网络、查看元素等。原创 2024-04-04 17:43:03 · 596 阅读 · 1 评论 -
Geoserver中CQL_FILTER的使用
本文通过实际的例子演示如何使用`CQL_FILTER`原创 2024-03-31 10:48:40 · 4092 阅读 · 1 评论 -
二阶贝塞尔曲线生成弧线
分享一个二阶贝塞尔曲线曲线生成弧线的算法。原创 2024-01-13 08:47:25 · 778 阅读 · 0 评论 -
mapboxGL中区域掩膜的实现
区域掩膜的功能也是比较常见的功能呢,本文分享在mapboxGL中结合canvas如何实现。原创 2024-01-10 20:19:37 · 831 阅读 · 0 评论 -
跟牛老师一起学WEBGIS——WEBGIS实现(点聚类)
概述在地图上展示的点比较多的时候,我们通常会用聚类的方式来展示。本文讲述点聚类的展示方式。点聚类的实现与绘制方式代码如下:/** * 在地图上聚类 * @private */ClusterLayer.prototype._showCluster2Map = function () { const that = this; const features = that._data.features; that._clusterData = []; for (let i原创 2020-12-08 09:16:39 · 1171 阅读 · 1 评论 -
跟牛老师一起学WEBGIS——WEBGIS实现(绘制切片)
概述前面已经有三篇文章分别讲述了点、线和面、图片的绘制,在本文讲讲如何实现切片的绘制。5. 绘制切片前面的文章地图切片提到了切片的几个重要参数:切片范围、切片原点、分辨率,这些概念在实现切片的调用的时候都会用到,下面为实现代码:/** * 在地图上展示切片 * @private */TileLayer.prototype._showTile2Map = function () { const that = this; let extent = that._map.getBou原创 2020-12-06 09:20:07 · 862 阅读 · 1 评论 -
跟牛老师一起学WEBGIS——WEBGIS实现(绘制图片)
概述前面有两篇文章分别介绍了矢量数据点和线、面的实现,本文讲讲静态图片的绘制和WMS服务的展示。4.绘制图片图片的绘制我们分两种:静态图片和WMS服务。4.1 静态图片绘制静态图片我们只需要两个参数:图片地址和图片四至。实现代码如下:/** * 绘制静态图片 * @private */ImageLayer.prototype._drawStaticImage = function () { const that = this; const extent = that._p原创 2020-12-05 09:31:00 · 1228 阅读 · 0 评论 -
跟牛老师一起学WEBGIS——WEBGIS实现(绘制线和面)
概述前面的文章绘制点中实现了点的绘制,本文说说线和面的绘制实现。2、线数据绘制在canvas中可以通过ctx.lineTo(x, y)和ctx.stroke()实现线的绘制。绘制线的代码如下:/** * 在地图上展示线 * @private */VectorLayer.prototype._showLine2Map = function () { const that = this; const features = that._data.features; for原创 2020-12-04 08:27:37 · 999 阅读 · 1 评论 -
跟牛老师一起学WEBGIS——WEBGIS实现(绘制点)
三、WEBGIS实现后面的课程会以mapboxGL的canvas-source为入口开展,通过一个canvas画布,实现webgis的基础功能,包括:1、展示矢量数据(点、线、面,格式为geojson);2、展示x-y-z切片;3、展示wms服务。webgis基础功能部分,有一个比较核心的是前面的文章里面提到的屏幕坐标和地图坐标的相互转换,在mapboxGL中,可以通过map.project()实现地图坐标转换为屏幕坐标,通过map.unproject()实现屏幕坐标转换为地图坐标。为方便后面使用,原创 2020-12-02 20:39:29 · 1630 阅读 · 5 评论 -
跟牛老师一起学WEBGIS——WEBGIS基础(WMS服务)
2.2 WMS服务WMS是Web Map Service(网络地图服务)的缩写,是开放地理空间联盟 (OGC) 定义提供和使用动态地图时需遵守的国际规范。到目前为止,已发布了四个版本的 WMS 规范:1.0.0、1.1.0、1.1.1 和1.3.0(最新)。它是利用具有地理空间位置信息的数据制作地图,其中将地图定义为地理数据的可视化表现,能够根据用户的请求,返回相应的地图,包括PNG、GIF、JPEG等栅格形式,或者SVG或者WEB CGM等矢量形式。WMS支持HTTP协议,所支持的操作是由URL决定的原创 2020-08-29 09:15:22 · 1891 阅读 · 1 评论 -
跟牛老师一起学WEBGIS——WEBGIS基础(地图切片)
2.1 切片服务1.定义瓦片数据是将矢量或影像数据进行预处理,采用高效的缓存机制(如金字塔)形成的缓存图片集,采用“级、行、列”方式进行组织,可在网页中快速加载。因此,瓦片地图加载是根据客户端请求的地图范围和级别,通过计算行列号获取对应级别下网格的瓦片(即服务器预裁剪的图片),由这些瓦片集在客户端形成一张地图。2. 重要概念1.切片方案原点(Tile scheme origin)采用源数据集空间参考的坐标值,一般切片方案原点取左上角(例如:谷歌切片方案的原点是[-20037508.34,200原创 2020-08-23 14:00:19 · 2743 阅读 · 0 评论 -
跟牛老师一起学WEBGIS——WEBGIS基础(基础概念)
1、基础概念1.1 定义WebGIS是一种在Internet或Intranet环境下基于HTTP协议的用来存储、管理、分析、发布和共享地理信息的B/S模式分布式计算机应用系统。1.2 基本特征1.Web GIS是一个开放系统注重数据共享、软件重用、跨平台运行和易于集成等。简单地说,它能够共享多种来源、多级尺度、存放在不同地点的地理数据;能够通过对象管理、中件和插件等技术手段与非GIS系统(如Delphi)集成;并能够通过Java、CORBA、DCOM等技术跨平台协作运行,支持用客户机/服务器模式等原创 2020-08-20 21:59:09 · 5248 阅读 · 2 评论 -
跟牛老师一起学WEBGIS——GIS基础(QGIS中数据的创建与编辑)
5.1 目的不论是GIS还是WEBGIS,其核心是数据。实际中,我们获取数据的途径有很多种方法,但是“数字化”是一种比较常见也比较直接获取数据的方式,前面的文章数据的获取的时候也有提及。本节是一节实操课程,将如何在QGIS中如何创建、绘制以及编辑数据。希望通过本次课程,达到以下目的:了解GIS数据的基本获取方式;了解GIS数据的组织与存储方式;了解GIS里面图层(Layer)的概念;5.2 环境准备由于要在QGIS中操作,所以需要安装QGIS。QGIS可通过其官网https://www.qg原创 2020-08-16 10:24:29 · 2036 阅读 · 0 评论 -
跟牛老师一起学WEBGIS——GIS基础(GIS中的数据)
4、GIS中的数据4.1 基本特征1. 属性特征表示实际现象或特征,例如变量、级别、数量特征和名称等等2. 空间特征表示现象的空间位置或现在所处的地理位置。 空间特征又称为几何特征或定位特征, 一般以坐标数据表示, 例如笛卡尔坐标等。3. 时间特征指现象或物体随时间的变化,其变化的周期有超短期的、短期的、中期的、长期的等等。4.2 数据质量准确性(Accuracy)精度(Precision)空间分辨率(Spatial Resolution)比例尺(Scale)误差(Error)原创 2020-08-12 07:21:35 · 1905 阅读 · 0 评论 -
跟牛老师一起学WEBGIS——GIS基础(空间数据)
3、空间数据3.1 空间数据模型空间数据模型可以分为三种:场模型:用于描述空间中连续分布的现象;要素模型:用于描述各种空间地物;网络模型:可以模拟现实世界中的各种网络;1. 场模型对于模拟具有一定空间内连续分布特点的现象来说,基于场的观点是合适的。例如,空气中污染物的集中程度、地表的温度、土壤的湿度水平以及空气与水的流动速度和方向。场经常被视为由一系列等值线组成,一个等值线就是地面上所有具有相同属性值的点的有序集合。2. 栅格数据模型栅格数据模型是基于连续铺盖的, 它是将连续空间离散化。原创 2020-08-09 08:50:27 · 1949 阅读 · 0 评论 -
跟牛老师一起学WEBGIS——GIS基础(地图学)
2、地图学2.1 地图的主要特征1.地图信息的载体2.数学法则的结构3.有目的的地图概括经过分类、简化、夸张、符号化、模型化和概括方法,称为地图概括。5.符号系统的应用2.2 地图三要素地图是认识和分析研究客观世界的常用手段,尽管地图的表现形式发生了种种变化,但是依然可以认为构成地图的主要因素有三:地图图形、数学要素和辅助要素。1.地图图形用地图符号所表示的制图区域内,各种自然和社会经济现象的分布、联系以及时间变化等的内容部分(又称地理要素)。2.数学要素数学要素是决定图形分布位置和原创 2020-08-05 21:41:39 · 1603 阅读 · 0 评论 -
跟牛老师一起学WEBGIS——GIS基础(基本概念)
从毕业至今,已经八年有余了,在这八年多的时间里,一直在从事着跟GIS相关的工作,从刚毕业的桌面端(CS),到现在的浏览器端(BS),如果再加上毕业前的那段数据处理的实习经历,我算是从数据到开发,从技术到应用,都有一定的接触,也对GIS的一些原理性的东西了解的更为深刻了。俗话说:十年磨一剑。虽然工作的时间还未到,但如果加上在校学习时间的话,这个时间应该是远远超过10年的。受疫情的影响,年初有段时间是在家中办公的,这就免去了上班路上来回的折腾,也省下了不少的时间来思考一些事情。三月底的时候,根据公司的安.原创 2020-08-02 14:38:06 · 1508 阅读 · 2 评论