Category: openlayers

openlayers3.x
openlayers4.x
openlayers5.x

OpenLayer之聚合标注和信息框弹出

聚合标注和信息框弹出,聚合图层的组成1、Vector的source,这里面主要放feature,这个source不是直接加载到Vector图层中的source for (var i = 0; i < dataSource.length; i++) n var coordi...

OpenLayers官方示例详解二:Drag-and-Drop Image Vector

目录nn nn一、示例概述nn二、代码详解nn2.1、创建DragAndDrop控件并添加到地图nn2.2、设置数据文件拖拉到浏览器后执行的操作nn2.3、样式函数nn2.4、显示新添加的要素的信息nn三、完整代码与测试nn四、总结nn一、示例概述nn    本示例实现了从文件夹中拖拉文件到浏览器从而加载地理数据的功能,地理数据是以图片的形式展示在浏览器。nn二、代码详解nn2.1、创建DragA…

[1]openlayers API之地图比例尺ScaleLine

[1]openlayers API之地图比例尺ScaleLine

参考书籍《WebGIS之OpenLayers全面解析》,研究OpenLayers的API,做一些exercise。n      地图比例尺表示地图上距离按一定比例比实际缩小的程度,表示为地图的缩小程度,又称为缩尺,这里用到的OpenLayers3封装的比例尺控件ol.control.ScaleLine。

web GIS地图打印

web GIS地图打印

最近做了个小的功能,关于web GIS的地图打印功能,最终页就是将信息生成pdf。rn整个流程如下:rn1、在上侧的工具栏中添加一个打印按钮,如下图rnrn2、单击打印按钮,弹出打印设置对话框,设置打印信息,标题,纸张大小,图标,rn比例尺这一项没有用上,使用的是当前的地图比例尺,其中纸张大小,图标使用的是自定义标签从数据库中读取出来rnrn3、点击OK按钮后打印对话框关闭,使用鼠标右键画框选定需…

ArcGIS学习(五)OpenLayers调用WMS服务

OpenLayers:rnrnOpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能。OpenLayers支持的地图来源包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的图片作为源,在这一方面OPenLayers提供了非常多的选择。

openlayers结合百度地图API加载搜索定位功能

openlayers结合百度地图API加载搜索定位功能

nnn//每次请求之前清空上一次搜索的图层 n searchPlaceLayer.getSource().clear()n $.ajax(n //url中的参数含义参见百度地图官网webAPI文档n url: ‘http://api.map.baidu.com/place/v2/search?query=大唐芙蓉园&region=西安市&p…

OpenLayers(Layer1)

