openlayers - 第4页共21页

2019-04-03

openlayers发布离线地图

rn 最近的一个项目需要在局域网内做到地图效果，在网上搜素以后，决定使用openlayers加离线瓦片地图来做。rn 下面代码是摸索了几天以后做出的例子，当然因为了解不深，只是简单做了一个效果，没用到太多的组件和方法，还希望精通的大神不要笑话。rn 代码：rn rn

openlayers

2019-04-03

OpenLayers 3 之使用 AJAX 通信

地图应用是大流量应用，如果频繁刷新页面，造成的数据传输也必然是很大的，这在你的网络不是很好的时候，你就醉了，这时候便是 AJAX 显现优势的时候了。这里我们把 AJAX 应用在地图搜索中，下面看看怎么做到的吧！

openlayers

2019-04-03

OpenLayers设置地图缩放最小范围和最大范围

rnOpenLayers设置地图缩放最小范围和最大范围rnfunction init()n n var options=n n projection: “EPSG:4326”, n eventListeners: n n “moveend”: mapEvent,n “zoomend”: mapEventn ,n contro

openlayers

2019-04-03

openlayer2屏蔽双击放大事件

openlayer2屏蔽双击放大事件nn环境为 open layer 3.1.3.1nn代码如下nnnn n n

openlayers

2019-04-03

Openlayers4动态绘制地图分幅网络

在Openlayers地图上根据地图分幅规则，绘制分幅网格，需要注意的有几点：1确认什么比例尺时展示什么1:100万、1:50万…比例尺的分幅2根据地图当前视窗位置，动态绘制注记和网络，因为全部绘制的话，网格和注意太多，严重影像运行速度3绘制经线和纬线，不绘制网格，网格严重内存更多代码如下： addSheetNumber(number)n getLayerByName

openlayers

2019-04-03

openlayers中叠加图片bounds计算小工具

n不知道大家有没有遇到在OpenlayersG地图中叠加图片显示的情况，这里发布一个我用来计算图片bounds的工具代码：转载请注明出处：tedeum.iteye.comrnrnrnrn

openlayers

2019-04-03

Openlayers APIDOC下载地址

做开发时，很多人刚刚接触Openlayers，不知道在哪下载API、API DOC、Example。下面列举一下地址最新版API、说明文档、Example下载地址：https://openlayers.org/download/历史版本下载地址：https://github.com/openlayers/openlayers/releases/…

openlayers

2019-04-03

OpenLayers地图打印输出

最近遇到了在Openlayers上开发地图打印的功能，官网给了两个全图打印的demo。其核心思想是将canvas里的像素提取出来。

openlayers

2019-04-03

openlayers3添加地图控件

//添加属性控件rnmap.addControl(new ol.control.Attribution());rn//添加鼠标定位控件rnmap.addControl(new ol.control.MousePosition(rn undefinedHTML: ‘outside’,rn projection: ‘EPSG:4326’, rn coordinateFormat:

openlayers

2019-04-03

openlayers3 气泡框展示鼠标点击坐标

根据这篇文章改写而来，主要实现了在地图上点击弹出气泡框，用来展示经纬度，当然你也可以改成展示其他内容。rn n n n n n nOpenLayers MapQuest Demo n n n html, body, #map n padding:0; n margin:0; n

openlayers

2019-04-03

