Wechat: yu389741| Email: gisdqy@163.com

Shop:https://www.giserdqy.com/shop

分类: openlayers

openlayers3.x
openlayers4.x
openlayers5.x


openlayers6加载百度地图偏移问题解决


openlayers实现gps轨迹回放


openlayers添加gif动态图标,地图上添加动画图标,改变动态图标位置


在前两篇文章中讲到了echart在openlayers2中的应用,地图统计图与热力图的实现,在本文中介绍openlayers中结合echart实现航班的炫光特效展示。


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


基于已创建成功的电子地图,添加Control控件。n直接上源码:nnnnnn添加电子地图控件nnnnnnnhtml, body width: 100%; height: 100%; margin: 0; padding: 0; nnnnfunction init() nn//创建Control对象填充Controls数组n   var naviga


DrawPolyline draws a Polyline object with the symbol that must be specified before hand with the SetSymbol method. All draw methods must be enclosed between the calls to StartDrawing and FinishDrawing


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


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


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


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


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


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


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


The displayed tile coordinates are OpenLayers tile coordinates. These increase from bottom to top, but standard XYZ tiling scheme


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


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


在使用OpenLayers的ol.interaction.Translate功能的时候,遇到了以下问题:n当hitTolerance不为0时(默认为0),在数据量较大时,地图交互出现了明显的延迟和卡顿:nthis.select = new ol.interaction.Select(nn layers:[editableLayer],n);nMap.addInteraction


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


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


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


http://www.skype.com/go/getskype-fullrnhttp://download.skype.com/be0c8c03dcb1fcaf6e926306432b91b0/SkypeSetupFull.exe


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


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


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


let pan = getPan();npan.setActive(false);//false:当前地图不可拖动。true:可拖动nnfunction getFun() n let pan;n map.getInteractions().forEach(function(element, index, array) n if(element instanceof o…


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


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


