Category: 二次开发

openlayers

2019-04-03

openlayer 测量

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

openlayers

2019-04-03

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-26033" class="group post-standard post-26033 post type-post status-publish format-standard hentry category-leaflet tag-leaflet tag-leaflet-api-"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/leaflet/26033/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="Leaflet API 翻译(一)" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/leaflet/" rel="category tag">leaflet</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/leaflet/26033/" rel="bookmark">Leaflet API 翻译(一)</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>L.MaprnrnAPI各种类中的核心部分，用来在页面中创建地图并操纵地图。rnrnrnConstructor（构造器）rnrn通过div元素和带有地图选项的描述的文字对象来实例化一个地图对象，其中文字对象是可选的。rnrnOptions（选项）rnrnMap State Options（地图状态选项）rnrnrncentre（中心）：初始化地图的地理中心。rnrnzoom（缩放）：初始化地图的缩</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-26020" class="group post-standard post-26020 post type-post status-publish format-standard has-post-thumbnail hentry category-leaflet tag-leaflet tag-rleaflet-for-r-geojson"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/leaflet/26020/"> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/leaflet/" rel="category tag">leaflet</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/leaflet/26020/" rel="bookmark">R语言在线地图神器：Leaflet for R包（五） GeoJson文件的使用</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>七、使用GeoJson和TopoJson绘制地图： GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。——百度百科 因为json天然的ht…</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26010" class="group post-standard post-26010 post type-post status-publish format-standard has-post-thumbnail hentry category-leaflet tag-leaflet-0-demo tag-leaflet"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/leaflet/26010/"> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/leaflet/" rel="category tag">leaflet</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/leaflet/26010/" rel="bookmark">[leaflet] 0 相关网站|相关插件|相关DEMO</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>插件rnrnrnrnrn名称rn说明rn网站rnrnrnrnrn路径动画插件rn&amp;amp;nbsp;rnhttps://github.com/rubenspgcavalcante/leaflet-ant-pathrnrnrnrn</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26007" class="group post-standard post-26007 post type-post status-publish format-standard hentry category-leaflet tag-buggoogle-map tag-leaflet"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/leaflet/26007/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="Bug笔记：Google Map第一次缩放位置偏移" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/leaflet/" rel="category tag">leaflet</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/leaflet/26007/" rel="bookmark">Bug笔记：Google Map第一次缩放位置偏移</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>这是个让人蛋疼的bug，认真查看Google maps API文档的童鞋们一定不会碰到。rnrn我的同事为项目写了个针对map这块的jQuery plugin，然后在项目测试中发现，刚加载完页面时，直接点击map上toolbar的zoom in/out按钮或者用鼠标滚轮对地图进行放大缩小时，位置不知道偏到哪个黑暗的小角落去了。我看了丫代码半天，没发现啥问题，感觉问题是出在center的值不对，可是</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26005" class="group post-standard post-26005 post type-post status-publish format-standard has-post-thumbnail hentry category-leaflet tag-leaflet tag-leaflet-"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/leaflet/26005/"> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/leaflet/" rel="category tag">leaflet</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/leaflet/26005/" rel="bookmark">Leaflet 笔记一：简单入门</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>n n n Leaflet 笔记一：简单入门nnLeaflet可以说在我的博客当中应该出现了很多次，它首先是空间数据可视化的“佼佼者”，也是Mapbox.js的“父亲”。不同的是，Mapbox是个发展快速的商业公司，有些服务是需要看访问量收费的，而Leaflet是免费开源的组织，开放，开源，生态好，插件多。</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-26002" class="group post-standard post-26002 post type-post status-publish format-standard hentry category-leaflet tag-js-leaflet tag-leaflet"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/leaflet/26002/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="js插件 leaflet插件库" /> </a> </div><!--/.post-thumbnail--> <div class="post-content"> <div class="post-meta group"> <p class="post-category"><a href="https://www.giserdqy.com/secdev/leaflet/" rel="category tag">leaflet</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/leaflet/26002/" rel="bookmark">js插件 leaflet插件库</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>id=25nnnn推荐一个很强大的js插件库leaflet；里面包含了很多地图类插件；热图，轨迹，画图等等nn    nnnnnvar mymap = L.map(‘holder’, n     crs: L.CRS.Simple,n n     zoomSnap:0.5,n     dragging:</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-25986" class="group post-standard post-25986 post type-post status-publish format-standard has-post-thumbnail hentry category-leaflet tag-leaflet tag-rleaflet-for-r-"> <div class="post-inner post-hover"> <div class="post-thumbnail"> <a href="https://www.giserdqy.com/secdev/leaflet/25986/"> <img width="320" height="189" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20161016152508329-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/20161016152508329-1.jpg 846w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20161016152508329-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_177 300w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20161016152508329-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_768,h_454 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/leaflet/" rel="category tag">leaflet</a></p> <p class="post-date">2019-04-03</p> </div><!--/.post-meta--> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/leaflet/25986/" rel="bookmark">R语言在线地图神器：Leaflet for R包（三） 符号标记</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>标记的方法名和语法如下：addMarkers(leaflet地图,数据)表示把这个数据加载到地图里面，示例如下：df = data.frame(  latitude = runif(20,min=0,max=70),  …</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--> <article id="post-23227" class="group post-standard post-23227 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/23227/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayers官方示例详解十五之比例尺控件（Scale Line）" /> </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/23227/" rel="bookmark">OpenLayers官方示例详解十五之比例尺控件（Scale Line）</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>nn    OpenLayers中比例尺控件支持的单位有：nnmetric    ——    通用的，以千米为单位n us    ——    美国单位n nautical    ——    航海单位n im…</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23223" class="group post-standard post-23223 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/23223/"> <img width="320" height="240" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/005P3ii9ly1fthhc6dr53j30ii0dwtj3-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/005P3ii9ly1fthhc6dr53j30ii0dwtj3-1.jpg 666w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/005P3ii9ly1fthhc6dr53j30ii0dwtj3-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_225 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/23223/" rel="bookmark">使用Openlayers4.6.5实现热力图展示</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>三个月了马上，公司许诺的前端小伙伴还在路上……nn          前天领导告诉我，你来搞一下热力图吧，当时我说，您还是另请高明吧，我也实在不是谦虚，你说我一个Java程序员，搞得了前端的东西嘛？！但领导说了，公司已经决定了，就由你来搞！所以我就念了两句诗：苟利公司生死以，岂因BUG避趋之！nn         好了，既然接下来了，那就得做出来—老秦人可不喜欢饶舌， 更不喜欢听什…</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23205" class="group post-standard post-23205 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/23205/"> </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/23205/" rel="bookmark">OpenLayer中的StyleFunction函数的妙用</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>StyleFunction函数能够让我们做一些复杂逻辑的渲染，Feature和图层都会用到StyleFunction，但事实上Feature要素用到的是ol.FeatureStyleFunction，函数仅带有一个参数resolution，而图层StyleFunction，含有两个参数，feature和resolution两者是不一样，关于返回值，ol3要求返回一个样式数组，但是返回一个单个样式，…</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23202" class="group post-standard post-23202 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/23202/"> </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/23202/" rel="bookmark">OpenLayer学习之绘图与在线编辑</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>有时候找到真正想要的真的很难，凡事岂能两全，唉，你又能如何确定那个选择才是对的。开车开车，今天写的是将绘制几何图形和修改几何图形综合的一块。主要用到的是ol.interaction.Draw、ol.interaction.Select、ol.interaction.Modify三个交互。一、绘图函数封装function Draw() n var value = $(“…</p> </div><!--/.entry--> </div><!--/.post-content--> </div><!--/.post-inner--> </article><!--/.post--> <article id="post-23194" class="group post-standard post-23194 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/23194/"> </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/23194/" rel="bookmark">Openlayers3点的动画效果</a> </h2><!--/.post-title--> <div class="entry excerpt"> <p>n n n 一、效果预览nnnnnn星星坠落效果nn二、全部代码如下n<!DOCTYPE html>n<html>n<head>n<title>nn