openlayers
jiegiser#
这个作者很懒,什么都没留下…
展开
-
WebGIS实战系列 三 项目的重新开始
说明离上次更新该系列文章已经快四个多月。这段时间工作上比较忙以及自己也换了份工作就没有更新过相关内容,最近在做一个管网系统,自己也写了一些小的demo,github地址:https://github.com/jiegiser/ol5_example(欢迎star),里面有一些用到的天地图的key跟bing地图的key需要大家自己去获取。最近我打算会陆陆续续的更新完这个系列的文章。将自己在项目上的...原创 2019-11-19 08:06:10 · 1233 阅读 · 12 评论 -
使用webpack3.x以及babel使浏览器支持es6语法
前言当前浏览器对于es6语法支持程度还不是很高,我们可以通过webpack打包工具以及babel等转换es6语法,来实现浏览器支持es6语法。我这里通过安装了lodash来测试是否转换成功。实现步骤首先我们通过npm init命令来初始化我们的工程。一路y就可以,会生成一个packe.json配置文件;输入下面的命令;npm init生成一个配置文件packe.json,内容如下...原创 2019-01-02 20:03:59 · 1110 阅读 · 0 评论 -
ASP.NET MVC+vue+axios与ASP.NET WebAPI+vue+axios技术栈实现网站开发
前言最近在公司任务比较小,闲来无事就研究了一下 ASP.NET MVC+vue+axios与ASP.NET WebAPI+vue+axios实现网站开发,因为公司一直在使用ASP.NET MVC做电子政务开发,很是麻烦;自己想着有机会重构电子政务系统(想想就行~~~)使得前后端分离。(其实也没写上什么内容主要写了怎么实现通过axios调用两种框架的方法)ASP.NET MVC+vue+axio...原创 2018-11-19 22:49:29 · 11130 阅读 · 11 评论 -
OpenLayers3基础教程之对地图的基本操作
1. 前言对地图的基本操作就是对地图的放大、缩小、移动、复位和更新等,通过使用OpenLayers 3 框架中操作地图视图(View)的相应方法。2. 实现思路 (1)新建一个网页,参照前面的文章加载OSM瓦片地图,通过视图设置地图的最大、最小缩放级别以及初试旋转角度,通过使用jQuery以及bootstrap来实现在缩放控件以及旋转控件鼠标悬停提示的效果。 (2)在地图原创 2018-01-17 23:22:49 · 1763 阅读 · 0 评论 -
OpenLayers3基础教程之加载常用控件
1. 前言地图控件就是对地图的缩放、全屏、坐标显示控件等,方便我们对地图进行操作。OpenLayers 3 封装了很多常用的地图控件,例如地图导航、比例尺、鹰眼、测量工具等,这些控件都是基于ol.control.Control虚基类进行封装,ol.control.Control的子类为各类常用的地图控件,可以通过Map对象的Control参数进行设置或者通过addControl方法将控件添加到原创 2018-01-17 11:30:52 · 4750 阅读 · 0 评论 -
OpenLayers3基础教程之实现地图显示功能
1.配置开发环境使用OpenLayers 3开发WebGIS应用,我们首先需要配置开发环境,首先我们需要在openlayers官网获取OpenLayers 3的开发库。下载链接:官网。打开后如图所示: 需要注意的是这里下载有两个版本,①:仅包括开发库(开发与调试的JS库以及CSS文件),②:包括开发库、开发库源码、示例、API等所有开发资源。在这里我下载了第一个版本,下载后原创 2018-01-15 20:13:22 · 6428 阅读 · 0 评论 -
OpenLayers3基础教程之测量功能
1. 前言测量功能实现面积的测量以及长度的测量。通过鼠标绘制区域以及长度来进行测量。OpenLayers 3 框架没有提供测量控件,但提供了相应的接口,需要需要基于几何对象的相应接口,结合图形绘制功能实现。2. 实现思路 (1)新建一个网页,引用 openlayers 3 开发库、jQuery 库与 bootstrap 库,并参照前面显示地图的文章,加载 OSM 瓦片图层。原创 2018-01-22 14:27:48 · 4747 阅读 · 2 评论 -
OpenLayers3基础教程之实现地图鹰眼以及地图比例尺的添加
1. 前言地图鹰眼就是地图的鸟瞰图,就是通常所说的小地图,我们可以通过鹰眼得到当前地图的显示位置,也可以在鹰眼上单击、拖动或移动到想要查看的位置,鹰眼的可见区域比我们所看的主视区的范围要大,鹰眼的中心框就是主视区的可视范围, Openlayers 3 封装的鹰眼控件为 ol.control.OverviewMap ,可以自定义其显示的样式。2. 实现思路 (1)新建一个网页,并原创 2018-01-21 20:26:57 · 3416 阅读 · 0 评论 -
OpenLayers3基础教程之鼠标移动显示坐标
1. 前言鼠标移动显示坐标,OpenLayers 3 框架提供了鼠标移动显示坐标的控件(ol.control.MousePosition),默认显示在地图的右上角,其样式可以自定义。在这个例子中,我们通过前面的加载 OSM 加载瓦片图层,实现在地图容器的左下角显示坐标点的信息。2. 实现思路 (1)新建一个网页,参考前面的加载 OSM 瓦片地图,实现加载瓦片地图。 (2)在地原创 2018-01-21 16:12:41 · 7251 阅读 · 0 评论 -
OpenLayers3基础教程之图层控件
1. 前言在实际应用中,我们将加载到地图容器中的图层通过图层显示的控件功能,来显示加载的图层,便于用户查看与操作,OpenLayers 3 中并没有提供类似的图层控件,但是他的 API 却提供了该功能的相关接口,我们可以通过调用相关的接口,实现该功能。2. 实现思路 (1)新建一个网页,参考前面的文章加载OSM瓦片图层的方法,加载OSM瓦片、MapQuest 影像、JSON 与原创 2018-01-21 13:00:31 · 2753 阅读 · 0 评论