![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
开源GIS
文章平均质量分 93
不睡觉的怪叔叔
行胜于言
展开
-
Openlayers官方示例详解十二之通过XYZ方式加载瓦片地图
目录一、示例简介二、代码详解三、补充一、示例简介 这个示例展示了通过XYZ格式的URL访问瓦片地图数据,有关XYZ方式加载瓦片地图可以参考这篇文章:万能瓦片加载秘籍。 本示例加载的瓦片地图是Thunderforest的地图数据,Thunderforest的官网地址是:http://www.thunderforest.com/ 注意它不是完全免费的开...原创 2018-12-19 09:58:32 · 10315 阅读 · 3 评论 -
OpenLayers教程一:OpenLayers概述
目录一、OpenLayers简介二、OpenLayers的特征三、OpenLayers的框架结构一、OpenLayers简介 OpenLayers是一个用于开发WebGIS客户端的JavaScript包,最初基于BSD许可发行。 OpenLayers是一个开源的项目,其设计之意是为互联网客户端提供强大的地图展示功能,包括地图数据显示与相关操作,并具有灵活的扩展机...原创 2019-05-30 17:58:16 · 102472 阅读 · 4 评论 -
OpenLayers教程三:地图控件之缩放控件
目录一、地图控件简介二、普通缩放控件三、滑块缩放控件四、缩放至特定位置控件五、修改控件样式一、地图控件简介 OpenLayers封装了很多控件用于对地图进行操作、显示地图信息等。 具体来说,控件是一个地图上可见的小部件,其DOM元素位于屏幕上的固定位置。它们可以包含用户输入(以按钮的形式),也可以只提供信息。控件的位置是使用CSS来确定,当然也可以使用C...原创 2019-06-04 11:17:42 · 12604 阅读 · 3 评论 -
OpenLayers教程五:地图控件之坐标拾取控件和鹰眼控件
目录一、坐标拾取控件二、鹰眼控件一、坐标拾取控件 很多时候我们想要实时获取鼠标光标指示处对应的坐标,就像高德地图的坐标拾取:https://lbs.amap.com/console/show/picker OpenLayers提供的ol.control.MousePosition类也能够实现坐标拾取功能。 MousePosition.html:<...原创 2019-06-10 15:32:05 · 6188 阅读 · 7 评论 -
OpenLayers教程六:地图控件之旋转控件与比例尺控件
目录一、地图旋转控件二、比例尺控件一、地图旋转控件 地图旋转控件(ol.control.Rotate)默认被自动加入到地图中,所以每一个使用OpenLayers创建的地图中都包含了旋转控件。 simple_map.html:<!DOCTYPE html><html lang="en"><head> <met...原创 2019-06-11 14:20:12 · 4529 阅读 · 0 评论 -
OpenLayers教程八:多源数据加载之数据组织
数据是GIS的血液,可以说GIS应用系统的几乎所有活动与行为都围绕数据展开。那么在GIS对数据加载、存储、分析与操作这几个过程中,我们首先讨论在由OpenLayers构建的WebGIS系统中,数据如何合理加载。 随着WebGIS应用的不断发展,目前出现了大量网络地图服务资源,包括国外互联网公司的Google地图、Bing 地图、Yahoo 地图,国外的开源地图OpenSt...原创 2019-07-02 15:23:39 · 2665 阅读 · 0 评论 -
OpenLayers教程十三:多源数据加载之详解OpenLayers的瓦片坐标系
目录一、OpenLayers中定义瓦片坐标系的接口二、通过自定义OpenLayers的瓦片坐标系来加载百度地图三、分析瓦片地图的瓦片坐标系3.1、加载微软Bing中文地图3.2、加载Google中文地图 前面的文章已经简单介绍了瓦片坐标系是瓦片地图的组织框架,现在我们来详细探讨OpenLayers中的瓦片坐标系,从而让我们在加载各种瓦片地图的过程中能得心应手。一、...原创 2019-07-10 12:30:52 · 5300 阅读 · 3 评论 -
OpenLayers教程九:多源数据加载之瓦片地图原理一
目录一、瓦片地图简介二、LOD一、瓦片地图简介 瓦片地图(也叫切片地图)源于一种大地图解决方案,就是在多个比例尺下配置地图,然后提前把每个比例尺下的地图绘制为小块图片(瓦片),保存在服务器上用于缓存的目录中。这样客户端在访问地图时,可以直接获取需要的小块图片拼接成整幅地图,而不是由服务器动态创建(实时创建)出一幅图片再发送到客户端,从而极大提高了访问速度。 瓦片地图...原创 2019-07-03 20:52:47 · 3334 阅读 · 0 评论 -
OpenLayers教程十五:多源数据加载之矢量地图
目录一、矢量地图简介二、在OpenLayers中直接组织矢量数据三、通过url加载矢量数据四、样式设置一、矢量地图简介 前面介绍的瓦片地图将地理信息以一块块瓦片的形式进行组织并渲染,瓦片的本质是图片,因此不能对瓦片地图进行修改样式、空间分析等操作,而且瓦片不包含属性信息,隐含的空间信息也不能直接获取使用。 矢量数据使用矢量数据模型来组织地理信息,矢量数据模型...原创 2019-07-15 11:17:20 · 3305 阅读 · 4 评论 -
OpenLayers教程十:多源数据加载之瓦片地图原理二
目录一、瓦片计算1.1、切片方式1.2、瓦片数量计算1.3、瓦片坐标系二、分辨率2.1、分辨率简介2.2、Web墨卡托投影坐标系中的分辨率2.3、OpenLayers默认使用的分辨率一、瓦片计算1.1、切片方式 如果对整个地球图片进行切片,需要考虑的是整个地球图片大小,以及切片规则,切片(瓦片)大小。 对于WebGIS而言,在线地图几乎...原创 2019-07-05 11:16:49 · 3269 阅读 · 1 评论 -
OpenLayers官方教程二:实现简单的地图显示
目录一、下载OpenLayers二、构建简单的地图应用三、OpenLayers的DOM元素组织结构 经过上一篇文章对OpenLayers的简单了解以后,现在让我们来实现一个简单的地图显示Demo。一、下载OpenLayers 打开OpenLayers官网:https://openlayers.org/ 然后点击Get the Code:‘ ...原创 2019-05-31 18:05:24 · 13791 阅读 · 17 评论 -
OpenLayers教程四:归属控件与全屏控件
目录一、归属控件二、全屏控件 经过上一篇文章的介绍,大家一定对OpenLayers的地图控件有一定了解了,现在接着介绍归属控件和全屏控件。一、归属控件 归属控件(ol.control.Attribution)用于展示地图资源的版权或者归属,它会默认加入到地图中,现在我们来看看归属控件。 拷贝一份first文件夹中的simple_map.html到contr...原创 2019-06-06 10:22:10 · 3771 阅读 · 3 评论 -
OpenLayers官方示例详解十八之街道标注(Street Labels)
一、示例简介 这个示例展示了设置placement:'line'的文本样式将沿路径渲染文本。二、代码详解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con原创 2019-01-04 15:18:56 · 2322 阅读 · 0 评论 -
OpenLayers官方示例详解十九之传送地图(Teleporting Maps)
目录一、示例简介二、代码详解一、示例简介 单击"Teleport"按钮,将地图从一个目标要素移动到另一个目标要素。二、代码详解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=&q原创 2019-01-04 15:33:56 · 951 阅读 · 0 评论 -
OpenLayers官方示例详解十四之可重用地图源(Reusable Source)
目录一、示例简介二、代码详解一、示例简介 这个示例展示如何更新地图中的瓦片。 可以调用source.setUrl()来更新瓦片地图源的URL,请注意,当更改瓦片地图源的URL时,在加载完新的瓦片之前,将不会替换现有的瓦片。 如果想要清除当前呈现的瓦片,则可以调用source.refresh()方法。二、代码详解<!DOCTYPE html&...原创 2018-12-25 17:41:54 · 1378 阅读 · 0 评论 -
OpenLayers官方示例详解十五之比例尺控件(Scale Line)
目录 一、示例简介二、代码详解一、示例简介 本示例展示了如何创建一个比例尺控件(ol.control.ScaleLine),同时让比例尺控件的单位根据用户的选择而改变。 OpenLayers中比例尺控件支持的单位有:metric —— 通用的,以千米为单位 us —— 美国单位 nautical —— 航海单位 im...原创 2018-12-25 18:02:40 · 5681 阅读 · 1 评论 -
OpenLayers官方示例详解十六之伪造点(Synthetic Points)
目录一、示例简介二、代码详解一、示例简介 本示例首先随机生成20000个点数据,并加入到地图中,然后实现了将离鼠标最近的点高亮显示的功能。二、代码详解<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam原创 2019-01-02 18:10:16 · 1856 阅读 · 0 评论 -
OpenLayers多源数据加载五:OpenLayers瓦片加载的原理
OpenLayers提供了两个类ol.Map类和ol.WebGLMap类来构建地图,ol.Map类使用canvas进行图像渲染,ol.WebGLMap类使用webgl进行图像渲染。 上图中列出了关于瓦片图层(ol.layer.Tile)加载相关的流程与方法(getTileRangeForExtentAndResolution()应该改为getTileRangeFor...转载 2019-01-09 11:43:31 · 3095 阅读 · 6 评论 -
OpenLayers多源数据加载六:各种瓦片地图加载的总结
目录一、TMS瓦片二、WMTS瓦片加载三、百度瓦片地图 四、腾讯瓦片地图一、TMS瓦片 先看看TMS瓦片的规则,瓦片坐标系原点(origin)在左下角,X轴从左至右递增,Y轴从下往上递增(先计算左下角,然后计算右上角)。 查看OpenLayers的API文档可以发现,瓦片坐标从左向右递增,从下向上递增: 因此,用OpenLayers来加载T...转载 2019-01-09 16:10:46 · 8437 阅读 · 5 评论 -
矢量切片(Vector Tile)
本文转载自:https://www.cnblogs.com/escage/p/6387529.html一、GIS数据与OGC标准地图服务 本节主要是介绍一些基础的数据概念以及基本的WebGIS地图服务,如对这些内容已经熟知,可直接跳过本节。 1)GIS中的矢量与栅格数据 熟悉GIS的人应该都知道,在GIS中的数据分类有很多种方式,其中最常用的一种是根据数据组织结构方...转载 2019-04-17 11:59:35 · 13962 阅读 · 10 评论 -
GeoServer官方教程:矢量切片
目录一、为什么使用矢量切片(vector tiles)?二、矢量切片格式三、安装GeoServer的矢量切片插件四、发布GeoWebCache中的矢量切片五、创建OpenLayers应用程序六、为矢量切片修改样式一、为什么使用矢量切片(vector tiles)? 矢量切片的优点是:数据在客户端渲染(例如,OpenLayers),而不是在服务端。这允许不同...翻译 2019-04-17 16:49:32 · 10088 阅读 · 4 评论 -
OpenLayers教程七:自己实现图层切换控件
OpenLayers并没有封装图层切换的控件,所以我们需要自己来实现图层控件。 自定义图层切换控件的原理很简单:显示某个图层时,将其他图层隐藏。 完整代码: layerSwitch.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UT...原创 2019-07-01 12:03:56 · 6995 阅读 · 4 评论 -
OpenLayers教程十一:多源数据加载之用最简单的方式加载瓦片地图
目录一、加载OpenStreetMap二、加载Stamen Map三、加载Bing Map OpenLayers封装了一些瓦片地图源类用于加载瓦片地图,这些类包括:ol.source.OSM —— 用于加载OpenStreetMap ol.source.Stamen —— 用于加载Stamen Map ol.source.BingMaps ...原创 2019-07-06 13:10:53 · 1934 阅读 · 0 评论 -
OpenLayers教程十二:多源数据加载之使用XYZ的方式加载瓦片地图
目录一、XYZ方式加载瓦片地图简介二、使用XYZ方式加载OpenStreetMap三、使用XYZ方式加载高德地图四、使用XYZ方式加载雅虎地图(Yahoo)一、XYZ方式加载瓦片地图简介 前面已经讲过瓦片地图使用金字塔结构组织瓦片,可以说这是一个三维的结构,使用XYZ这样的坐标来精确定位一张瓦片。即Z用于表示地图层级,XY表示某个层级内的平面,X为横坐标,Y为纵坐标,...原创 2019-07-07 12:09:10 · 9956 阅读 · 7 评论 -
WebGIS中的网络要素服务(WFS)
目录一、WFS简介二、WFS的种类与操作三、GetCapabilities(获取元数据)四、DescribeFeatureType(获取要素类的元数据)五、GetFeature(获取要素数据)六、Transaction(对要素数据增、删、改)一、WFS简介 OGC的WMS和WMTS规范都是有关空间数据显示的标准,而WFS(Web Feature Service...原创 2019-09-21 12:35:17 · 4730 阅读 · 0 评论 -
Linux(centos)中使用源码安装PostGIS
目录一、安装条件1.1、必须安装的软件或函数库1.2、可选的软件或函数库二、本次安装的软件三、安装PostGIS依赖的软件和函数库3.1、安装proj3.2、安装geos3.3、安装libxml23.4、安装json-c3.5、安装gdal3.6、安装SFCGAL四、安装PostGIS4.1、添加动态库路径4.2、编译并安装PostGIS...原创 2019-09-11 10:46:34 · 6649 阅读 · 2 评论 -
在Linux(centos)中使用源码安装pgRouting
目录一、解压pgRouting二、配置PostgreSQL的环境变量三、编译源代码四、测试 由于pgRouting依赖于PostGIS和PostgreSQL,所以阅读本文之前,务必请先阅读:Linux(centos)中使用源码安装PostgreSQL Linux(centos)中使用源码安装PostGIS 按照以上文章安装好PostgreSQL和PostGI...原创 2019-09-13 17:38:25 · 2203 阅读 · 1 评论 -
pgRouting官方教程三:安装pgRouting
目录一、在Windows中安装pgRouting二、在Linux中安装pgRouting 官方教程使用OSGeo Live这个软件集合,为了更贴近开发过程,我这里自己手动来安装pgRouting。 本文分别介绍pgRouting的在Windows中的安装于Linux(centos)中的安装。 推荐在Linux中安装pgRouting,因为生产环境中也大多是将p...翻译 2019-09-13 18:36:17 · 4180 阅读 · 2 评论 -
pgRouting官方教程四:准备数据
目录一、创建数据库二、获取实验数据三、将数据导入数据库3.1、使用PostGIS的数据导入工具导入数据3.2、使用osm2pgrouting导入数据 本文将介绍如何将实验数据导入数据库。 我这里使用pgAdmin4连接Linux中安装的pgRouting,当然,也可以使用pgAdmin连接安装在Windows中的pgRouting来学习本教程。...翻译 2019-09-15 11:23:28 · 2621 阅读 · 2 评论 -
OpenLayers教程:多源数据加载之WMTS
目录一、WMTS简介二、WMTS的接口2.1、GetCapabilities2.2、GetTile2.3、GetFeatureInfo三、加载ArcGIS产品发布的WMTS服务数据3.1、加载ArcGIS Online发布的WMTS服务数据3.2、加载ArcGIS Server发布的WMTS服务数据四、加载GeoServer发布的WMTS服务数据五、加载天...原创 2019-09-05 12:34:41 · 10849 阅读 · 0 评论 -
Cesium官方教程1:开始
本文转载自:https://www.jianshu.com/p/d89ff3e7c4dc 官方教程原文地址:https://cesium.com/docs/tutorials/getting-started/ 学会使用全球地形、影像、3DTiles(模型切片)、地理编码创建一个Cesium程序。 CesiumJS是一个基于javascript的Web端3D地...转载 2019-07-19 22:55:50 · 7247 阅读 · 0 评论 -
OpenLayers教程十六:多源数据加载之WMS(一)
目录一、WMS规范简介二、请求WMS服务的元数据二、请求WMS服务的地图图像四、请求WMS服务的地图要素信息一、WMS规范简介 在WebGIS中,有多种方法在网页浏览器中显示地图:瓦片地图 —— 事先将地图切割成瓦片,需要时再发送给客户端,瓦片可以存储在服务器或者本地 矢量地图 —— 将具有空间信息和属性信息的数据(比如GeoJSON、...原创 2019-07-17 11:47:13 · 2601 阅读 · 0 评论 -
OpenLayers教程十四:多源数据加载之离线瓦片地图
本文转载自:http://weilin.me/ol3-primer/ch05/05-04.html 其实离线瓦片地图和在线瓦片地图是一样的原理,都是瓦片。只是离线瓦片地图存储在本地,而且它的存取方式,可以由开发者自己来定义,而在线瓦片地图则不一定。在不理解原理的情况下,很多人拥有了离线瓦片,却不知道如何加载,所以这里单独来讲解。 示例的瓦片就只有一张。如果放大或者缩小,...转载 2019-07-12 12:42:10 · 2062 阅读 · 1 评论 -
使用GeoServer发布PostGIS中的数据
目录一、数据准备二、创建一个新的工作区三、创建一个数据存储四、创建一个图层五、预览图层一、数据准备 先下载数据nyc_buildings.zip: 链接:https://pan.baidu.com/s/1sLb_mjRe3VJWilK2NnAXSQ 提取码:luzg 在PostGIS中创建一个数据库nyc,并在该数据库中创建Pos...原创 2019-07-16 17:36:28 · 4350 阅读 · 5 评论 -
OpenLayers教程十七:多源数据加载之WMS(二)
目录一、单一图像WMS二、瓦片WMS一、单一图像WMS WMS可以作为图像图层来使用,即WMS只从服务器传送一张图像到客户端,这就是Single Image WMS(单一图像WMS)。 WMS也可以作为瓦片图层来使用,即WMS从服务器传送多张瓦片到客户端,这就是Tiled WMS(瓦片WMS)。 瓦片可以在客户端被缓存,所以相比单一图像WMS,瓦片WMS不...原创 2019-07-19 10:14:52 · 1544 阅读 · 0 评论 -
OpenLayers教程十八:多源数据加载之矢量切片
在看本篇文章之前,可以先看我翻译的这篇文章:https://zhuanlan.zhihu.com/p/62751184 矢量切片就是将矢量数据以金字塔的组织方式,切割成一个一个描述性文件,目前矢量切片主要有以下三种格式:GeoJSON TopoJSON MapBox Vector Tile(MVT) 上面的文章介绍了使用GeoServer来发布矢量切片。其实...原创 2019-07-20 14:32:56 · 1726 阅读 · 0 评论 -
OpenLayers教程:图形绘制之设置图形的样式
OpenLayers可以对整个矢量图层统一设置样式,也可以单独对某个要素设置样式,本文介绍对整个矢量图层设置样式。 OpenLayers的ol.style.Style类用于设置样式,它需要结合另外三个类ol.style.Image、ol.style.Stroke、ol.style.fill分别设置点或圆的样式、边界线的样式、填充样式,另外ol.style.Text类用于设置要素注...原创 2019-07-30 11:45:34 · 6284 阅读 · 0 评论 -
OpenLayers教程:图形绘制之编辑图形
除了能够交互式地绘制几何图形,OpenLayers还支持我们编辑已经绘制的几何图形。 ol.interaction.Modify类封装了编辑图形的功能,只要将它初始化作为交互控件加入Map对象,就可以对几何图形进行动态编辑。 来看示例: editGraphic.html:<!DOCTYPE html><html lang="en"...原创 2019-07-31 17:47:28 · 4344 阅读 · 2 评论 -
OpenLayers教程:图形绘制之绘制几何图形
OpenLayers的ol.interaction.Draw类实现了交互式绘制几何图形的功能,可以把它看作一个绘制图形的控件,使用合适的参数初始化它,并将它加入地图对象就可以进行交互式的图形绘制。 我们直接来看一个示例: drawShapes.html:<!DOCTYPE html><html lang="en"><head&...原创 2019-07-27 21:36:33 · 2370 阅读 · 1 评论 -
OpenLayers官方示例详解十七之伪造线(Synthetic Points)
一、示例简介 本示例展示了如何生成10000条呈螺纹式排列的线要素。 低比例尺下效果: 放大至高比例尺下的效果:二、代码详解:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=&原创 2019-01-03 15:38:13 · 760 阅读 · 0 评论