OpenLayers 3.0+highcharts
感谢OpenLayers中文网的fengl同学，
Category: 二次开发
openlayers4通过拖动滑动条设置图层颜色透明度
在GIS项目实践过程中，需要实现各个功能区的叠加图层实现，以及设置它们各自的透明度，功能区分为1类、2类、3类、4a类、4b类等。每个功能区的加载均是通过一个json文件加载到map。要求可以单独查看某个功能区，并通过拖动滚动条可以控制每个图层的透明度。 n1.首先，在html5中通过input type= “range”可以实现滚动条的拖动，具体实现代码如下：nn<input type=”…
OpenLayers删除矢量图形的Control
/** * 功能:删除选中的Feature,以免添加错误的Feature或删除修改错误的Feature * 使用:点击修改实体的button，使用键盘上的Dele键来删除 *///删除所添加的图形OpenLayers.Control.DeleteFeature = OpenLay
openlayers4源码解读系列
计划分析openlayers源码，待更新。。。
OpenLayers学习——事件注册
例一,给map类注册一个事件，查看文档有以下说明：rnRegister a listener for a particular event with the following syntaxrnmap.events.register(type, obj, listener);rnListeners will be called with a reference to an event object
解决Openlayers转化为墨卡托坐标系定位不准和隐去前3级的问题
由于使用了新地图瓦片，而改变了坐标系，使得定位有偏差，经过一系列的努力终于解决了这个问题。 问题出在了，坐标系范围和maxResolution系数上面。改为： maxResolution:156543.0339maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.
openlayers删除矢量图层上的图形
必须先删除clear layer的source再removenn nn nn
openlayers结合多选框在控制一个图层显隐性时加载过慢的问题
在做功能区图层全选多选时，正常图层的加载应该是2、3秒即可加载完毕，但是当选择某区域某类区时，竟然用了十几秒才加载出来，后来找出问题竟然是for循环中对json数据格式转换代码的问题，原代码是：nnnvar dataFeatures = msg.layernvar lilen = $(“#point_ul ul”).length;nclearlayerSource(pointLayer);ncle…
OpenLayers获取map图片左下角和左上角经纬度
//mapnvar map = new ol.Map(…);n//获取图像nvar view = map.getView();n//获取一个经纬度的数组(两组数据)->[13417639.537659956, 3657508.94839583, 13434990.743080692, 3682503.8566450826]nvar arr = view.calculateExtent…
结合heatmap.js，在Openlayers中如何实现热力图
概述：rn本文讲述结合heatmap.js，在Openlayers中如何实现热力图。rn rnheatmap.js简介：rnHeatmap 是用来呈现一定区域内的统计度量，最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。
OpenLayers 3 之 Overlay（覆盖物）详解
Overlay 从名字看，是覆盖图、覆盖物的意思，主要的用途就是在地图之上再覆盖一层，用以显示额外的可见元素，可见元素一般是 HTML 元素，利用 overlay，可以将可见元素放置到地图的任意位置，形成地图上再浮动一层的效果。例如在地图上相应的坐标放置一个标志，标签，利用 overlay 都可以做到，具体来说，点击地图上某位置，在点击位置弹出弹出框就是利用了 overlay。
Openlayer3之如何查看以前版本的API
这是Openlayers3最新版本的API的访问地址：http://openlayers.org/en/latest/apidoc/nn这是Openlayers3历史版本的API的访问地址：http://openlayers.org/en/v3.19.1/apidoc/ol.html?stableonly=truenn备注：查看历史版本的API的时候，只需将最新版本API的访问地址的latest改…
OpenLayers的API讲解（二）
ol.ViewnnnnIntroductionnnn ol.View 对象表示一个简单的地图2D视图。对改变地图的中心，分辨率和旋转起到作用。nnnnnThe View Statesnnol.View是由三个状态决定的；分别为center，resolution，rotation。每一个state都有相应的getter和setter方法。例如，center的getCenter和setCenter方…
OpenLayers3-4-Attributions
原文地址：http://openlayers.org/en/v3.12.1/examples/attributions.htmlWhen the map gets too small because of a resize, the attribution will be collapsed. This is because the collapsible option is set to true
OpenLayers-加载地图数据(Google Map)
除了WMS地图外，OpenLayers可以直接添加Google Map, Microsoft Virtual Earth等地图。rn rn1. 添加google map的key 使用google map的数据需要google map的一个key。OpenLayers的examples里面有一个key，可以直接使用。
在OpenLayers4中将地图及叠加显示的图层生成图片保存到数据库方法
在调用自己发布的图层服务时注意在图层源属性中加入跨域。nnnew ol.layer.Image(n source: new ol.source.ImageArcGISRest(n ratio: 1,n params: ,n …
openlayers之cluster——加载大数据…
n nvar dx = 3;n nvar dy = 3;n nvar px, py;n nvar features = [];n nvar strategy, clusters;;n nfunction draw() n nvar ic = “
OpenLayers3入门篇-点在线上的运动
点在线上的移动n基本思路就是先将这条线切割成很多的坐标，然后这个点沿着这些坐标前进n这个代码是直接从业务代码Copy下来的，但是稍作了修改，加上注解，便于参考时理解nnfunction MoveOnLine(start,end,jsonobj)nnvar x = [parseFloat(jsonobj.startx),parseFloat(jsonobj.starty)];nvar
Openlayers 在地图上画点，线，面，圆
nnn n OPenLayers 3 examplen n
在Web客户端中基于Proj4实现坐标转…
当鼠标滑过地图，我们会扫一眼鼠标的地理位置，至少要能看到经纬度，好确认当前的范围和地物是否处在正常的位置。这对于C/S应用来说，是最为常见的辅助功能，即使是在B/S中，这似乎也不是难事，比如谷歌地图等都能提供这个功能，但是我们也知道，这些地图数据是固定投影的，获取经纬度坐标的途径是单一的，而这也不是本文要考虑的内容。n在系统应用中，B/S结构的GIS系统会发布具有不同投影类型的地图数据，而在客户端
openlayer组成部分
1.地图（Map）：对应的类是ol.Map;2.视图(View)：对应的类是ol.View，控制地图显示的中心位置，范围，层级等;3.图层(Layer)：OpenLayers 3有多种多样用于不同业务的图层，每一种图层在实现上都对应于一个类，放在包ol.layer下面，之前已接触过的ol.layer.Tile就是其中的一种。OpenLayers 3允许多个layer重叠在一起，相互之间互不干扰，是…
openlayer4地图及图层导出图片问题小结
直接使用ol4中的地图导出功能在我们的项目中可能会存在跨域问题，导致地图不能正常的转为二进制。rn解决方法：rn1 //自定义图层中添加crossOrigin，具体如下：rn var tdtTerLayer = new ol.layer.Tile(rn visible: true,rn source: new ol.source.XYZ(
openlayers 3（一）
进一步接触openLayers3，写下这一段学习的小节(以下简称ol)rnrn1.对openLayers3初步理解rn oL3是一套开源库，用于WebGis的开发（地图数据访问、地图操作）。包含了主流的JavaScript、HTML5及CSS技术，完美支持了dom，canvas和gis用到的webgl三种渲染方式，支持瓦片，矢量和在线，离线的数据源。rnrnrn2.对openLayers3深层次
Openlayers更新了版本3.1.1，那GitHub上的三个不同的压缩包都有什么关系啊？！
刚看到更新了 就去GitHub找更新的新版本，跟从前一样有三个压缩包。上个版本我就想问。这么些个压缩包，他们之间有什么必然的联系么？还是有什么不可告人的秘密关系？rnrnrn 第一个是 release版本，里面包含了源码，和Demo代码，比较大。后两个是源码，不含Demo。后面两个压缩方式格式不同，.zip格式用于windows，tar.gzrn 格式多用于 Unix/linux MacOS 系统
源码四。不做讲解，根据以前的博客去理解。
Gisn /common/css/style.css”>n n
openlayers3 报错 Uncaught TypeError: M.split is not a function
问题描述：点击选中多边形区域时报错：Uncaught TypeError: M.splitis not a function换成debug的ol文件，详细错误为：UncaughtGoog.asserts.AsserttionErrormessage: “Assertion failed: 4th instruction should be a string”, …. 解决方案：仔细回想，样式…
Arcgis for js，Openlayers中加载GeoJSON
在前文中，讲述了在JAVA环境下如何将shp转换为GeoJSON，在本文，分别讲述在Arcgis for js，Openlayers2和Openlayers3中加载展示GeoJSON。
【学习笔记之Openlayers3】查询分析篇（第五篇）
这篇主要讲到基于openlayers3实现查询分析功能主要包括：属性查询，几何对象查询，位置关系查询这三类。n 开发环境：openlayers3 geoserver postgresql+postgisn1.属性查询 其实属性查询没有什么要讲的，就是对于图层要素的的基础属性进行查询（例如名称，地址等等）这些查询就是简单的利用ajax进行请求后台，然后写SQL查询语句即可。这里就不多赘述了
OpenLayers+PostGIS实现路径分析
n n n 本文内容默认已在PostGIS中添加了PgRouting扩展模块。n1. 数据准备n 路径分析功能是针对路网图层进行的空间分析应用，在将shp文件导入数据库之前，需要对其进行拓扑检验，主要是道路的自相交以及路段之间的道路节点的相离的检验。可以利用ArcGIS对文件进行拓扑的构建和检验，保证数据的准确性。n 利用PostGIS自带的工具将文件入库。如…
OpenLayers 3实践与原理探究3-ol3一个完整的例子
接着我们看一个比较长的例子，例子实现的是可以绘制图形，可以根据自己的设置打印地图 n我们先看显示效果是： n n由于ol3的api现在更新变化挺大的，所以自己运行的例子的时候注意版本是3.17.1 n例子中的解释比较详细，不具体进行展开介绍。本例子主要分为三部分，在js文件中已经隔开 n- 第一部分是地图的初始化，包括添加图层，添加控件 n- 第二部分加个标注点，点击显示位置的弹出框 n- 第三部分
瓦片地图之百度地图（openlayers）
在OpenLayers 3中，默认使用的瓦片地图的坐标系是如何定义的？经分析可知，OpenLayers 3的瓦片坐标系的原点在左上角，向上为y轴正方向，向右为x轴正方向。具体到地图上来讲，地球经过投影，投影到一个平面上，平面最左边对应地球最西边，平面最…
openlayer热力图权重与颜色关系研究
热力图的权重与颜色的关系的例子，选中feature获取其权重值，还需进一步研究。nn n Earthquakes Heatmapn
控制地图与div的占据区域【目标：让地图默认占满展现区】
方法： rn设置map的options，由其中两个因素决定：maxExtent－最大地图边界；rnmaxResolution－最大解析度。 rn当maxExtent设置为地图的最大边界后，maxResolution设置为auto，那地图就占满DIV。 var options = rn controls: [], rn maxExtent…
Openlayers学习笔记——Map类
rn rn 1.Map类rn Openlayers中Map类承载着我们的地图，所有你想做的事情，如移动、缩放、添加图层，都必须在Map对象的基础上完成。rn 在Openlayers中controls和layer对象都是属于map对象的，如果进行地图操作，需要连接到map对象上，因此…
OpenLayers创建地图
rnrnrn Insert title herern rn rn rn var map = null;rn function init()rn var options = rn controls:[new OpenLayers.Control.KeyboardDefaults…
Openlayers-设置地图缩放级别
在实际项目中，好多地图不需要从第0级开始缩放，因为第0级地图太小了，没有实际意 义。那么就需要设置从中间某个级别开始缩放。该如何做呢。由于openlayrs2中没有直接属性进行控制，也因此需要自己注册事件通过监听事件来控制地 图的最小缩放级别。对于openlayers3来说，直接通过view的属性进行控制即可。rnopenlayers中需要注册缩放事件来解决，在该事件中监听缩放后地图的级别，当地图
openlayers发布离线地图
rn 最近的一个项目需要在局域网内做到地图效果，在网上搜素以后，决定使用openlayers加离线瓦片地图来做。rn 下面代码是摸索了几天以后做出的例子，当然因为了解不深，只是简单做了一个效果，没用到太多的组件和方法，还希望精通的大神不要笑话。rn 代码：rn rn
OpenLayers 3 之 使用 AJAX 通信
地图应用是大流量应用，如果频繁刷新页面，造成的数据传输也必然是很大的，这在你的网络不是很好的时候，你就醉了，这时候便是 AJAX 显现优势的时候了。这里我们把 AJAX 应用在地图搜索中，下面看看怎么做到的吧！
OpenLayers设置地图缩放最小范围和最大范围
rnOpenLayers设置地图缩放最小范围和最大范围rnfunction init()n n var options=n n projection: “EPSG:4326”, n eventListeners: n n “moveend”: mapEvent,n “zoomend”: mapEventn ,n contro
openlayer2屏蔽双击放大事件
openlayer2屏蔽双击放大事件nn环境为 open layer 3.1.3.1nn代码如下nnnn
n n
Openlayers4动态绘制地图分幅网络
在Openlayers地图上根据地图分幅规则，绘制分幅网格，需要注意的有几点：1确认什么比例尺时展示什么1:100万、1:50万…比例尺的分幅2根据地图当前视窗位置，动态绘制注记和网络，因为全部绘制的话，网格和注意太多，严重影像运行速度3绘制经线和纬线，不绘制网格，网格严重内存更多代码如下： addSheetNumber(number)n getLayerByName
openlayers中叠加图片bounds计算小工具
n不知道大家有没有遇到在OpenlayersG地图中叠加图片显示的情况，这里发布一个我用来计算图片bounds的工具代码： 转载请注明出处：tedeum.iteye.comrnrnrn
rn
Openlayers APIDOC下载地址
做开发时，很多人刚刚接触Openlayers，不知道在哪下载API、API DOC、Example。下面列举一下地址最新版API、说明文档、Example下载地址：https://openlayers.org/download/历史版本下载地址：https://github.com/openlayers/openlayers/releases/…
OpenLayers地图打印输出
最近遇到了在Openlayers上开发地图打印的功能，官网给了两个全图打印的demo。其核心思想是将canvas里的像素提取出来。
openlayers3添加地图控件
//添加属性控件rnmap.addControl(new ol.control.Attribution());rn//添加鼠标定位控件rnmap.addControl(new ol.control.MousePosition(rn undefinedHTML: ‘outside’,rn projection: ‘EPSG:4326’, rn coordinateFormat:
openlayers3 气泡框展示鼠标点击坐标
根据这篇文章改写而来，主要实现了在地图上点击弹出气泡框，用来展示经纬度，当然你也可以改成展示其他内容。rn n n n n n nOpenLayers MapQuest Demo n n n html, body, #map n padding:0; n margin:0; n
openlayer 移除map.on(click,地图点击事件
在openlayer API里找了好久也没找到，最后问老同学才解决这个问题，今天记录下来nnnkey = map.on(‘click’, function (e) n…n.bind(this));nn//移除clicknnnol.Observable.unByKey(key);…
openlayers官方教程（十）Vector Data——Making it look nice
Making it look nice前面已经完成了基础的功能，包括导入、编辑、导出。但是没有做一下美化，当你创建了一个矢量图层，会默认很多样式。编辑过程中的交互也是默认的样式，你可能注意到在编辑过程中线条很粗，这个可以通过向矢量图层和交互提供style来控制这些属性。Static style如果我们给所有要素集定义通用的样式，可以如下配置：const layer = new VectorLaye…
划线、标线、贴线、删线竟然如此简单 -来自openlayers
如果你自己写过在地图上划线、标记、自动贴合、删除适量线条等这些功能，那么你就会喜欢上下面来自openlayers官方的代码：nnnnn
nopenlayers3实现要素在地图上点选、多选、框选等功能
nn
n nOpenlayers学习笔记——Vector Layer 事件类型
Vector类是继承了OpenLayers.Layer的，Layer的所有事件类型都能在Vector中被使用。rn 一、事件类型的注册rn vector_layer.event.register(type,obj,listener);rn vector_layer是矢量图层的名字，上面的代码能够将事件注册到事件类型中去，除了Layer的事件类型外，矢量图层还支持以下事件…
openlayers3 禁止 启用鼠标拖动地图
//通过禁止 和 解除 拖动解决 gis 使用： pan.setActive(true) –开启拖动 pan.setActive(false) –关闭拖动 rnrnrn启用拖动方法rnrn var pan; rn function onMove()rn map.getInteractions().forEach(function(elem
OpenLayers3加载离线百度地图(百度迁徙底图)
关于openlayers加载离线百度地图的东东好几年前就做过了，不过当时做的是2.0版本的。rnrnrn自从好久没有去做可视化分析之后，也很少接触这些前端的JS的东西了。最近想实现一个东西的时候，才想起需要用到一些比较干净的底图。rnrnrn于是刚好选用了百度迁徙后面的底图。rnrnrn由于百度的JS包东西太多，需要的东西太复杂，于是就选用openlayers来进行测试。果然还是非常流畅。rnrn
OpenLayer点击动态图标弹出提示框实例
本人变向解决由于Openlayers不支持gif和swf格式图片要素问题。rn希望给需要的朋友提供参考。
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融合封装（一）
目前一切顺利，两种不同的地图，要实现相同的效果，只需要配置地图类别为baidu或者openlayers，其他的代码完全一样。遇到的问题： layer层在添加feature的时候，如果map层已经给layer层添加过交互事件了，那么这个新的fea…
Openlayers3 API中的几处坐标系，分别代表的含义总结
在openlayer中引入切片，添加各种服务，视角的定义等情况下都有对projection的属性进行设置，有的是默认值，有的需要自定义，但是他们与请求的服务之间或多或少存在着千丝万缕的联系。或者互不影响。本人在实践过程中，对经常出现的几个projection的理解进行了总结，直接看代码：nnnn
n
解决openlayers调用mapserver发布的地图出现乱图问题
使用mapserver发布了地图服务，使用openlayers调用时出现了乱图问题，如下图：rnrnrnmapserver中的 mapfile文件中的部分内容如下：rnrnrnrnopenlayers 中调用的部分代码如下：rnrnrnrnrn经过反复排查后终于找到了原因：rnopenlayers中有专门调用mapserver发布的服务的类 OpenLayers.Layer.MapServerrn
OpenLayers 3实践与原理探究4.3-ol3源码分析-Source,Layer
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