OpenLayers学习笔记(六)— 拖拽叠加层overlayernnn是在官网例子基础上增加的拖拽功能nnGitHub:八至nn作者:狐狸家的鱼nn本文链接:拖拽叠加层overlayernnnnn全部代码nnnnn n Icon Symbolizer</title&g... </p> </div> </div> </div> </div> <div id="post-26108" class="clearfix postsloop dimasonrybox post-26108 post type-post status-publish format-standard hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/26108/" title="OpenLayers的使用" >OpenLayers的使用</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/26108/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <p>找个好工作,好难,回学校好好学习,明年实习吧!nnn  n         基本函数nnn1.    初始话一个MAP对象nnVarmap=new OpenLayers.Map(param1, param2 );参数一指示用于显示地图的HTML页面中元素的ID;参数二是一个JSON数据对象,包含一组键值对;nn2.    创建一个WMS的图层对象nnVarwms=new</p> </div> </div> </div> </div> <div id="post-26104" class="clearfix postsloop dimasonrybox post-26104 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/26104/" title="openlayer2.X通过WMTS服务加载ArcGIS服务" >openlayer2.X通过WMTS服务加载ArcGIS服务</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/26104/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/26104/" title="openlayer2.X通过WMTS服务加载ArcGIS服务" > <img width="718" height="34" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20151014160030082-1.jpg" class="aligncenter img-fluid wp-post-image" alt="" loading="lazy" 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: 718px) 100vw, 718px" /> </a> </div> <p>ArcGIS10.1开始的Server版本切片服务可以支持WMTS服务,服务切片后自动支持WMTS服务,那么如何在一些开源客户端中使用WMTS服务,例如openlayer;首先要说的是openlayer2.X版本和ol3版本略有不同。rn在使用之前首先要获取WMTS的描述文件,在切片后的server服务中通过如下方式获取rnrnrn获取后可以通过如下代码添加WMTS服务,需要之一的是对于地理200</p> </div> </div> </div> </div> <div id="post-26101" class="clearfix postsloop dimasonrybox post-26101 post type-post status-publish format-standard hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/26101/" title="修正WFS服务1.1.0版本的GetCapabilities信息解析问题" >修正WFS服务1.1.0版本的GetCapabilities信息解析问题</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/26101/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <p>修正WFS服务1.1.0版本的GetCapabilities信息解析不完正的问题:参考:http://trac.osgeo.org/openlayers/ticket/3285/**rn * @requires OpenLayers/Format/WFSCapabilities.</p> </div> </div> </div> </div> <div id="post-26099" class="clearfix postsloop dimasonrybox post-26099 post type-post status-publish format-standard hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/26099/" title="制作基本地图-ol3开发" >制作基本地图-ol3开发</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/26099/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <p>openlayers开发自己的理解</p> </div> </div> </div> </div> <div id="post-26097" class="clearfix postsloop dimasonrybox post-26097 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/26097/" title="OpenLayers官方示例详解十七之伪造线(Synthetic Points)" >OpenLayers官方示例详解十七之伪造线(Synthetic Points)</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/26097/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/26097/" title="OpenLayers官方示例详解十七之伪造线(Synthetic Points)" > <img width="836" height="450" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2019010315353248-1.png" class="aligncenter img-fluid wp-post-image" alt="" loading="lazy" 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: 836px) 100vw, 836px" /> </a> </div> <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> </div> </div> </div> <div id="post-26080" class="clearfix postsloop dimasonrybox post-26080 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/26080/" title="OpenLayer4实现卷帘效果" >OpenLayer4实现卷帘效果</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/26080/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/26080/" title="OpenLayer4实现卷帘效果" > </a> </div> <p>一、用途:卷帘效果在多个图层叠加的时候会用到。但是还想两个图层相互切换或者两个图层在一块,这个时候就用到卷帘效果,我们可以把这个卷帘做成一个label可以来回拖动,这样既可以达到控制效果,也很美观。nn先来张效果图:nnnn二、全部源码nnn<!DOCTYPE html>n<html>n<head>n <title>地图卷帘效果</tit... </p> </div> </div> </div> </div> <div id="post-26072" class="clearfix postsloop dimasonrybox post-26072 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/26072/" title="在JAVA中添加openlayer3的js包制作地图,使用geoserver发布地图,将发布的地图连接到网页中" >在JAVA中添加openlayer3的js包制作地图,使用geoserver发布地图,将发布的地图连接到网页中</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/26072/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/26072/" title="在JAVA中添加openlayer3的js包制作地图,使用geoserver发布地图,将发布的地图连接到网页中" > </a> </div> <p>1 首先下载OpenLayers 3所需资料 rnOpenLayers 3的官网是http://openlayers.org/,若记不住,请保存到收藏夹。在官网首页上,即可看到相关的介绍,文档,API,以及Examples链接,这些资料都跟随最新的版本实时更新。</p> </div> </div> </div> </div> <div id="post-26068" class="clearfix postsloop dimasonrybox post-26068 post type-post status-publish format-standard hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/26068/" title="openlayers获取一个图形的中心区域" >openlayers获取一个图形的中心区域</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/26068/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <p>在项目中需要做到点击一个市下面的不同区县,然后定位到该区县的中心位置,已知每个区县的多边形边界,从opanlayers API上找到方法ol.extent.getCenter()貌似可以解决这个问题,具体代码如下所示:nvar extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[0]); //获取一个坐标…</p> </div> </div> </div> </div> <div id="post-26039" class="clearfix postsloop dimasonrybox post-26039 post type-post status-publish format-standard hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/26039/" title="openlayers4 – mousedown事件" >openlayers4 – mousedown事件</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/26039/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <p>openlayers4 鼠标按下事件</p> </div> </div> </div> </div> <div id="post-26023" class="clearfix postsloop dimasonrybox post-26023 post type-post status-publish format-standard hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/26023/" title="OpenLayers3-9-Canvas Tiles" >OpenLayers3-9-Canvas Tiles</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/26023/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <p>使用html5 canvas来生成tile</p> </div> </div> </div> </div> <div id="post-23410" class="clearfix postsloop dimasonrybox post-23410 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23410/" title="利用OpenLayers3在地图上显示标记并点击标记后显示弹出框" >利用OpenLayers3在地图上显示标记并点击标记后显示弹出框</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23410/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23410/" title="利用OpenLayers3在地图上显示标记并点击标记后显示弹出框" > </a> </div> <p>前言nn在上一篇《利用全能电子地图下载器+GeoWebCache发布Arcgis Server缓存瓦片过程全记录》中,我们利用GeoWebCache作为瓦片地图服务器发布了瓦片地图。虽然在其中可以直接浏览,但是在GeoWebCache1.10.0中,官方内置的是OpenLayers2的版本,这个版本比较老旧,不能很好的适应诸如触屏设备等应用环境。所以,我想利用OpenLayers2的升级版Open…</p> </div> </div> </div> </div> <div id="post-23405" class="clearfix postsloop dimasonrybox post-23405 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23405/" title="OpenLayers3+OpenStreetMap初探" >OpenLayers3+OpenStreetMap初探</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23405/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23405/" title="OpenLayers3+OpenStreetMap初探" > </a> </div> <p>首先到http://www.openlayers.org/下载OpenLayers,我下的版本是v3.4n网上很多中文教程基本都是2的,3的比较少,只能慢慢摸索,而且我是个web、js小白。n最开始接触肯定要从它的quikstart开始,打开doc下的quickstart.html,下面是它给的事例,直接复制到html里就可以运行,.js是直接连到网站的</p> </div> </div> </div> </div> <div id="post-23393" class="clearfix postsloop dimasonrybox post-23393 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23393/" title="OpenLayers初体验0x1:使用Node创建OpenLayers应用" >OpenLayers初体验0x1:使用Node创建OpenLayers应用</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23393/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23393/" title="OpenLayers初体验0x1:使用Node创建OpenLayers应用" > <img width="383" height="450" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2019012622483599-1.png" class="aligncenter img-fluid wp-post-image" alt="" loading="lazy" 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: 383px) 100vw, 383px" /> </a> </div> <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> </div> </div> </div> <div id="post-23384" class="clearfix postsloop dimasonrybox post-23384 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23384/" title="关于openlayers3多边形区域绘制以及地图/区域鼠标右键菜单功能" >关于openlayers3多边形区域绘制以及地图/区域鼠标右键菜单功能</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23384/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23384/" title="关于openlayers3多边形区域绘制以及地图/区域鼠标右键菜单功能" > </a> </div> <p>关于openlayers3多边形区域绘制以及地图/区域鼠标右键菜单功能</p> </div> </div> </div> </div> <div id="post-23352" class="clearfix postsloop dimasonrybox post-23352 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23352/" title="如何在 OpenLayers 中调用中间件发布的WGS84卫星影像" >如何在 OpenLayers 中调用中间件发布的WGS84卫星影像</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23352/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23352/" title="如何在 OpenLayers 中调用中间件发布的WGS84卫星影像" > </a> </div> <p>一、概述rnrnrn《水经注地图发布服务中间件》发布的谷歌卫星影像瓦片数据支持在OpenLayers中调用,这里以“杭州市”谷歌卫星地图作为调用示例,旨在说明如何在OpenLayers中调用中间件发布的卫星影像。rnrnrnrnrn二、如何下载杭州市谷歌卫星地图rnrn在万能地图下载器中,选择地图类型为“谷歌地球”,数据类型为“卫星”地图,如下图所示。</p> </div> </div> </div> </div> <div id="post-23348" class="clearfix postsloop dimasonrybox post-23348 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23348/" title="openlayers展示坐标点、连线并实时刷新" >openlayers展示坐标点、连线并实时刷新</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23348/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23348/" title="openlayers展示坐标点、连线并实时刷新" > </a> </div> <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> </div> </div> </div> <div id="post-23338" class="clearfix postsloop dimasonrybox post-23338 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23338/" title="离线谷歌卫星地图加载服务中间件调用示例 For OpenLayers" >离线谷歌卫星地图加载服务中间件调用示例 For OpenLayers</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23338/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23338/" title="离线谷歌卫星地图加载服务中间件调用示例 For OpenLayers" > <img width="743" height="317" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/2-151023155H43L-1.png" class="aligncenter img-fluid wp-post-image" alt="" loading="lazy" 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: 743px) 100vw, 743px" /> </a> </div> <p>1.说明rnrn水经注离线谷歌卫星地图加载服务中间件可利用离线地图的.dat文件在本地建立服务端,并生成影像、标签、高程等服务地址,可以在Openlayers中直接调用该服务地址,并将请求到的服务资源显示在前端,当请求的地图资源不存在可通过网络直接下载缺失的地图,并储存在.dat文件中。</p> </div> </div> </div> </div> <div id="post-23333" class="clearfix postsloop dimasonrybox post-23333 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23333/" title="【Openlayers】V5.0.2 单点追踪、实时监控、历史轨迹、地图绘制全代码实例" >【Openlayers】V5.0.2 单点追踪、实时监控、历史轨迹、地图绘制全代码实例</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23333/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23333/" title="【Openlayers】V5.0.2 单点追踪、实时监控、历史轨迹、地图绘制全代码实例" > <img width="1036" height="450" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180815141008623-1.jpg" class="aligncenter img-fluid wp-post-image" alt="" loading="lazy" /> </a> </div> <p>1.说明:nn该实例是可以用到地图的常用功能,对付一般和类似的业务场景都绰绰有余,在图层的选择上还是建议选择天地图的在线地地图,选择4326–84坐标系,地图上没有偏差。n 所有的功能都在一个demo下展示了,就涉及到功能的切换时定时器的关闭和开启,一般情况下,这些功能都是在单独的页面的,所有demo中的定时器的关闭和开启,有需要的朋友可以看看。n 下面的效果只是部分gif展示,因为上传不了很大…</p> </div> </div> </div> </div> <div id="post-23290" class="clearfix postsloop dimasonrybox post-23290 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23290/" title="openlayer 4 点、线、面绘制与交互" >openlayer 4 点、线、面绘制与交互</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23290/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23290/" title="openlayer 4 点、线、面绘制与交互" > <img width="514" height="450" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180509233954491-1.jpg" class="aligncenter img-fluid wp-post-image" alt="" loading="lazy" 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: 514px) 100vw, 514px" /> </a> </div> <p>openlayers 中很重要的是feature的理解,feature和source是获取地理要素的重要中间载体,主要构成方式如下图所示话不多说,直接看相关代码$.ajax(n type: “post”,n url: “$ctx/szdt/riskSource/getRiskInfoByIdAndType”,n dataTyp…</p> </div> </div> </div> </div> <div id="post-23286" class="clearfix postsloop dimasonrybox post-23286 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23286/" title="openlayer 系列二(地图切换控件)" >openlayer 系列二(地图切换控件)</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23286/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23286/" title="openlayer 系列二(地图切换控件)" > </a> </div> <p>根据上一个文章,已经简单的会使用openlayer 了.n现在加入地图切换控件.切换卫星地图和矢量地图作为展示.目前有2种方案.方案一:首先我们把2个地图全部叠加map 上. a = new ol.layer.Tile(n title: ‘天地图普通’,n type: ‘base’,n visible: true,</p> </div> </div> </div> </div> <div id="post-23283" class="clearfix postsloop dimasonrybox post-23283 post type-post status-publish format-standard hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23283/" title="openlayers加载百度地图作为底图坐标偏移的解决办法" >openlayers加载百度地图作为底图坐标偏移的解决办法</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23283/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <p>openlayers加载天地图作为底图,在网上找了公开的服务资源,要做到百度地图与天地图之间切换,同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差,最初的代码是这样的:rnvar projection = ol.proj.get("EPSG:3857"); //加载百度地图采用3857坐标系rnvar resolutions</p> </div> </div> </div> </div> <div id="post-23281" class="clearfix postsloop dimasonrybox post-23281 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23281/" title="openlayers之selectfeature" >openlayers之selectfeature</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23281/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23281/" title="openlayers之selectfeature" > <img width="329" height="200" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20150526202755079-1.jpg" class="aligncenter img-fluid wp-post-image" alt="" loading="lazy" 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: 329px) 100vw, 329px" /> </a> </div> <p>在本文叙述如何在openlayers中实现鼠标经过某一对象时,对象高亮;点击某一对象时,弹出该对象的信息。重点为OpenLayers.Layer.Vector和OpenLayers.Control.SelectFeature</p> </div> </div> </div> </div> <div id="post-23278" class="clearfix postsloop dimasonrybox post-23278 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23278/" title="OpenLayers之标注功能二:图文标注" >OpenLayers之标注功能二:图文标注</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23278/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23278/" title="OpenLayers之标注功能二:图文标注" > <img width="702" height="450" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180817100307463-1.jpg" class="aligncenter img-fluid wp-post-image" alt="" loading="lazy" 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: 702px) 100vw, 702px" /> </a> </div> <p>目录nn一、图文标注介绍nn二、使用加载矢量点要素实现标注nn三、使用叠置层实现标注nn一、图文标注介绍nn    图文标注,指同时使用文本和图片的标注,通过文本结合图标来展现标注点的信息,也是一种简单的地图标注。nn    一般情况下,文本用来描述标注点的关键词或主题信息(如名称等),小图标则作为标注点的位置标识,也包含一定的属性信息(如类型等)。nn    可以使用加载矢量点要素的方式实现,设…</p> </div> </div> </div> </div> <div id="post-23272" class="clearfix postsloop dimasonrybox post-23272 post type-post status-publish format-standard hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23272/" title="OpenLayers学习笔记8——使用servlet从mysql获取数据并标注" >OpenLayers学习笔记8——使用servlet从mysql获取数据并标注</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23272/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <p>这两天在图书馆边看jsp边查边写代码,改完了老板交给的任务,也顺带实现了查询的效果,先来看下最终实现的效果图:nnn整个实现思路是:服务器端采用servlet+mysql模糊查询,servlet返回json数据,客户端解析json数据以表格形式显示并根据经纬度在地图上进行标注。n1、服务器端Servlet代码:npackage edu.whu.vge.servlet;nnimport j</p> </div> </div> </div> </div> <div id="post-23267" class="clearfix postsloop dimasonrybox post-23267 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23267/" title="openlayers3应用(一):调用百度在线地图" >openlayers3应用(一):调用百度在线地图</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23267/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23267/" title="openlayers3应用(一):调用百度在线地图" > <img width="595" height="450" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/4a831e4f-474c-36af-b2ae-37c4e5f12e81-1.png" class="aligncenter img-fluid wp-post-image" alt="" loading="lazy" 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: 595px) 100vw, 595px" /> </a> </div> <p>rn    在项目中使用百度地图,最直接的方式是使用百度api,但是使用百度api需要申请key,并且某些功能调用有次数限制。rn本文讲述在openlayers3中使用百度地图的方法。调用百度地图,也是经过了几番周折rn贴上显示代码,以免其他人调用百度地图走弯路。效果如下:rn  代码如下:rn<!DOCTYPE html>rn<html xmlns="http://www.w3... </p> </div> </div> </div> </div> <div id="post-23264" class="clearfix postsloop dimasonrybox post-23264 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23264/" title="Openlayers3中如何优雅的表示等值面" >Openlayers3中如何优雅的表示等值面</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23264/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23264/" title="Openlayers3中如何优雅的表示等值面" > <img width="448" height="450" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20170825085348473-1.jpg" class="aligncenter img-fluid wp-post-image" alt="" loading="lazy" 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: 448px) 100vw, 448px" /> </a> </div> <p>等值面,顾名思义,就是值相等的面,在水文或气象中会有很多这样的需求。本文不讲如何做等值面,本文将如何展示等值面。</p> </div> </div> </div> </div> <div id="post-23261" class="clearfix postsloop dimasonrybox post-23261 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23261/" title="OpenLayers 3 之 地图图层(Layers) 详解" >OpenLayers 3 之 地图图层(Layers) 详解</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23261/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23261/" title="OpenLayers 3 之 地图图层(Layers) 详解" > <img width="510" height="450" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20150423001148367-1.jpg" class="aligncenter img-fluid wp-post-image" alt="" loading="lazy" /> </a> </div> <p>如果不是专业的地图工作者,看到地图,可能觉得地图就是一张将三维世界映射到二维空间,很多信息混杂在一起表示空间信息的动态可交互图片,其实这只是表面现象。实际上地图是由一个或多个图层组成的,使用不同的图层存储不同类型的地物,比如由存储道路的图层,有展示拥堵情况的图层,通常还有一个含有基础地理信息(比如政区划分)的底图图层。</p> </div> </div> </div> </div> <div id="post-23236" class="clearfix postsloop dimasonrybox post-23236 post type-post status-publish format-standard has-post-thumbnail hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23236/" title="HT for Web整合OpenLayers实现GIS地图应用" >HT for Web整合OpenLayers实现GIS地图应用</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23236/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <div class="alignc pdt10 pdb10"> <a href="https://www.giserdqy.com/secdev/openlayers/23236/" title="HT for Web整合OpenLayers实现GIS地图应用" > </a> </div> <p>nHT for Web作为逻辑拓扑图形组件自身没有GIS功能,但可以与各种GIS引擎即其客户端组件进行融合,各取所长实现逻辑拓扑和物理拓扑的无缝融合,本章将具体介绍HT for Web与开发免费的OpenLayers地图结合应用的关键技术点,该文介绍的结合的原理,其实还可推广到与ArcGIS、百度地图以及GoogleMap等众多GIS地图引擎融合的解决方案。</p> </div> </div> </div> </div> <div id="post-23227" class="clearfix postsloop dimasonrybox post-23227 post type-post status-publish format-standard hentry category-openlayers tag-ol" itemscope itemtype="http://schema.org/CreativeWork"> <div class="content-first"> <div class="content-second"> <h3 class="the-title" itemprop="headline"><a class="entry-title" rel="bookmark" href="https://www.giserdqy.com/secdev/openlayers/23227/" title="OpenLayers官方示例详解十五之比例尺控件(Scale Line)" >OpenLayers官方示例详解十五之比例尺控件(Scale Line)</a></h3> </div> <div class="content-third" itemprop="text"> <span class="entry-meta"> <span class="vcard author" itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="fn"> <a class="url authorurl" rel="author" itemprop="url" href="https://www.giserdqy.com/author/dqy/" ><span itemprop="name">giser</span></a></span></span> <span class="categoryurl"><a href="https://www.giserdqy.com/category/secdev/openlayers/" rel="category tag">openlayers</a></span> <a href="https://www.giserdqy.com/secdev/openlayers/23227/" ><span class="post-date updated" itemprop="dateModified">2019-04-03</span></a> </span> <hr class="mrt5 mrb5" /> <div class="entry-content" > <p>nn    OpenLayers中比例尺控件支持的单位有:nnmetric    ——    通用的,以千米为单位n us    ——    美国单位n nautical    ——    航海单位n im…</p> </div> </div> </div> </div> </div> <div class="clearfix"></div> <nav class="navigation post-navigation dipostsnav" role="navigation"> <div class="nav-previous"><a href="https://www.giserdqy.com/category/secdev/openlayers/page/2/" >← Older Entries </a></div> <div class="nav-next"></div> </nav> <div class="clearfix"></div> </div> </div> <div class="col-md-4"> <div class="right-content" > </div> </div> </div> <!-- end header div 3 --> </div> <!-- end header div 2 --> </div> <!-- end header div 1 --> <div class="container-fluid footer-copyright pdt10 pdb10 clearfix"> <div class="container"> <div class="row mrt10"> <div class="col-md-4 cprtlft_ctmzr"> <p>Site Title, Some rights reserved.</p> </div> <div class="col-md-4 alignc-spsl cprtcntr_ctmzr"> <p><a href="http://beian.miit.gov.cn" target="_blank" rel="noopener">京ICP备 18040113</a></p> </div> <div class="col-md-4 alignr-spsl cprtright_ctmzr"> <p>WordPress <a target="_blank" href="https://dithemes.com/di-business-free-wordpress-theme/"><span class="fa fa-thumbs-o-up"></span> Di Business</a> Theme</p> </div> </div> </div> </div> <a id="back-to-top" href="#"><span class="fa fa-chevron-up"></span></a> <p class="woocommerce-store-notice demo_store" data-notice-id="1d619d007bab362903e8f86539d10e3c" style="display:none;">商店上线了!!! <a href="#" class="woocommerce-store-notice__dismiss-link">忽略</a></p> <script type="text/javascript"> (function () { var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; })(); </script> <script type='text/javascript' src='https://www.giserdqy.com/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js?ver=2.70' id='jquery-blockui-js'></script> <script type='text/javascript' id='wc-add-to-cart-js-extra'> /* <![CDATA[ */ var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"\u67e5\u770b\u8d2d\u7269\u8f66","cart_url":"https:\/\/www.giserdqy.com\/cart\/","is_cart":"","cart_redirect_after_add":"no"}; /* ]]> */ </script> <script type='text/javascript' src='https://www.giserdqy.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=5.1.0' id='wc-add-to-cart-js'></script> <script type='text/javascript' src='https://www.giserdqy.com/wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js?ver=2.1.4' id='js-cookie-js'></script> <script type='text/javascript' id='woocommerce-js-extra'> /* <![CDATA[ */ var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%"}; /* ]]> */ </script> <script type='text/javascript' src='https://www.giserdqy.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=5.1.0' id='woocommerce-js'></script> <script type='text/javascript' id='wc-cart-fragments-js-extra'> /* <![CDATA[ */ var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","cart_hash_key":"wc_cart_hash_6281e0abf30986a1c04ca738f3749ba9","fragment_name":"wc_fragments_6281e0abf30986a1c04ca738f3749ba9","request_timeout":"5000"}; /* ]]> */ </script> <script type='text/javascript' src='https://www.giserdqy.com/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=5.1.0' id='wc-cart-fragments-js'></script> <script type='text/javascript' src='https://www.giserdqy.com/wp-content/themes/di-business/assets/js/bootstrap.js?ver=4.0.0' id='bootstrap-js'></script> <script type='text/javascript' src='https://www.giserdqy.com/wp-content/themes/di-business/assets/js/script.js?ver=1.4.3' id='di-business-script-js'></script> <script type='text/javascript' src='https://www.giserdqy.com/wp-content/themes/di-business/assets/js/backtotop.js?ver=1.4.3' id='di-business-backtotop-js'></script> <script type='text/javascript' src='https://www.giserdqy.com/wp-content/themes/di-business/assets/js/sidebarmenu.js?ver=1.4.3' id='di-business-sidebarmenu-js'></script> <script type='text/javascript' src='https://www.giserdqy.com/wp-content/themes/di-business/assets/js/scpsearch.js?ver=1.4.3' id='di-business-csp-search-js'></script> <script type='text/javascript' src='https://www.giserdqy.com/wp-content/themes/di-business/assets/js/nav-menu.js?ver=1.4.3' id='di-business-nav-menu-js'></script> <script type='text/javascript' src='https://www.giserdqy.com/wp-includes/js/wp-embed.min.js?ver=5.7.1' id='wp-embed-js'></script> </body> </html>