openlayers 3 实现车辆轨迹回放
先上效果： nnn利用 openlayers 3地图的 postcompose 事件监听地图的重绘nn注意：此代码是我在Vue 的methods 里面写的测试方法，并不能直接运行，请在理解的基础上测试。 nvm 为vue的this对象 注释已经很丰富了，先做个备份，后期会编辑加入一点详解。
Category: 二次开发
OpenLayer4加载svg
关于加载svg 的代码，网上是少之又少，牛老师博客倒是有，但是只是核心代码，并没有给出完整的demo,而且核心代码中有个问题对于这个ol渲染不太理解的话的话应该做不出来效果，就是关于坐标转屏幕坐标的问题，必须需要地图渲染完成之后才能拿到否则没法转换，得出转换为空的结果。nn放个图：nnnn一、原理nn通过静态加载图片的方式加载svg，给定初始化范围，更重要的是给定imageSize，关于image…
openlayers 加载ArcGIS 切片地图
我这里使用的版本是openlayers 3.11.1主要的方式是使用 ol.source.XYZ 这个类来加载 切片，ArcGIS生成切片的目录文件的方式为： n\L10\R00000181\C0000034a.png其中 10 为地图的缩放比例，00000181和’0000034a’ 分别是十六进制的 切片横纵坐标，也就是说我们按照这个规律就可以加载到对应的切片
快速入手openlayers-基本概念理解
openlayers
百度地图和openlayers融合封装（三）之实战
2018.5.10 –16:02地图基本元素已经完成，各部分都有demo供参考。接下来准备完成一个地图系统页面，包含图层管理，poi静态点，静态点事件（hover,click），图形绘制，范围查询等。计划先模拟900个点，分为3个类别（图层）。预计一周完成。…
Openlayers4.5创建圆形菜单
n n n 一、效果图nnnnnn菜单效果图nn二、思路n根据平面坐标转为像素坐标放置点的位置。n三、关键代码nnnnnnn转换代码nnn n nn
Openlayers之加载ArcGIS Server瓦片（XYZ方式）
1、打开ArcGIS Server Manager查看已经切好的瓦片的信息，这些信息会在后面的加载瓦片过程中使用，我们先来看看哪些信息是很重要的：nnn2、准备工作完成后，下面我们开始加载瓦片，其中我们会用到一个比较重要的类nol.tilegrid.TileGrid，该类的构造参数自己查看官方API，具体代码如下：
OpenLayers环境搭建与配合GeoServer显示地图
OpenLayers是一个js库，用于显示各个地图服务所提供的数据，例如ArcGIS，GeoServer等。这里结合GeoServer使用来显示地图。nn1. 从官网下载OpenLayers库。解压后放入web工程下。nnhttp://openlayers.org/nn2. 将js与css文件导入到页面中。这里版本为v5.0。
使用openlayers3+中添加右键菜单
openlayers3+中没有直接的监听地图右键的功能，但是我们可以通过使用jquery监听地图所在的html元素的右键事件来实现。nn一、定义右键弹出框的html元素nn nnn
OpenLayers 之 地图交互功能（interaction）详解，openlayers百度地图
转自：http://www.bkjia.com/webzh/1003573.htmlrnrnrnrnrn地图交互功能和上一篇讲的地图控件有些混淆，它们都控制着用户与地图的交互，区别是地图控件的触发都是一些可见的 HTML 元素触发，如按钮、链接等；而交互功能都是一些设备行为触发，都是不可见的，如鼠标双击、滚轮滑动等，手机设备的手指缩放等。rnrn 地图的交互功能包含很多，如地图双击放大，
openlayers 3 加载地图瓦片数据
openlayers 是一套开源的js地图框架map对象相当如一个容器，它上面可以铺放多个layer，layer可以加载数据源或其它作用。有关openlayers 的详细介绍，请参考http://openlayers.org/下面创建一个layerurlTemplate中包含x,y,z(z:地图级数，x:x方向序数， y:y方向序数)function newTilesUrlLayer(urlTem
openlayers3使用总结
1、ol.style.Iconrn重要属性说明：rnsrc：加载图标的urlrnsize：形式为[25, 25]，单位：像素。以图标的左上角为起点，以指定的像素对图标进行截取。所以它不是等比例放大或缩小图标。它可以结合offset设置图标左上角rnrnscale：整体放大或缩小图标
OpenLayers 3加载本地Google切片地图
转自：http://www.cnblogs.com/Leechg/p/4684424.htmlrnrnrnOpenLayers 提供了ol.source.XYZ 接口用以加载切片地图。rnrn本地切片地图是用地图切片下载器下载的Google道路图层，由于软件未激活，所以每张切片地图上都有软件作者的联系方式，请忽略。rnrn rnrnrnrn rnrn下载下来的切片地图通过Windows自带的ii
openlayers集成echarts实现百度迁徙的模拟
最近在做可视化测试的时候，突发灵感也实现一下百度迁徙的效果。nnn然而
openlayers3中，鼠标滚轮动画
以前的web地图，使用鼠标滚轮进行放缩时，通常会显示放缩动画，如下图的效果，虽然现在主流web地图中都已经取消了这个功能，但这里还是备忘一下。
【openlayers】ol3切换图层源
在实际运用场场景，有时我们需要2个不同的图层切换的对比，比如百度地图的普通图层和卫星图层nn在ol3里实现这个功能也是很简单，使用 setSource() 即可nnlet baseLayer = map.getLayers().item(0);nbaseLayer.setSource(n new ol.source.XYZ(n url: ”//对应的卫星图层地图包路径n …
OpenLayers官方示例详解六之线串箭头样式（LineString Arrows）
目录nn一、示例简介nn二、代码详解 nn 三、总结nn一、示例简介nn 为每一个线串（LineString）的子线段绘制箭头。nn二、代码详解 nnnnn
n n
Openlayers 2.X加载高德地图
前面的有篇文章介绍了Openlayers 2.X下加载天地图，本节介绍Openlayers 2.X下加载高德地图。
openlayers实现在线编辑
在前面有篇博文讲述了基于Arcgis for js和wkt实现在线数据的采集和编辑功能，在本文讲述如何在openlayers实现类似的功能。
openlayers3 画扇形
nnn
n nopenlayers给要素加文字注记
在项目中，需要给每个行政市区的中心加上该行政区的name，我之前的实现方法都是用一个新的图层，专门来加文字注记，但是有一点，需要知道这个图形的中心位置，如果是规则的图形的话，可以很方便的找出中心位置，知道左下角和右上角坐标即可，假设记为coordinate,该方法的代码如下所示：n// 添加监测值nvar anchor_value = new ol.Feature(n geometr…
openlayers3—地图图层数据来源（ol.source）
ol.source.BingMaps,必应地图的数据；rnol.source.Cluster,聚族矢量数据；rnrnol.source.ImageCanvas,数据来源是一个canvas元素，其中数据是图片；rnrnol.source.ImageMapGuide,Mapguide服务器提供的图片地图数据；rnrnol.source.ImageStatic,提供单一的静态图片地图；rnrnol.so
OpenLayers深入浅出（4）—-定制绘图点、线、面对象实例
为地图添加绘制点、线、面步骤：n1、无可厚非对地图进行操作首先要添加map对象，以后将不再提示默认添加加map对象。n2、定义地图服务（在例子中定义了两个图层，一个wms图层，一个是矢量图层vectors）n3、定制标绘地图操作对象contros。n4、将地图图层添加到map的图层容器中。n5、将标绘操作对象添加到map的操作容器中n6、将地图缩放到全图范围内。（注意如果不调用这个代码，地图将不显
openlayer3 去除所有overlay
map.getOverlays().clear();
openlayers给定坐标连线
n//声明一个div,map的位置n
n//声明mapnmap = new ol.Map(n target : ‘map’,n view : new ol.View(n center : ol.proj.transform([105.571776,28.874441],’EPSG:4…
使用KML作为Openlayers的底图
最近的项目对地图的精度要求不高，就不需要搭建Geoserver了，用Openlayers加载vector做底图，比较了一下，使用了KML格式，找了一种shp转KML的方法rn rn到http://arcscripts.esri.com/details.asp?
Openlayers3，Layer是的定时刷新
Openlayers3 图层刷新
OpenLayers的地图上的距离和面积的测量
Measurern rn Measurern Path: rn Polygon: rn Regular Polygon: rn rn rn Optionsrn Geodesic rn Immediate: rn rn rn Measure: rn rn
openlayers—加载离线谷歌地图
接下来就是使用openlayers加载地图了。我这里使用的jquery…
openlayers 离线地图 瓦片
openlayers 离线地图 加载本地瓦片、google瓦片等 nn 1.加载google map的地形图,街道图,混合地图,卫星地图作为地图底图显示，在之上可叠加自己定义地图瓦片；nn 2.只加载自定义地图瓦片;nn 3.控制要显示的地图区域范围和缩放等级范围;nn 4.纯javascript脚本 支持asp,jsp,php,asp.net等
OpenLayers 3自定义地图工具条（一）
对于一个WEB地图应用来说，地图工具条可以说是不可或缺的一个部分，但由于一些样式、功能往往并不能满足实际项目需要，所以仍要对此部分进行定制，从这里将说明如何利用Oplenayers 3根据项目要求做一个定制化的工具条。n1、工具条功能内容内容n全屏、取消全屏n视图放大、缩小n全图【全图范围，初始化地图到默认的层级，以及预先设定的中心点】n地图标绘【点、线、面】n地理定位【省份定位】n地图切换【影像地
OpenLayers开篇： Hello OpenLayers
作为整个项目的一部分，要学习openlayers的基础知识，在此写下学习openlayers的基本思路，希望一起努力！n1、什么是openlayersnOpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，n用户还可以用简单的图片地图作为背景图，与
openlayers3中polygon上添加icon
openlayers3 polygon上添加icon
OpenLayer改变跳跃级别及压缩png来减少瓦片数据量
问题来源rn由于制作的瓦片数据量过大，我选择了偶数级才加载瓦片来减少数据量，但不幸的是，级别增长时奇数层瓦片也被读取，导致没有数据进入。rn跳跃级别的改变rn利用view中的zoomFactor来设置跳跃因子，例如我要做的就是设为4（默认是2），但要注意的是这个要配合最大分辨率及最小分辨率使用，例如：rnview:new ol.View(n projection: new ol.proj.P
OpenLayers类库的
1.rnAjax：顾名思义，用于实现Ajax功能，只是OpenLayers的开发者们把它单独写到一个类里了，其中用到了Prototype.js框架里的一些东西。同时，设计的时候也考虑了跨浏览器的问题。rnrnrnBaseTypes：这里定制了OpenLayers中用到的string，number 和 function。比如，OpenLayers.
Quartz2d （画线 矩形 圆 三角形 弧线 扇形 进度圈等）
/**nnQuartz2d的图形绘制APIn n */nnn”【画线drawLine】”n1.获取上下文件UIGraphicsGetCurrentContext();n2.设置起点CGContextMoveToPoint(ctx, 10, 10);n3.添加连接点AddLineToPoint(ctx, 110, 10);n4.渲染CGContextStrokePath(ctx);n5.设置线宽CG
Openlayers 显示坐标点
Openlayers 显示坐标点的两种方法： //1、显示所有坐标点 $(“input[@type=hidden][@id $= hidGeom]”).each(function()
Openlayer—第一课:概述
n n n OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。
OpenLayers之多源数据加载二：瓦片地图原理
目录nn一、瓦片地图简介nn二、LODnn三、瓦片计算nn3.1、切片方式nn3.2、瓦片数量计算nn3.3、瓦片坐标系nn四、分辨率nn4.1、墨卡托投影坐标系下的分辨率nn4.2、OpenLayers默认使用的分辨率nn一、瓦片地图简介nn 瓦片地图（切片地图）源于一种大地图解决方案，针对一整块非常大的地图进行切片，分成很多相同大小的小块地图，在用户访问的时候
OpenLayers 3 之 地图样式（ol.style）详解
地图样式是由 style 类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层。 矢量图层样式可以事先写好，写成静态的，矢量图层直接按照定义好的样式渲染，也可以动态使用样式的 set() 方法，但是要注意刷新矢量图层，重新渲染，否则动态样式不生效。
（转）PostGIS+QGIS+GeoServer+OpenLayers实现数据的存储、服务的发布以及地图的显示…
http://blog.csdn.net/gisshixisheng/article/details/41575833rn标题比较长，主要呢是实现以下几点：rn1、将shp数据导入到PostGIS中；rn2、Geoserver发布WMS服务；rn3、Openlayers调用Wms服务rn rn首先，下载安装软件。
openlayers入门开发系列之地图模态层篇
本篇的重点内容是为了到达自己想要的区域高亮效果，利用openlayers结合turf.js实现地图模态层功能，效果图如下：rnrnrn实现思路rnrn利用turf.js提供的difference相差函数，计算最大四至和裁剪区域的差值，这里的最大四至即：（-180,-90,180,90），由于底图是墨卡托投影坐标系的，所以我的代码实现过程中把经纬度转换墨卡托投影坐标
openlayers5.x结合webpack4.x实现模块化引用
一、问题来源分析：openlayers5.x以来采用的是ES6（ECMAScript 6，注：ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript 。详见：http://es6.ruanyifeng.com/#docs/intro）标准,里面有些新的语法如import、…
OpenLayers使用ArcGIS发布的切片
目录nn载入数据nn选择图层nn切图nn切图加载到服务nn载入数据nn打开【ArcMap 10.2】nnnn默认情况下，程序会弹出下图：nnnn这里面是之前打开的，可以直接双击，就可以打开图层了，不过比较慢，可以等会；如果出现的和我的不一样，那么，可以在【file】中的【open】中，打开数据。nnnn找到文件夹【MarsGIS_Equi0_v21】，然后打开红框中的文件。nnnn选择图层nn这里…
OpenLayers3学习(二)–鼠标移动事件
在Web地图应用开发过程中，最常见的事件之一就是使用鼠标在地图上移动，这里我们利用(一)中的地图服务，在此基础上创建一个鼠标移动的事件，代码如下：rnnn n Tiled ArcGIS MapServern n n n n n .mapn n width: 1000px;n height: 700px;n n n n n n
Openlayers3学习心得之Cluster
前言nn nn最近在学习开源地图库——Openlayers3，将自己的一些学习心得分享出来，第一次写文章，望支持。nn首先放几个链接，都是我学习过程中查阅资料用到的，新人接触这个值得好好学习一下：nn简书——Openlayer3入门指南nnOpenlayer3 基础教程nn开始你的第一个Openlayer3项目（导航栏的示例、API文档都很重要，新手一定要好好看哦）nn如何呈现一副地图就不在这里多…
openlayers2渐变色渲染
在前文中，讲到了oL2中唯一值渲染的实现方式，在本文讲述ol2中渐变色渲染的实现方式。
OpenLayers 学习（五） 根据经纬度用Marker在地图上添加标记
根据经纬度在地图上添加标记 n n n n n n n html, body width: 100%; height: 100%; margin: 0; padding: 0; n n n n var basePath = ‘198.165.26.54’;n var jsonStr='”M
Openlayers加载在线地图
html代码一map.html：rnn n n Map n n n n n n nrnrnhtml代码二test.html：rnnnnnload mapnn function init()n var subframe = document.getElementById(“subframe”);n subframe.contentWindow.initM
OpenLayers基础知识：
OpenLayers是一个开源的js框架，用于在您的浏览器中实现地图浏览的效果和基本的zoom，pan等功能。OpenLayers支持的地图来源 包括了WMS，GoogleMap，KaMap，MSVirtualEarth等等，您也可以用简单的图片作为源，在这一方面OPenLayers提供了 非常多的选择。 要使用OpenLayers，您可以到它的官方网站http://www.open…
openlayers4判断一个点是否在闭合图形的内部
在opanlayers4官方API已经有一个方法：intersectsCoordinate(coordinate)，用于判断一个点coordinate是否在闭合图形的内部，返回值为布尔类型的，true表示点在多边形的内部，false表示点不在多边形的内部。 n详细代码如下所示：nnnnvar geo = feature.getGeometry();//feture是几何元素nvar isIn = …
OpenLayers 在地图上画线，获取点坐标（以天地图为例）
应用场景： 最近在开发过程中，有个需求，需要在天地图中画线，结束后获取对应的坐标集合，查阅 OpenLayers API 和网上的相关资料后得以实现，特此记录。
vue中利用openlayers加载天地图
首先在vue中安装openlayes依赖，现在推荐使用ol，ol需要一个一个的引入，我嫌麻烦就直接用的openlayers，我把openlayrs定义为全局变量，下载完openlayers依赖包后，在main.js里面引入，nnimport ol from ‘openlayers;nn然后设置成全局属性nnVue.prototype.
openlayers与echarts3的结合使用
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问，echarts是百度的开源js图表库，下面简单讲解下如何在openlayers的地图‘贴’上echarts的图表。
OpenLayers3 学习心得（一）——体系结构
简单理了一下OL3的图层体系，目的是为了以后在开发过程中如何管理图层（添加、删除、显示控制），如何在临时图层上添加自己的要素（方便在查询、定位、绘图等功能中使用），其他的结构在本篇幅中并不涉及，从顶层至下依次介绍。rn1 框架rnOl3是一个js的类库，对象的创建、方法调用符合js标准，因此对象的调用和其他常见的js调用一致。rn2 地图MaprnMap是显示地图用的，同时也是最大的容器，里面可以
Openlayers4设置鼠标经过要素样式
使用Openlayers还是很容易实现的，代码如下： map.on(‘pointermove’,function(e) n var pixel=map.getEventPixel(e.originalEvent);n var feature=map.forEachFeatureAtPixel(pixel,fun…
OpenLayers官方示例详解十一之在自定义canvas元素上渲染OpenLayers的几何图形（Render geometries to a canvas）
目录nn一、示例简介nn二、代码详解nn一、示例简介nn 这个示例展示了如何将OpenLayers的几何图形渲染到任意的canvas元素上。nnnn二、代码详解nn ol.render.toContext()方法能够将任意canvas元素的绘图上下文对象封装成OpenLayers的ol.render.canvas.CanvasImmediateRender对象。nn ol.ren…
openlayers3 自定义鹰眼缩略图
openlayers3自带的鹰眼缩略图控件功能很局限，想到自己动手去做，结果很容易就做出来了，这里主要用到的是两个map互相联动
OpenLayers-2.13.1 要素的4个事件绑定featureclick nofeatureclick featureover featureout
OpenLayers 要素 事件 Examplen n n n #result n height: 60px;n width: 514px;n font-size: smaller;n overflow: auto;n margin-top: 5px;n n n n n Feat
openlayers地图上要素拖动交互
参考代码：//拖动交互nfunction addMoveInteraction()n var app = ;n app.Drag = function() nn ol.interaction.Pointer.call(this, n handleDownEvent: app.Drag.prototype.handleDownEvent,n …