添加4个图层,注意每个图层的属性设置:rnrnnnnn创建一个简单的电子地图nnnnnnnn var map; n var wms_base;n function init()n map=new OpenLayers.Map(‘map_element’,);n wms_base=new OpenLayers.Layer.WMS(n ‘Base Layer’,n ‘http://v

Openlayer图层载入时进行坐标系的转换

Openlayer图层载入时进行坐标系的转换

Openlayer地图和要添加的图层坐标系不一致的时候,需要进行转换,如下例所示:nnvar format = new ol.format.WKT();nvar feature;n$.each(data, function (i, link) n feature = format.readFeature(link.geom, n dataProjection: ‘EPSG:43

GIS程序开发-geoserver与OpenLayers配置入门

GIS程序开发-geoserver与OpenLayers配置入门

geoserver与OpenLayers配置入门rnrngeoserver与OpenLayers配置入门rn目录rn1    准备工作    4rn1.1    需要用到的程序和资料    4rn2    地图格式转换方式(一)    5rn3    地图格式转换方式(二)    5rn3.1    解压地图    5rn3.2    打开地图    5rn3.3

iconfont字体图标的使用

地图中使用图标的场景很多,之前一直都是将各图标放到一张大图里面,再使用css切图的方式读取,后来接触到iconfont,iconfont可以像字体一样使用css调整图标,简单好用功能强大!这里记录一下n1.注册登录阿里巴巴矢量图标库官网nhttp://www.iconfont.cn/nn2.新建项目n【图标管理】—>【我的项目】—>【新建项目】,创建自己的项目,保存和管理自己的图标

GIS-OpenLayer3探索:1 . 示例集合

Accessibility example(可访问的例子)n放大,缩小,鼠标移动地图nAnimation example(动画)n左右旋转180度n以罗马为中心每点击一次顺时针旋转90度n平行匀速移动地图到伦敦n弹到墨西哥n移动到伊斯坦布尔并且做弹动n旋转3圈后到罗马nTiled ArcGIS MapServer example(ArcGis 瓦片地图服务器示例)Attributions examp

OpenLayers源码学习(二) 加载城际通地图

OpenLayers源码学习(二) 加载城际通地图

背景:rnrn今天上班途中一直在回忆,我学习OpenLayers的过程。 rnrn记得几天前也就是3.31号的周末,整个人都要抓狂;已经学了一个多礼拜了但是依然不知道从哪里入手。rn昨天成功debug了地图移动触发事件的流程, 突然有种豁然开朗的感觉。rnrnrn流程:rnrn1.熟悉OpenLayers 基本的操作,载入地图加载控件.rn    了解 “比例尺”  “瓦片”  “墨卡托投影”

openlayers3应用(二):加载百度离线瓦片

openlayers3应用(二):加载百度离线瓦片

上一篇文章介绍了使用openlayers3加载百度在线地图,对某些项目或应用场景比如不允许上外网的单位,某些项目只针对一定区域地图加载应用,比如一个县的地图,可以采用下载百度瓦片地图,在服务器或者本机单独部署的方式进行。rn本篇主要讲述如何使用openlayers3调用下载的百度离线瓦片地图。瓦片地图下载器,网上有很多,在此不做详细描述。rnOpenlayers3加载离线百度瓦片地图,效果以及代码

OpenLayer加载离线百度地图实现及其问题

OpenLayer加载离线百度地图实现及其问题

OpenLayer加载离线百度地图实现及其问题rn1.离线地图使用切片为太乐地图下载器下载,下载格式为百度地图切片,下载方法可看我之前写的博客;rn2.使用百度API转换坐标后定位北客站准确,使用ol api转换地点偏移较大,猜测是由于百度地图切片还存在偏移算法问题,请大神指教;rn3.搭建虚拟地图服务路径之前博客已详细介绍;rn4.参考资料rnhttp://www.360doc.com/cont

openlayers第一天

openlayers第一天,加载高得地图nn废话少说,先上代码,以下代码中非js部分是从官网拷贝,官网也有诸多例子可供学习。nnnnn Accessible Mapn

二三维联动开源框架:ol3-cesium

二三维联动开源框架:ol3-cesium

OL3-Cesium是OpenLayers和Cesium的集成库,使用openlayers3创建自己的地图,同时使用Cesium实现在地球上的三维可视化。

Openlayers入门

Openlayers入门

最近在研究GIS相关的内容,因此接触了Openlayers这一开源JS框架。一开始感觉对不怎么会使用和调试JS的我来说,发现这个东西写出来的东西好难好难调试,又不会用JS调试器,只得慢慢的alert()。rn         经过一段时间的调试之后发现原来所谓的JS也并没有那么的难,仅仅使用简单的alert()就能完成调试,当然前提是对于Openlayers有一定的认识。个人推荐首先读懂网上的示例

openlayer学习总结

openlayer学习总结

最好的学习素材(http://openlayers.org/en/latest/examples/)n学习的主要点Map(View,Layer(Source(Feature(ol.geom.Point…))))n地图中主要的存在是图层Layer,这个Layer需要依赖于某个创建好的Map,图层中可以展示各种各样的点线面,对于这些点线面可以使用东西进行装饰他们,无论是点线还是面,都通通称呼为要素Fea

openlayer 测量

测量nnnn可以对地图进行操作,用户手动选择几个点,侧面积和测长度nn该getLength()和getArea()功能计算几何球形长度和面积。通过假设几何坐标之间的大圆段来计算长度。计算面积,就好像多边形的边是大圆段一样。nn请注意,geometry.getLength()和geometry.getArea()方法返回投影(平面)几何的度量。这些可能与某些情况下的实地测量非常不同 – 例如在使用W…

OpenLayers学习笔记(六)— 拖拽叠加层overlayer

OpenLayers学习笔记(六)— 拖拽叠加层overlayernnn是在官网例子基础上增加的拖拽功能nnGitHub:八至nn作者:狐狸家的鱼nn本文链接:拖拽叠加层overlayernnnnn全部代码nnnnn n Icon Symbolizer</title&g... </p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26108" class="group post-standard post-26108 post type-post status-publish format-standard hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/26108/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayers的使用" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/26108/" rel="bookmark">OpenLayers的使用</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>找个好工作,好难,回学校好好学习,明年实习吧!nnn  n         基本函数nnn1.    初始话一个MAP对象nnVarmap=new OpenLayers.Map(param1, param2 );参数一指示用于显示地图的HTML页面中元素的ID;参数二是一个JSON数据对象,包含一组键值对;nn2.    创建一个WMS的图层对象nnVarwms=new</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26104" class="group post-standard post-26104 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/26104/"> <img width="320" height="15" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20151014160030082-1.jpg" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" srcset="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20151014160030082-1.jpg 718w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20151014160030082-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_14 300w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/26104/" rel="bookmark">openlayer2.X通过WMTS服务加载ArcGIS服务</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>ArcGIS10.1开始的Server版本切片服务可以支持WMTS服务,服务切片后自动支持WMTS服务,那么如何在一些开源客户端中使用WMTS服务,例如openlayer;首先要说的是openlayer2.X版本和ol3版本略有不同。rn在使用之前首先要获取WMTS的描述文件,在切片后的server服务中通过如下方式获取rnrnrn获取后可以通过如下代码添加WMTS服务,需要之一的是对于地理200</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26101" class="group post-standard post-26101 post type-post status-publish format-standard hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/26101/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="修正WFS服务1.1.0版本的GetCapabilities信息解析问题" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/26101/" rel="bookmark">修正WFS服务1.1.0版本的GetCapabilities信息解析问题</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>修正WFS服务1.1.0版本的GetCapabilities信息解析不完正的问题:参考:http://trac.osgeo.org/openlayers/ticket/3285/**rn * @requires OpenLayers/Format/WFSCapabilities.</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26099" class="group post-standard post-26099 post type-post status-publish format-standard hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/26099/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="制作基本地图-ol3开发" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/26099/" rel="bookmark">制作基本地图-ol3开发</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>openlayers开发自己的理解</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26097" class="group post-standard post-26097 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/26097/"> <img width="320" height="172" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2019010315353248-1.png" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" srcset="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2019010315353248-1.png 1377w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2019010315353248-1.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_161 300w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2019010315353248-1.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_768,h_413 768w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2019010315353248-1.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_551 1024w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/26097/" rel="bookmark">OpenLayers官方示例详解十七之伪造线(Synthetic Points)</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>nn一、示例简介nn    本示例展示了如何生成10000条呈螺纹式排列的线要素。nn    低比例尺下效果:nnnn    放大至高比例尺下的效果:nnnn二、代码详解:nnn<!DOCTYPE html>n<html lang="en">n<head>n <meta charset="UTF-8">n <meta name=& </p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26080" class="group post-standard post-26080 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/26080/"> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/26080/" rel="bookmark">OpenLayer4实现卷帘效果</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>一、用途:卷帘效果在多个图层叠加的时候会用到。但是还想两个图层相互切换或者两个图层在一块,这个时候就用到卷帘效果,我们可以把这个卷帘做成一个label可以来回拖动,这样既可以达到控制效果,也很美观。nn先来张效果图:nnnn二、全部源码nnn<!DOCTYPE html>n<html>n<head>n <title>地图卷帘效果</tit... </p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26072" class="group post-standard post-26072 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/26072/"> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/26072/" rel="bookmark">在JAVA中添加openlayer3的js包制作地图,使用geoserver发布地图,将发布的地图连接到网页中</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>1 首先下载OpenLayers 3所需资料 rnOpenLayers 3的官网是http://openlayers.org/,若记不住,请保存到收藏夹。在官网首页上,即可看到相关的介绍,文档,API,以及Examples链接,这些资料都跟随最新的版本实时更新。</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26068" class="group post-standard post-26068 post type-post status-publish format-standard hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/26068/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="openlayers获取一个图形的中心区域" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/26068/" rel="bookmark">openlayers获取一个图形的中心区域</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>在项目中需要做到点击一个市下面的不同区县,然后定位到该区县的中心位置,已知每个区县的多边形边界,从opanlayers API上找到方法ol.extent.getCenter()貌似可以解决这个问题,具体代码如下所示:nvar extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[0]); //获取一个坐标…</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26039" class="group post-standard post-26039 post type-post status-publish format-standard hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/26039/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="openlayers4 – mousedown事件" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/26039/" rel="bookmark">openlayers4 – mousedown事件</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>openlayers4 鼠标按下事件</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26023" class="group post-standard post-26023 post type-post status-publish format-standard hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/26023/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayers3-9-Canvas Tiles" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/26023/" rel="bookmark">OpenLayers3-9-Canvas Tiles</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>使用html5 canvas来生成tile</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23410" class="group post-standard post-23410 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23410/"> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23410/" rel="bookmark">利用OpenLayers3在地图上显示标记并点击标记后显示弹出框</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>前言nn在上一篇《利用全能电子地图下载器+GeoWebCache发布Arcgis Server缓存瓦片过程全记录》中,我们利用GeoWebCache作为瓦片地图服务器发布了瓦片地图。虽然在其中可以直接浏览,但是在GeoWebCache1.10.0中,官方内置的是OpenLayers2的版本,这个版本比较老旧,不能很好的适应诸如触屏设备等应用环境。所以,我想利用OpenLayers2的升级版Open…</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23405" class="group post-standard post-23405 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23405/"> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23405/" rel="bookmark">OpenLayers3+OpenStreetMap初探</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>首先到http://www.openlayers.org/下载OpenLayers,我下的版本是v3.4n网上很多中文教程基本都是2的,3的比较少,只能慢慢摸索,而且我是个web、js小白。n最开始接触肯定要从它的quikstart开始,打开doc下的quickstart.html,下面是它给的事例,直接复制到html里就可以运行,.js是直接连到网站的</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23393" class="group post-standard post-23393 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23393/"> <img width="273" height="320" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2019012622483599-1.png" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" srcset="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2019012622483599-1.png 861w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2019012622483599-1.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_255,h_300 255w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2019012622483599-1.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_768,h_902 768w" sizes="(max-width: 273px) 100vw, 273px" loading="eager" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23393/" rel="bookmark">OpenLayers初体验0x1:使用Node创建OpenLayers应用</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>项目初始化nnnmkdir new-projectncd new-projectnnnpm initnnnpm install olnnpm install –save-dev parcel-bundlernnnnJS和HTMLnnn//index.jsnimport ‘ol/ol.css’;nimport Map ,View from ‘ol’;nimport TileLayer from…</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23384" class="group post-standard post-23384 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23384/"> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23384/" rel="bookmark">关于openlayers3多边形区域绘制以及地图/区域鼠标右键菜单功能</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>关于openlayers3多边形区域绘制以及地图/区域鼠标右键菜单功能</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23352" class="group post-standard post-23352 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23352/"> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23352/" rel="bookmark">如何在 OpenLayers 中调用中间件发布的WGS84卫星影像</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>一、概述rnrnrn《水经注地图发布服务中间件》发布的谷歌卫星影像瓦片数据支持在OpenLayers中调用,这里以“杭州市”谷歌卫星地图作为调用示例,旨在说明如何在OpenLayers中调用中间件发布的卫星影像。rnrnrnrnrn二、如何下载杭州市谷歌卫星地图rnrn在万能地图下载器中,选择地图类型为“谷歌地球”,数据类型为“卫星”地图,如下图所示。</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23348" class="group post-standard post-23348 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23348/"> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23348/" rel="bookmark">openlayers展示坐标点、连线并实时刷新</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>n//指定地图的位置n</p> <div id="map" class="map"></div> <p>nnnn<script type="text/javascript">nnn//声明点位信息所需变量nvar routeInfos = [];nvar routePopups = [];n//声明连线要展示的图层 (图层的添加顺序会用心覆盖效果)nvar vector_line..</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23338" class="group post-standard post-23338 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23338/"> <img width="320" height="137" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2-151023155H43L-1.png" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" srcset="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2-151023155H43L-1.png 743w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2-151023155H43L-1.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_128 300w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23338/" rel="bookmark">离线谷歌卫星地图加载服务中间件调用示例 For OpenLayers</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>1.说明rnrn水经注离线谷歌卫星地图加载服务中间件可利用离线地图的.dat文件在本地建立服务端,并生成影像、标签、高程等服务地址,可以在Openlayers中直接调用该服务地址,并将请求到的服务资源显示在前端,当请求的地图资源不存在可通过网络直接下载缺失的地图,并储存在.dat文件中。</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23333" class="group post-standard post-23333 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23333/"> <img width="320" height="139" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180815141008623-1.jpg" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" loading="eager" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23333/" rel="bookmark">【Openlayers】V5.0.2 单点追踪、实时监控、历史轨迹、地图绘制全代码实例</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>1.说明:nn该实例是可以用到地图的常用功能,对付一般和类似的业务场景都绰绰有余,在图层的选择上还是建议选择天地图的在线地地图,选择4326–84坐标系,地图上没有偏差。n 所有的功能都在一个demo下展示了,就涉及到功能的切换时定时器的关闭和开启,一般情况下,这些功能都是在单独的页面的,所有demo中的定时器的关闭和开启,有需要的朋友可以看看。n 下面的效果只是部分gif展示,因为上传不了很大…</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23290" class="group post-standard post-23290 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23290/"> <img width="320" height="280" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180509233954491-1.jpg" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" srcset="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180509233954491-1.jpg 928w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180509233954491-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_263 300w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180509233954491-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_768,h_673 768w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23290/" rel="bookmark">openlayer 4 点、线、面绘制与交互</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>openlayers 中很重要的是feature的理解,feature和source是获取地理要素的重要中间载体,主要构成方式如下图所示话不多说,直接看相关代码$.ajax(n type: “post”,n url: “$ctx/szdt/riskSource/getRiskInfoByIdAndType”,n dataTyp…</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23286" class="group post-standard post-23286 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23286/"> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23286/" rel="bookmark">openlayer 系列二(地图切换控件)</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>根据上一个文章,已经简单的会使用openlayer 了.n现在加入地图切换控件.切换卫星地图和矢量地图作为展示.目前有2种方案.方案一:首先我们把2个地图全部叠加map 上. a = new ol.layer.Tile(n title: ‘天地图普通’,n type: ‘base’,n visible: true,</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23283" class="group post-standard post-23283 post type-post status-publish format-standard hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23283/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="openlayers加载百度地图作为底图坐标偏移的解决办法" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23283/" rel="bookmark">openlayers加载百度地图作为底图坐标偏移的解决办法</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>openlayers加载天地图作为底图,在网上找了公开的服务资源,要做到百度地图与天地图之间切换,同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差,最初的代码是这样的:rnvar projection = ol.proj.get("EPSG:3857"); //加载百度地图采用3857坐标系rnvar resolutions</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23281" class="group post-standard post-23281 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23281/"> <img width="320" height="195" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20150526202755079-1.jpg" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" srcset="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20150526202755079-1.jpg 329w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20150526202755079-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_182 300w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23281/" rel="bookmark">openlayers之selectfeature</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>在本文叙述如何在openlayers中实现鼠标经过某一对象时,对象高亮;点击某一对象时,弹出该对象的信息。重点为OpenLayers.Layer.Vector和OpenLayers.Control.SelectFeature</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23278" class="group post-standard post-23278 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23278/"> <img width="320" height="205" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180817100307463-1.jpg" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" srcset="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180817100307463-1.jpg 917w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180817100307463-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_192 300w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180817100307463-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_768,h_492 768w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23278/" rel="bookmark">OpenLayers之标注功能二:图文标注</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>目录nn一、图文标注介绍nn二、使用加载矢量点要素实现标注nn三、使用叠置层实现标注nn一、图文标注介绍nn    图文标注,指同时使用文本和图片的标注,通过文本结合图标来展现标注点的信息,也是一种简单的地图标注。nn    一般情况下,文本用来描述标注点的关键词或主题信息(如名称等),小图标则作为标注点的位置标识,也包含一定的属性信息(如类型等)。nn    可以使用加载矢量点要素的方式实现,设…</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23272" class="group post-standard post-23272 post type-post status-publish format-standard hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23272/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayers学习笔记8——使用servlet从mysql获取数据并标注" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23272/" rel="bookmark">OpenLayers学习笔记8——使用servlet从mysql获取数据并标注</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>这两天在图书馆边看jsp边查边写代码,改完了老板交给的任务,也顺带实现了查询的效果,先来看下最终实现的效果图:nnn整个实现思路是:服务器端采用servlet+mysql模糊查询,servlet返回json数据,客户端解析json数据以表格形式显示并根据经纬度在地图上进行标注。n1、服务器端Servlet代码:npackage edu.whu.vge.servlet;nnimport j</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23267" class="group post-standard post-23267 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23267/"> <img width="320" height="242" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/4a831e4f-474c-36af-b2ae-37c4e5f12e81-1.png" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" srcset="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/4a831e4f-474c-36af-b2ae-37c4e5f12e81-1.png 696w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/4a831e4f-474c-36af-b2ae-37c4e5f12e81-1.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_227 300w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23267/" rel="bookmark">openlayers3应用(一):调用百度在线地图</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>rn    在项目中使用百度地图,最直接的方式是使用百度api,但是使用百度api需要申请key,并且某些功能调用有次数限制。rn本文讲述在openlayers3中使用百度地图的方法。调用百度地图,也是经过了几番周折rn贴上显示代码,以免其他人调用百度地图走弯路。效果如下:rn  代码如下:rn<!DOCTYPE html>rn<html xmlns="http://www.w3... </p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23264" class="group post-standard post-23264 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23264/"> <img width="320" height="320" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20170825085348473-1.jpg" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" srcset="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20170825085348473-1.jpg 683w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20170825085348473-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_150,h_150 150w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20170825085348473-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_300 300w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23264/" rel="bookmark">Openlayers3中如何优雅的表示等值面</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>等值面,顾名思义,就是值相等的面,在水文或气象中会有很多这样的需求。本文不讲如何做等值面,本文将如何展示等值面。</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23261" class="group post-standard post-23261 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23261/"> <img width="320" height="282" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20150423001148367-1.jpg" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" loading="eager" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23261/" rel="bookmark">OpenLayers 3 之 地图图层(Layers) 详解</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>如果不是专业的地图工作者,看到地图,可能觉得地图就是一张将三维世界映射到二维空间,很多信息混杂在一起表示空间信息的动态可交互图片,其实这只是表面现象。实际上地图是由一个或多个图层组成的,使用不同的图层存储不同类型的地物,比如由存储道路的图层,有展示拥堵情况的图层,通常还有一个含有基础地理信息(比如政区划分)的底图图层。</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23236" class="group post-standard post-23236 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/openlayers/23236/"> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/openlayers/" rel="category tag">openlayers</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/23236/" rel="bookmark">HT for Web整合OpenLayers实现GIS地图应用</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>nHT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点,该文介绍的结合的原理,其实还可推广到与ArcGIS、百度地图以及GoogleMap等众多GIS地图引擎融合的解决方案。</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <nav class="pagination group"> <ul class="group"> <li class="prev left"></li> <li class="next right"><a href="https://www.giserdqy.com/webgis/openlayers/page/2/" >下一页 »</a></li> </ul> </nav><!--/.pagination--> </div><!--/.pad--> </div><!--/.content--> <div class="sidebar s1 "> <a class="sidebar-toggle" title="Expand Sidebar"><i class="fa icon-sidebar-toggle"></i></a> <div class="sidebar-content"> <div id="media_image-37" class="widget widget_media_image"><h3 class="group"><span>公众号</span></h3><a href="https://www.giserdqy.com"><img width="300" height="110" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2021/05/eeacd7af47d053f25d1312ed14ae304c.png" class="image wp-image-37142 attachment-300x110 size-300x110" alt="" style="max-width: 100%; height: auto;" title="公众号" decoding="async" loading="eager" /></a></div><div id="text-12" class="widget widget_text"><h3 class="group"><span>微信群</span></h3> <div class="textwidget"><p>人数过多只能拉人进群;</p> <p>加我好友<strong>yu389741</strong></p> </div> </div><div id="media_image-41" class="widget widget_media_image"><h3 class="group"><span>微信小程序</span></h3><a href="https://www.giserdqy.com"><img width="860" height="860" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2023/05/a9dc3907a431f2e1922806305b5a8e73.jpg" class="image wp-image-40866 attachment-full size-full" alt="" style="max-width: 100%; height: auto;" decoding="async" loading="eager" /></a></div> </div><!--/.sidebar-content--> </div><!--/.sidebar--> </div><!--/.main-inner--> </div><!--/.main--> </div><!--/.container-inner--> </div><!--/.container--> <footer id="footer"> <img id="footer-logo" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2018/09/cropped-giserdqy.png" alt="GIS开发者"> <div class="container dark" id="footer-widgets"> <div class="container-inner"> <div class="pad group"> <div class="footer-widget-1 grid one-full last"> <div id="custom_html-27" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"> <div style="text-align:center;width:100%;height:30px;line-height:30px;"><a href="http://beian.miit.gov.cn/" target="_blank" rel="noopener">京ICP备 18040113号</a></div></div></div> </div> </div><!--/.pad--> </div><!--/.container-inner--> </div><!--/.container--> <div id="wrap-nav-footer" class="wrap-nav"> <div class="container-inner"> <nav id="nav-footer-nav" class="main-navigation nav-menu"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"> <span class="screen-reader-text">Expand Menu</span><div class="menu-toggle-icon"><span></span><span></span><span></span></div> </button> <div class="menu-%e5%ba%95%e9%83%a8%e9%93%be%e6%8e%a5-container"><ul id="nav-footer" class="menu"><li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><span class="menu-item-wrapper"><a href="https://blog.csdn.net/gisdoer">CSDN</a></span></li> <li id="menu-item-12036" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12036"><span class="menu-item-wrapper"><a href="http://www.pydeveloper.com">GeoAI</a></span></li> <li id="menu-item-11647" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11647"><span class="menu-item-wrapper"><a href="http://www.yulekong.cn">中国程序员</a></span></li> <li id="menu-item-985" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-985"><span class="menu-item-wrapper"><a href="http://www.cnblogs.com/dqygiser/">博客园</a></span></li> <li id="menu-item-3659" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3659"><span class="menu-item-wrapper"><a href="https://www.giserdqy.com/sitemap_index.xml">站点地图</a></span></li> <li id="menu-item-37139" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-37139"><span class="menu-item-wrapper"><a href="http://www.52geo.cn">吾爱地理</a></span></li> <li id="menu-item-37140" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-37140"><span class="menu-item-wrapper"><a href="http://www.nav.52geo.cn">地理导航</a></span></li> </ul></div> </nav> </div> </div> <div class="container" id="footer-bottom"> <div class="container-inner"> <a id="back-to-top" href="#"><i class="fas fa-angle-up"></i></a> <div class="pad group"> <div class="grid one-half"> <div id="copyright"> <p>GIS开发者 © 2024. All Rights Reserved.</p> </div><!--/#copyright--> <div id="credit"> <p>Powered by <a href="http://wordpress.org" rel="nofollow">WordPress</a>. Theme by <a href="http://alx.media" rel="nofollow">Alx</a>.</p> </div><!--/#credit--> </div> <div class="grid one-half last"> </div> </div><!--/.pad--> </div><!--/.container-inner--> </div><!--/.container--> </footer><!--/#footer--> </div><!--/#wrapper--> <script type="text/javascript" src="https://www.giserdqy.com/wp-content/themes/kontrast/js/jquery.fitvids.js?ver=6.5.5" id="kontrast-fitvids-js"></script> <script type="text/javascript" src="https://www.giserdqy.com/wp-content/themes/kontrast/js/scripts.js?ver=6.5.5" id="kontrast-scripts-js"></script> <script type="text/javascript" src="https://www.giserdqy.com/wp-content/themes/kontrast/js/nav.js?ver=1673022885" id="kontrast-nav-script-js"></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> </body> </html>