openlayer 移除map.on(click,地图点击事件

在openlayer API里找了好久也没找到，最后问老同学才解决这个问题，今天记录下来nnnkey = map.on(‘click’, function (e) n…n.bind(this));nn//移除clicknnnol.Observable.unByKey(key);…

openlayers

2019-04-03

openlayers官方教程（十）Vector Data——Making it look nice

Making it look nice前面已经完成了基础的功能，包括导入、编辑、导出。但是没有做一下美化，当你创建了一个矢量图层，会默认很多样式。编辑过程中的交互也是默认的样式，你可能注意到在编辑过程中线条很粗，这个可以通过向矢量图层和交互提供style来控制这些属性。Static style如果我们给所有要素集定义通用的样式，可以如下配置：const layer = new VectorLaye…

openlayers

2019-04-03

划线、标线、贴线、删线竟然如此简单 -来自openlayers

如果你自己写过在地图上划线、标记、自动贴合、删除适量线条等这些功能，那么你就会喜欢上下面来自openlayers官方的代码：nnnnn n topolis integrationn

openlayers

2019-04-03

openlayers3实现要素在地图上点选、多选、框选等功能

nnn n Ol3 selectn

openlayers

2019-04-03

Openlayers学习笔记——Vector Layer 事件类型

Vector类是继承了OpenLayers.Layer的，Layer的所有事件类型都能在Vector中被使用。rn 一、事件类型的注册rn vector_layer.event.register(type,obj,listener);rn vector_layer是矢量图层的名字，上面的代码能够将事件注册到事件类型中去，除了Layer的事件类型外，矢量图层还支持以下事件…

openlayers

2019-04-03

openlayers3 禁止启用鼠标拖动地图

//通过禁止和解除拖动解决 gis 使用： pan.setActive(true) –开启拖动 pan.setActive(false) –关闭拖动 rnrnrn启用拖动方法rnrn var pan; rn function onMove()rn map.getInteractions().forEach(function(elem

openlayers

2019-04-03

OpenLayers3加载离线百度地图(百度迁徙底图)

关于openlayers加载离线百度地图的东东好几年前就做过了，不过当时做的是2.0版本的。rnrnrn自从好久没有去做可视化分析之后，也很少接触这些前端的JS的东西了。最近想实现一个东西的时候，才想起需要用到一些比较干净的底图。rnrnrn于是刚好选用了百度迁徙后面的底图。rnrnrn由于百度的JS包东西太多，需要的东西太复杂，于是就选用openlayers来进行测试。果然还是非常流畅。rnrn

openlayers

2019-04-03

OpenLayer点击动态图标弹出提示框实例

本人变向解决由于Openlayers不支持gif和swf格式图片要素问题。rn希望给需要的朋友提供参考。

openlayers

2019-04-03

openlayer 加载wfs 2种方式

1.geojsonrn var geo = new OpenLayers.Layer.Vector(“EarthQuake”, n strategies: [new OpenLayers.Strategy.Fixed()],n protocol: new OpenLayers.Protocol.HTTP(n url: ‘http://172.31.170.98:

openlayers

2019-04-03

百度地图和openlayers融合封装（一）

目前一切顺利，两种不同的地图，要实现相同的效果，只需要配置地图类别为baidu或者openlayers，其他的代码完全一样。遇到的问题： layer层在添加feature的时候，如果map层已经给layer层添加过交互事件了，那么这个新的fea…

openlayers

2019-04-03

Openlayers3 API中的几处坐标系，分别代表的含义总结

在openlayer中引入切片，添加各种服务，视角的定义等情况下都有对projection的属性进行设置，有的是默认值，有的需要自定义，但是他们与请求的服务之间或多或少存在着千丝万缕的联系。或者互不影响。本人在实践过程中，对经常出现的几个projection的理解进行了总结，直接看代码：nnnn n dzj geoS…</p> </div> </div> </div> </article> <article id="post-22602" class="group post-standard post-22602 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/22602/"> <img width="320" height="198" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20160203173635646-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/20160203173635646-1.jpg 795w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20160203173635646-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_185 300w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20160203173635646-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_768,h_474 768w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22602/" rel="bookmark">解决openlayers调用mapserver发布的地图出现乱图问题</a> </h2> <div class="entry excerpt"> <p>使用mapserver发布了地图服务，使用openlayers调用时出现了乱图问题，如下图：rnrnrnmapserver中的 mapfile文件中的部分内容如下：rnrnrnrnopenlayers 中调用的部分代码如下：rnrnrnrnrn经过反复排查后终于找到了原因：rnopenlayers中有专门调用mapserver发布的服务的类 OpenLayers.Layer.MapServerrn</p> </div> </div> </div> </article> <article id="post-22599" class="group post-standard post-22599 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/22599/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayers 3实践与原理探究4.3-ol3源码分析-Source,Layer" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22599/" rel="bookmark">OpenLayers 3实践与原理探究4.3-ol3源码分析-Source,Layer</a> </h2> <div class="entry excerpt"> <p>3.Sourceol/ol/Source文件夹下 3.1构造函数3.1.1 ol.source.Source ol.source的基础类ol/ol/Source/source.jsol.source.Source = function(options) 3.1.2 ol.source.OSMol/ol/Source/osmsource.js nopenStreetMap：ol.source.OS</p> </div> </div> </div> </article> <article id="post-22597" class="group post-standard post-22597 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/22597/"> <img width="248" height="320" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180412094407904-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/20180412094407904-1.jpg 396w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180412094407904-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_232,h_300 232w" sizes="(max-width: 248px) 100vw, 248px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22597/" rel="bookmark">【openlayers】ol3地图组成部分</a> </h2> <div class="entry excerpt"> <p>地图组成部分nnnnnnnmapnViewnlayersnsourcencontrolninteractionnnnnnmapnn地图(Map)：对应的类是ol.Map。所有的地图操作，不论是视图还是交互都要基于它来实现。nnnnViewnn视图(View)：对应的类是ol.View，之前已有接触，控制地图显示的中心位置，范围，层级等。nnnnlayersnn图层(Layers)：Ol3有多种多样…</p> </div> </div> </div> </article> <article id="post-22594" class="group post-standard post-22594 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/22594/"> <img width="320" height="181" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180529222548922-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/20180529222548922-1.jpg 635w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180529222548922-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_170 300w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22594/" rel="bookmark">openlayers官方教程（十一）Vector Tiles——The VectorTile layer</a> </h2> <div class="entry excerpt"> <p>The VectorTile layer我们已经知道如何载入瓦片图片，并且能够用不同的方法载入渲染矢量地图。但是我们如何能够用传输到浏览器更快的瓦片的同时，能够样式化数据？这就是矢量瓦片的作用，openLayer通过vectorTile层来支持矢量瓦片。A world map rendered from vector data同样需要在index.html中定义基础的东西：<!DOCTYPE... </p> </div> </div> </div> </article> <article id="post-22589" class="group post-standard post-22589 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/22589/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="openlayers 5.3.0实现标注事件点动画" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22589/" rel="bookmark">openlayers 5.3.0实现标注事件点动画</a> </h2> <div class="entry excerpt"> <p>n<html lang="en">n <head>n <meta charset="utf8">n <link rel="stylesheet" href="./css/ol.css" type="text/css">n </p> <style>n</p> </div> </div> </div> </article> <article id="post-22591" class="group post-standard post-22591 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/22591/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="openlayer 高亮显示样式" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22591/" rel="bookmark">openlayer 高亮显示样式</a> </h2> <div class="entry excerpt"> <p>var v_style = new OpenLayers.StyleMap(n ‘default’: new OpenLayers.Style(n graphicWidth : 60, n graphicHeight: 25, n graphicTitle:”dddd”,n n n fillColor: “#ee9900”,n</p> </div> </div> </div> </article> <article id="post-22585" class="group post-standard post-22585 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/22585/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayer之覆盖物" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22585/" rel="bookmark">OpenLayer之覆盖物</a> </h2> <div class="entry excerpt"> <p>Overlay 从名字看，是覆盖图、覆盖物的意思，主要的用途就是在地图之上再覆盖一层，用以显示额外的可见元素，可见元素一般是 HTML 元素，利用 overlay，可以将可见元素放置到地图的任意位置，形成地图上再浮动一层的效果。例如在地图上相应的坐标放置一个标志，标签，利用 overlay 都可以做到，具体来说，点击地图上某位置，在点击位置弹出弹出框就是利用了 overlay。rnrn</p> </div> </div> </div> </article> <article id="post-22587" class="group post-standard post-22587 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/22587/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayers 2.13中旋转文字标注" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22587/" rel="bookmark">OpenLayers 2.13中旋转文字标注</a> </h2> <div class="entry excerpt"> <p>在OpenLayers 2系列的源码中，文字标注是不能选择的，永远平行于屏幕，那是不是没有办法了。其实很简单，在源码中加几句旋转的代码即可，如下：nn在Openlayers.js中搜索：drawText: function(featureId, style, location) 函数 n然后找到下面的位置，添加加粗的部分。</p> </div> </div> </div> </article> <article id="post-22583" class="group post-standard post-22583 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/22583/"> <img width="320" height="175" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180926165734486-1.jpg" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22583/" rel="bookmark">如何用css3做openLayers3的闪烁效果</a> </h2> <div class="entry excerpt"> <p>最近在做地图上的一个故障指示器，要求有故障时，此指示器会呈现不同的展现样式，用闪烁最好了！nn但openLayers3中没有闪烁的效果，所以就借助CSS3的动画效果了，反正openLayers3也是使用了h5+css的，它们通用。nn最终的效果是：nnnn第一步：nn在你的地图HTML文件中加一个div:nnnn</p> <div id="css_a... </div> </div> </div> </article> <article id="post-22578" class="group post-standard post-22578 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/22578/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayers3的轨迹回放" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22578/" rel="bookmark">OpenLayers3的轨迹回放</a> </h2> <div class="entry excerpt"> <p>OpenLayers3实现轨迹回放需要动画操作，官网上的例子用的是postcompose，但是还可以使用javascript中setInterval和setTime.rn我的例子是按官网上来的http://openlayers.org/en/latest/examples/feature-move-animation.html?q=animrn增加了过程中能够调整速度和停止的功能。nnnnInse</p> </div> </div> </div> </article> <article id="post-22580" class="group post-standard post-22580 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/22580/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayers学习笔记—-二.获取点击位置的经纬度" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22580/" rel="bookmark">OpenLayers学习笔记—-二.获取点击位置的经纬度</a> </h2> <div class="entry excerpt"> <p>获取点击位置的经纬度<!DOCTYPE html>n<html xmlns="http://www.w3.org/1999/xhtml">n<head>n<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>n <link href=&q </div> </div> </div> </article> <article id="post-22574" class="group post-standard post-22574 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/22574/"> <img width="162" height="320" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/1351003187_6231-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/1351003187_6231-1.png 257w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/1351003187_6231-1.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_152,h_300 152w" sizes="(max-width: 162px) 100vw, 162px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22574/" rel="bookmark">OpenLayers系列(1)——入门示例</a> </h2> <div class="entry excerpt"> <p>工具简介 rn OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。除此之外，OpenLa</p> </div> </div> </div> </article> <article id="post-22571" class="group post-standard post-22571 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/22571/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayers的比例尺和分辨率之间的关系" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22571/" rel="bookmark">OpenLayers的比例尺和分辨率之间的关系</a> </h2> <div class="entry excerpt"> <p>1、Scale：rn比例尺，图上距离和实地距离之比。也就是屏幕上你看到的一厘米与这一厘米所代表的实地距离的比值。rn2、Resolution：rn分辨率，每个像素代表的实地距离（map units per pixels）。rn3、已知地图分辨率和图片分辨率计算比例尺：rn在已知分辨率和dpi的情况下计算比例尺：假设图片的分辨率为72dpi（dpi和ppi还是有区别的，dpi对应的是输出分辨率，从字</p> </div> </div> </div> </article> <article id="post-22567" class="group post-standard post-22567 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/22567/"> <img width="320" height="189" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20170824092547653-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/20170824092547653-1.jpg 1135w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20170824092547653-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/20170824092547653-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_768,h_453 768w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20170824092547653-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_604 1024w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22567/" rel="bookmark">煤矿井下精确人员定位系统—Openlayers简单构建与批量构建后端数据为GeoJSON</a> </h2> <div class="entry excerpt"> <p>本博文是对煤矿井下精确人员定位系统的最后一次技术总结了。首先我们先来回顾下之前的两篇博文。n1、煤矿井下精确人员定位系统—后端响应结果的包装Response(meta, data)n该博文主要针对项目响应结果统一结构进行了分析，包装，最终得出了Response(meta(code, message), data)的结构。n2、煤矿井下精确人员定位系统—通过Vue.js构建数据缓存区n该博文</p> </div> </div> </div> </article> <article id="post-22564" class="group post-standard post-22564 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/22564/"> <img width="320" height="216" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20170929205218568-1.jpg" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22564/" rel="bookmark">openlayers4中闪烁点的实现</a> </h2> <div class="entry excerpt"> <p>本文讲述如何在Openlayers4中实现闪烁点。</p> </div> </div> </div> </article> <article id="post-22561" class="group post-standard post-22561 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/22561/"> <img width="320" height="190" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20141120142250324-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/20141120142250324-1.jpg 1680w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20141120142250324-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_179 300w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20141120142250324-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_768,h_457 768w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20141120142250324-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_610 1024w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22561/" rel="bookmark">OpenLayers3 学习心得（四）——空间查询</a> </h2> <div class="entry excerpt"> <p>空间查询是GIS的一个重要的功能，根据空间查询可进行专题图分析、统计分析、缓冲区分析以及周边查询等。本实例介绍的查询是基于Image图层的查询，其他图层的查询方法一样。Ol的查询对ogc标准（ogc规范不在本文讨论范围内）查询进行了一定的封装，开发人员同样可以自己根据ogc标准进行要素的属性信息等进行查询。实例很简单，同时也是上述复杂查询的基础，掌握好基础才能进行复杂的工作。rn1创建页面rn新建</p> </div> </div> </div> </article> <article id="post-22555" class="group post-standard post-22555 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/22555/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="openlayers 关于如何根据坐标去获取最近的feature" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22555/" rel="bookmark">openlayers 关于如何根据坐标去获取最近的feature</a> </h2> <div class="entry excerpt"> <p>做地图做的魔怔了，记录一下let closeFeature = source.getClosestFeatureToCoordinate(point)参数解析source是一个图层的source 可以是实例化的对象，也可以从图层获取point 指的是所根据的坐标所得到的结果是一个feature举个例子：我在一个图层上面有许多的features 比如多个几何体根据我当前的坐标那么我将能够获取…</p> </div> </div> </div> </article> <article id="post-22553" class="group post-standard post-22553 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/22553/"> <img width="320" height="188" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20181229151232909-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/20181229151232909-1.png 669w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20181229151232909-1.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_177 300w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22553/" rel="bookmark">openlayers3（五）根据坐标点画圆、线、多边形</a> </h2> <div class="entry excerpt"> <p>这个是上一篇博客中的电子围栏中的一部分功能，但是因为有点小坑啥的我自己就单独拎出来写了。所以我写的也算是基于上一篇：openLayers3（四）电子围栏—使用画图工具绘图n话不多说，代码附上n代码nclass drawFencen n //转换坐标点（多）n transPoints(points) n let arr = points.split(‘;’);n …</p> </div> </div> </div> </article> <article id="post-22550" class="group post-standard post-22550 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/22550/"> <img width="1" height="1" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/52887669-1.jpg" class="attachment-kontrast-standard size-kontrast-standard wp-post-image" alt="" decoding="async" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22550/" rel="bookmark">openlayers3.14源码学习（1）</a> </h2> <div class="entry excerpt"> <p>参考文章：rn 1.js库解析之google closure http://www.kuqin.com/webpagedesign/20100309/81059.htmlrn openlayers3整体的代码架构，实现方式以及风格与之前的ol2有很大的不同。可以说是一次完全新颖的升级。许多的类都采用的新的实现方式，代码的构造也与之前完全不同。很有重</p> </div> </div> </div> </article> <article id="post-22538" class="group post-standard post-22538 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/22538/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="面试多个公司，印象深刻的面试题" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22538/" rel="bookmark">面试多个公司，印象深刻的面试题</a> </h2> <div class="entry excerpt"> <p>1.vue 对IE8兼容怎么样？（不兼容IE8）；n2.field 对IE8兼容怎么样？（不兼容ie8）；n3.前端页面优化主要有哪些？怎么做的？（）；n4.Vue的双向数据绑定原理？（）；n5.jquery的原理？n6.vue和jQuery的区别？n7.cookie和session、localtion的区别？nnnn …</p> </div> </div> </div> </article> <article id="post-22540" class="group post-standard post-22540 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/22540/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayers加载Google地图" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22540/" rel="bookmark">OpenLayers加载Google地图</a> </h2> <div class="entry excerpt"> <p>n原先发在了OpenLayers中文网,交流的人很少，所有又发到这里。rn之前看了一些继承自TileCache的实现,这里也发一下自己的实现,继承自XYZ类。接触OpenLayers时间不长,没有实际项目应用经验,有理解不清的地方还望各位多多指教,谢谢！rn/* Copyright (c) 2002-2012 by fiftyk*/rnrn/**rn * @requires OpenLayers/…</p> </div> </div> </div> </article> <article id="post-22536" class="group post-standard post-22536 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/22536/"> <img width="320" height="315" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20170326204337259-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/20170326204337259-1.jpg 552w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20170326204337259-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_296 300w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22536/" rel="bookmark">openlayers3应用（三）：百度坐标“纠偏”</a> </h2> <div class="entry excerpt"> <p>本文主要介绍使用openlayers3加载百度在线或者离线地图后，对坐标进行纠偏</p> </div> </div> </div> </article> <article id="post-22533" class="group post-standard post-22533 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/22533/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayers下将浮云框显示位置固定" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22533/" rel="bookmark">OpenLayers下将浮云框显示位置固定</a> </h2> <div class="entry excerpt"> <p>OpenLayers下对rnrnrnOpenLayers.Popup.FramedCloud.prototype.fixedRelativePosition = true;rnOpenLayers.Popup.FramedCloud.prototype.relativePosition = “tr”;</p> </div> </div> </div> </article> <article id="post-22530" class="group post-standard post-22530 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/22530/"> <img width="319" height="166" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/1341295507_1182-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/1341295507_1182-1.png 319w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/1341295507_1182-1.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_156 300w" sizes="(max-width: 319px) 100vw, 319px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22530/" rel="bookmark">openlayers空间点查询之GetFeatureInfo</a> </h2> <div class="entry excerpt"> <p>在map对象上注册点击方法监听，这里我用的是wms，当然你也可以查询wfsrnrn map.events.register(‘click’, map, function (e) rn var params = rn REQUEST: “GetFeatureInfo”,</p> </div> </div> </div> </article> <article id="post-22527" class="group post-standard post-22527 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/22527/"> <img width="320" height="108" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20160510160620610-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/20160510160620610-1.jpg 950w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20160510160620610-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_101 300w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20160510160620610-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_768,h_260 768w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22527/" rel="bookmark">图解OpenLayers-2.13.1入门实例</a> </h2> <div class="entry excerpt"> <p>mod=viewthread&tid=171rnrn解压后有如下内容；rnrnrn2 实例1rn把img, theme 文件夹，OpenLayers.js，拷贝到一个新建文件夹，并新建index.html；rnrnrnindex.html:rnn n n n My OpenLayers Mapn</p> </div> </div> </div> </article> <article id="post-22522" class="group post-standard post-22522 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/22522/"> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22522/" rel="bookmark">OpenLayers官方示例详解十三之叠置层（Overlay）</a> </h2> <div class="entry excerpt"> <p>目录nn一、示例简介nn二、代码详解nn一、示例简介nn 这个示例展示了如何使用叠置层（ol.Overlay）。nn 这个示例借助了第三方库jQuery和Bootstrap。nnnn二、代码详解nnn<!DOCTYPE html>n<html lang="en">n<head>n <meta charset="UTF-8">n …</p> </div> </div> </div> </article> <article id="post-22518" class="group post-standard post-22518 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/22518/"> <img width="320" height="127" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/ol3E6BA90E7A081E79BAEE5BD95E7BB93E69E84.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/ol3E6BA90E7A081E79BAEE5BD95E7BB93E69E84.png 460w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/ol3E6BA90E7A081E79BAEE5BD95E7BB93E69E84.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_119 300w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22518/" rel="bookmark">OpenLayers 3实践与原理探究4.1-ol3源码分析-底层基础</a> </h2> <div class="entry excerpt"> <p>因为下面的内容会分模块介绍源码，所以这里为了方便，首先介绍源码的目录结构 n在OpenLayers 3官网的下载页面下载我们在开发工程中需要的文件(如：v3.17.1.zip)，注意如果需要编译源代码，需要下载包含编译功能的文件包：https://github.com/openlayers/ol3/releases 下载指定release版本的源码，注意是Source</p> </div> </div> </div> </article> <article id="post-22513" class="group post-standard post-22513 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/22513/"> <img width="320" height="175" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180814105449155-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/20180814105449155-1.jpg 1920w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180814105449155-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_300,h_164 300w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180814105449155-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_768,h_419 768w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180814105449155-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_559 1024w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22513/" rel="bookmark">OpenLayers之图形绘制二：绘制几何图形</a> </h2> <div class="entry excerpt"> <p>目录nn nn一、根据已有的空间坐标信息绘制图形nn二、交互式图形绘制nn一、根据已有的空间坐标信息绘制图形nn 编写代码，通过一个矢量图层分别加载单个点、线、多边形矢量要素。nnnn 代码如下：nnn<body>n </p> <div id="map"></div> <p>nn <script>n var map = new o...</p> </div> </div> </div> </article> <article id="post-22510" class="group post-standard post-22510 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/22510/"> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22510/" rel="bookmark">OpenLayers-添加Marker</a> </h2> <div class="entry excerpt"> <p>在OpenLayers Map添加Marker。rn1.创建Marker图层rnMaker由Marker图层进行管理rnrnvar marker_layer = new OpenLayers.Layer.Markers(“markers”);rnrn2.</p> </div> </div> </div> </article> <article id="post-22505" class="group post-standard post-22505 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/22505/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="OpenLayers学习笔记(1)" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22505/" rel="bookmark">OpenLayers学习笔记(1)</a> </h2> <div class="entry excerpt"> <p>以下内容引自classicning Clog OpenLayers是一个开源的js框架，用于在您的浏览器中实现地图浏览的效果和基本的zoom，pan等功能。OpenLayers支持的地图来源包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用简单的图片作为源，在这一方面OPenLayers提供了非常多的选择。要使用OpenLayers，您可以</p> </div> </div> </div> </article> <article id="post-22507" class="group post-standard post-22507 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/22507/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="openlayers3投影转换——proj4js" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22507/" rel="bookmark">openlayers3投影转换——proj4js</a> </h2> <div class="entry excerpt"> <p>proj4jsnproj4js是一个转换点坐标从一个坐标系到另一个坐标系的JavaScript库，包括数据转换。这个库是由proj4和 gctcp C库转换而来的JavaScript版本。在浏览器端进行转换的可能允许将存储在不同的投影存储的地理数据可以在基于浏览器的Web地图应用应用中结合到一起。proj4js是metacrs项目组的一部分，使用和 PROJ.4相同的MIT许可。nproj4js 和</p> </div> </div> </div> </article> <article id="post-22503" class="group post-standard post-22503 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/22503/"> <img src="https://www.giserdqy.com/wp-content/themes/kontrast/img/thumb-standard.png" alt="使用Openlayers v4时感觉需要记一下的东西" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22503/" rel="bookmark">使用Openlayers v4时感觉需要记一下的东西</a> </h2> <div class="entry excerpt"> <p>ol.map有一个forEachFeatureAtPixel的函数，可以用来响应鼠标事件，得到feature的属性。但是对于TileWMS的source，或者说用这个source的Layer，这个函数没起作用。没有看源码，估计是因为WMS图层通过http请求tile来生成地图，而这个函数不包含这种方法。官方的示例用getGetFeatureInfoUrl代替，得到的是服务器返回的一个html元素。</p> </div> </div> </div> </article> <article id="post-22491" class="group post-standard post-22491 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/22491/"> <img width="320" height="172" src="https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180324173423564-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/20180324173423564-1.jpg 1920w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180324173423564-1.jpg?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/20180324173423564-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_768,h_412 768w, https://mtr-1.oss-cn-beijing.aliyuncs.com/qyblog/2019/04/20180324173423564-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1024,h_549 1024w" sizes="(max-width: 320px) 100vw, 320px" loading="eager" /> </a> </div> <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> <h2 class="post-title"> <a href="https://www.giserdqy.com/secdev/openlayers/22491/" rel="bookmark">openlayers加载天地图WMTS服务</a> </h2> <div class="entry excerpt"> <p><!DOCTYPE html>n<html lang="en">n<head>n <meta charset="UTF-8">n <title>Titlen

openlayers

2019-04-03

OpenLayers Map理解

1，视口坐标的原点在左上角，水平向右为x轴正向，垂直向下为y 轴正向；rn2，地图坐标原点为初始图层的中心点，水平向右为x轴正向，垂直向上为y轴正向；rn3，视口中心点永远与地图中心点重合，不一定与瓦片中心点重合；rn4，拖动图层的逻辑描述：地图是不动的，视口移动从而展示不同的地图区域； rnResolution：解析度 = 地图尺寸/视口尺寸好比摄像机，镜头拉得越近解析度越小，地图看得越清晰。

openlayers

2019-04-03

OpenLayers性能瓶颈与优化（闭包引用与GML解析低效率）

结构中大量闭包的引用关系造成的性能瓶颈rnrnrn OpenLayers其实是受到了js本身的限制，js是解释型的语言，执行效率不高，而且寄生在客户端让浏览器执行的。而OpenLayers中大量用到了闭包，最开始OpenLayers的内存泄露问题也是满严重的，后来差不多每个类中都写了destroy方法，用于释放资源，解除对象与DOM的绑定,相当于析构函数那种，这在很大程度上优化了Ope

openlayers

2019-04-03

放弃openlayers3自带轨迹回放效果、H5实现完美实现

一直感觉OL3的轨迹回放使用度不高，在点的数量变少的时候开始跳动，很不唯美，，所以结合百度路数的开放源代码实现轨迹回放的完美滑动，如下图：

openlayers

2019-04-03

OpenLayers3基础教程之实现地图显示功能

1.配置开发环境nn使用OpenLayers 3开发WebGIS应用，我们首先需要配置开发环境，首先我们需要在openlayers官网获取OpenLayers 3的开发库。下载链接：官网。打开后如图所示： nnnn 需要注意的是这里下载有两个版本，①：仅包括开发库（开发与调试的JS库以及CSS文件），②：包括开发库、开发库源码、示例、API等所有开发资源。

openlayers

2019-04-03

使用OpenLayers实现一个在鼠标点击处添加标记的效果

//点击一个标注按钮的事件,该方法的作用就是启用添加标注事件rnvar map_onclick;rnfunction enable_click()rnrn map_onclick = new OpenLayers.Control.Click(); rn map.addControl(map_onclick); rn map_onclick.activate();rn

openlayer3 地图容器发生变化后,canvas display 为 none

openlayers

2019-04-03

openlayer3 地图容器发生变化后,canvas display 为 none

今天支持泰国的一个WFM项目,GIS部分用的是openlayers,开源的东西好处是可以无版权、直接能拿到源代码,坏处是经常会碰到莫名其妙的坑,今天就碰到一个.nn今天这个不是openlayers的bug.nn问题场景: 我们的页面上有一个Tab,分别有3个菜单,第一个是GIS,第二个是甘特图nn(1)点击甘特图tab,再点击gis的tab,地图照常显示;nn

Category: openlayers

openlayers发布离线地图

OpenLayers 3 之使用 AJAX 通信

OpenLayers设置地图缩放最小范围和最大范围

openlayer2屏蔽双击放大事件

Openlayers4动态绘制地图分幅网络

openlayers中叠加图片bounds计算小工具

Openlayers APIDOC下载地址

OpenLayers地图打印输出

openlayers3添加地图控件

openlayers3 气泡框展示鼠标点击坐标

openlayer 移除map.on(click,地图点击事件

openlayers官方教程（十）Vector Data——Making it look nice

划线、标线、贴线、删线竟然如此简单 -来自openlayers

openlayers3实现要素在地图上点选、多选、框选等功能

Openlayers学习笔记——Vector Layer 事件类型

openlayers3 禁止启用鼠标拖动地图

OpenLayers3加载离线百度地图(百度迁徙底图)

OpenLayer点击动态图标弹出提示框实例

openlayer 加载wfs 2种方式

百度地图和openlayers融合封装（一）

Openlayers3 API中的几处坐标系，分别代表的含义总结

OpenLayers Map理解

OpenLayers性能瓶颈与优化（闭包引用与GML解析低效率）

放弃openlayers3自带轨迹回放效果、H5实现完美实现

OpenLayers3基础教程之实现地图显示功能

使用OpenLayers实现一个在鼠标点击处添加标记的效果

openlayer3 地图容器发生变化后,canvas display 为 none

公众号

微信群

微信小程序