openlayers3 第4页

OpenLayers3入门篇-单击事件

单击事件的绑定在OpenLayers的官方API中有专门的事件函数（ol.interaction），对于事件的绑定也比较方便，但OL没有右键事件，绑定事件的对象是针对整个地图对象，对相应的地图层操作时需要对event对象深加工，需要进一步判断和提取对象。第一步：varselectClick=newol.interaction.Select({condition:ol.events.conditio

adventure_xph·2020-08-15 18:32

瓦片地图之百度地图（openlayers）

在OpenLayers3中，默认使用的瓦片地图的坐标系是如何定义的？经分析可知，OpenLayers3的瓦片坐标系的原点在左上角，向上为y轴正方向，向右为x轴正方向。

zxc13552314286·2020-08-15 18:59

使用OpenLayers根据经纬度对地图进行单个标点，以及点击标点弹框的实现（没有从后台获取经纬度数据）

说明：OpenLayers3详细官方API文档：http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/index.htm1.该例子为页面在固定经纬度的情况下对地图进行单个或者多个标点

java_codeMan·2020-08-15 18:19

openlayers加载切片地图

openlayers2和openlayers3加载切片地图使用的接口是不同的。下面做分析。

weixin_34034670·2020-08-15 17:39

OpenLayers 3/4 加载 Baidu Maps 瓦片(偏移更小)

通过OpenLayers3/4的ol.layer.Tile可以加载若干互联网底图服务，【扯淡大叔】的《OpenLayers3Primer》书中“万能瓦片地图加载秘籍”一节列举了各种地图的具体调用示例。

weixin_34185512·2020-08-15 17:39

如何使用Openlayers 3加载谷歌离线地图

使用Openlayers3调用地图服务说明：这里使用ol.source.XYZ（更多语法请参考这儿.）来调用地图服务。

AG2016·2020-08-15 17:33

Openlayers3点击获取坐标

只能在火狐ie下运行，gogel内核的获取不了坐标不想深入，只是demo给你们看看。效果如下1.第一步创建重要mapvarmap=newol.Map({layers:[baiduMapLayer],target:'map',view:newol.View({center:[103.694,27.311],//剧中坐标projection:'EPSG:4326',//地图类型zoom:17//放大等

JackChenKing·2020-08-15 17:01

openlayers扩展：风场可视化（wind-layer）

windLayerapi使用示例这里主要为windlayer关于在openlayers3-4版本内使用的相关接口及参数说明在加载时，主要读取的数据来源格式为json，而我们一般获取到的数据主要为netCDF

熠熠仔·2020-08-15 17:00

openlayers 加载ArcGIS 切片地图

我这里使用的版本是openlayers3.11.1主要的方式是使用ol.source.XYZ这个类来加载切片，ArcGIS生成切片的目录文件的方式为：\L10\R00000181\C0000034a.png

带着天使反上帝 - Kaybee·2020-08-15 17:56

OpenLayers 3 之动态点扩散效果

当某个地方发生一些事情之后，如果我们添加一个静态点在地图上，并不能引起注意，那我们可以放置一个动态的点，类似于在水中投入一个石头，水波扩散的效果，象征发生的事件有一定的影响区域，那么，我们如何利用OpenLayers3

庆祝亚运会·2020-08-15 17:43

Openlayers3事件体系详解

地图上的各种事件触发到底是怎么回事？熟悉前端的肯定知道JavaScript的事件机制，openlayers既然是javascript实现的，那么它就也不例外，也遵循W3C的标准，只不过是openlayers进行的简化实现。文章首先讲解openlayers的事件结构实现，然后结合“切片WMS数据源”（ol.source.TileWMS）对象的事件机制进行实例分析。一.介绍事件机制的设计模式是观察者模

msnaruto·2020-08-15 17:09

openlayers3 修改投影坐标系

1.页面加载proj4.js文件百度下载2.http://spatialreference.org搜索投影坐标系，如：Beijing54，找到自己所需EPSG，如：EPSG:2401，点击。找到Proj4jsformat，点击后，复制Proj4js.defs["EPSG:2401"]="+proj=tmerc+lat_0=0+lon_0=75+k=1+x_0=25500000+y_0=0+ellp

leobbis·2020-08-15 17:37

openlayers3应用（三）：百度地图“纠偏”

前两篇文章介绍了openlayers3加载百度在线和离线瓦片地图，页面上能够正常显示。

iteye_11787·2020-08-15 17:05

openlayers3应用（一）：调用百度离线瓦片地图

上一篇文章介绍了使用openlayers3加载百度在线地图，对某些项目或应用场景比如不允许上外网的单位，某些项目只针对一定区域地图加载应用，比如一个县的地图，可以采用下载百度瓦片地图，在服务器或者本机单独部署的方式进行

iteye_11787·2020-08-15 17:05

OpenLayers学习笔记高级篇（三、地图动画）

在OpenLayers3中，动画是随处可见的，比如平移地图时，地图移动会有惯性，停止移动后，还会继续沿着之前的方向移动一会。

MagicMHD·2020-08-15 17:22

OpenLayers3入门篇-点在线上的运动

这条线切割成很多的坐标，然后这个点沿着这些坐标前进，以下代码是参考官方案例做了修改，还有很多不足之处先将得到的两个点的坐标从字符串转换成数字类型，再传入封装的方法计算出两个坐标之间的距离（单位：米）注：OpenLayers3

adventure_xph·2020-08-15 17:18

OpenLayers学习笔记中级篇（五、地图事件）

在OpenLayers3中，同样存在非常多的事件，比如鼠标左键单击，双击等等。同时还有一些用于各个模块之间进行协作使用的事件，比如ol.Map的postrender和propertychange事件。

MagicMHD·2020-08-13 12:45

用openlayers3绘图(点、线、圆、正方形....)

用openlayers3绘图(点、线、圆、正方形…)最近项目中使用到了openlayers3，在此记录下用openlayer实现绘图功能实现该功能的主要步骤：使用ol.style.Style()实例化一个对象

weixin_44592912·2020-08-12 00:36

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

1直感觉OL3的轨迹回放使用度不高，在点的数量变少的时候开始跳动，很不唯美，，所以结合百度路数的开放源代码实现轨迹回放的完美滑动，如下图：附上代码（代码复制即可运行）：AccessibleMap//如果要支持低版本浏览器你可以取消注释-->a.skiplink{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;heigh

捣net菜菜·2020-08-11 18:14

OpenLayers 3 之 map样式（ol.style）详解

OpenLayers3之地图样式（ol.style）详解地图样式是由style类控制的，其包含了地图样式的方方面面，例如，填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等，样式一般针对矢量要素图层

jyj545·2020-08-10 17:46

openlayers3加载各种底图，补齐中..

不管是加载在线还是离线的底图，无非是按照一定的规则，正确定义图层（layer）,然后将图层添加到map对象中，这里我map对象使用的坐标系为WGS844326，openlayers版本为3.17。1.在线天地图交通图vartian_di_tu_road_layer=newol.layer.Tile({title:"天地图路网",source:newol.source.XYZ({url:"http:

jiym·2020-08-09 13:27

OpenLayers3（二）获取可视区域中心

惯例：OpenLayerAPI需求因为项目用到了谷歌离线地图，并且其中有一个保存视图功能：保存现在可视区域中心点坐标，下一次加载的时候地图中心设置为上一次设置的坐标定位因为项目同时用到了百度离线地图，其中百度离线地图有这么一个apimap.getBounds():返回地图可视区域，以地理坐标表示所以我在百度离线地图中获取中心点坐标就是map.getBounds().getCenter();但是因为

天空影·2020-08-09 09:07

Openlayer3 入门教程文档，免费分享

目录基本概念4Map4View4Source5Layer5总结6Openlayers3实践71地图显示71.1创建一副地图71.2剖析你的地图81.3Openlayers的资源112图层与资源122.1

码上有你&·2020-08-09 01:18

搭建简易Web GIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3

原作者和出处——天靖居士：http://www.cnblogs.com/kkyyhh96/海阔凭鱼跃，天高任鸟飞搭建简易WebGIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers31

Star0Dust·2020-08-05 12:17

OpenLayers3的轨迹回放

OpenLayers3实现轨迹回放需要动画操作，官网上的例子用的是postcompose，但是还可以使用javascript中setInterval和setTime.我的例子是按官网上来的http://

weixin_30920513·2020-08-01 03:03

使用openlayers3+中添加右键菜单

openlayers3+中没有直接的监听地图右键的功能，但是我们可以通过使用jquery监听地图所在的html元素的右键事件来实现。

jiym·2020-08-01 02:06

openlayers3中三种动画实现

一、.在div中使用CSS3动画，以overlay的形式添加1.先为一个div创建css.css_animation{height:50px;width:50px;border-radius:25px;background:rgba(255,0,0,0.9);transform:scale(0);animation:myfirst3s;animation-iteration-count:infin

jiym·2020-08-01 02:05

OpenLayers3的重要补充：JSTS

目前原生的OpenLayers3并不支持空间拓扑关系查询，此类库可以作为重要的补充。

学大大·2020-07-30 18:08

openlayers3添加地图控件

//添加属性控件map.addControl(newol.control.Attribution());//添加鼠标定位控件map.addControl(newol.control.MousePosition({undefinedHTML:'outside',projection:'EPSG:4326',coordinateFormat:function(coordinate){returnol.

weixin_33929309·2020-07-30 17:56

Openlayers3地图对接CesiumJS

为了使已有的Openlayers3地图对接Cesium效果，找到了ol-cesium库，一开始看到要求说至少5.X版本以上感觉没戏……后来看到篇论文说的是对接OL3的，瞬间反应过来肯定是版本问题。

猜测7·2020-07-30 15:36

OpenLayers 3 扩展插件收集

OpenLayers3扩展插件Awesome-OpenLayersOL3扩展ol3-ext很酷的一组OpenLayers3(ol3)扩展：编辑-选择控件、CSSpopup（弹出信息框）,FontAwesome

a5901768·2020-07-30 14:05

WebGIS常用的空间分析,地图发布，底图自定义，QGIS插件，地理矢量数据格式转换工具等资源汇总

目前原生的OpenLayers3并不支持空间拓扑关系查询，此类库可以作为重要的补充。通过此类库，可以判断多种空间几何的位置关系，最初建立这个工程的目的是为web地图应

逸然健在·2020-07-30 13:30

3月题外：关于GeoServer和OpenLayers3实用开源插件或组件的总结

Geoserver篇注意：1）用法GeoServer-Extension的使用方法：将jar包直接放入部署在tomcat上的geoserver/WEB-INF/lib文件夹中2）在安装插件时，一定要注意版本是否匹配，本文介绍的插件均默认在GeoServer2.11环境下3）官方文档地址http://docs.geoserver.org/maintain/en/user/extensions/ind

feng020a·2020-07-30 13:09

[OpenLayers 3] 一个简单的地图

OpenLayers3地图示例//创建地图newol.Map({//设置地图图层layers:[//创建一个使用OpenStreetMap地图源的瓦片图层newol.layer.Tile({source

沈荣荣·2020-07-30 01:52

Openlayers3加载DXF文件作为底图实现

Openlayers3是一款优秀的地图渲染JS开源框架，它支持各种通用GIS数据源的地图渲染，官网地址openlayers.org，官网提供了详细的API和案例。

kuaikelong·2020-07-29 20:38

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

根据这篇文章改写而来，主要实现了在地图上点击弹出气泡框，用来展示经纬度，当然你也可以改成展示其他内容。OpenLayersMapQuestDemohtml,body,#map{padding:0;margin:0;height:100%;width:100%;}.mouse-position-wrapper{width:300px;height:29px;color:#FF00FF;positio

GISER_A·2020-07-29 17:07

OpenLayers3 学习心得（三）——绘图

主要介绍如何使用ol3绘制点、线和面，ol使用ol.interaction.Draw方法和用户进制交换并绘制图形。1创建过程（1）新建名称为draw-feature的html文件；（2）添加引用，如下所示：（3）在body标签中添加页面的顶部布局、地图的容器和绘图类型的选择控件：如下OL3Example绘制要素使用ol.interaction.Drawinteraction示例.地物类型 None

GISerHou·2020-07-29 00:05

Openlayers3学习心得之LineString

前言关于LineString，官方的示例给的是鼠标画点，自动连线，并添加箭头（LineStringArrows示例），而在我们实际应用中，往往需要手动录入标记点，然后进行连线并添加箭头，下面就分享我使用LineString的过程：1.首先是静态数据的：-先准备一个source图层用来画点：varsource=newol.source.Vector();-然后是录入标记点的信息，所有点共同构成一个f

进击的小宇宙·2020-07-27 14:18

Openlayers3 绘制圆

需求中出现了在地图上画圆的需求，此需求在ol3以上的版本的ol是很简单的，直接上代码：//创建一个数据集合varfeatures=newol.Collection();//100个圆for(vari=0;i<100;i++){varcenter_x=120+Math.random()*0.1;varcenter_y=30+Math.random()*0.1;//圆形,中心点和半径varcricle

jjxliu306·2020-07-16 01:19

OpenLayers3+OpenStreetMap初探

首先到http://www.openlayers.org/下载OpenLayers，我下的版本是v3.4网上很多中文教程基本都是2的，3的比较少，只能慢慢摸索，而且我是个web、js小白。最开始接触肯定要从它的quikstart开始，打开doc下的quickstart.html，下面是它给的事例，直接复制到html里就可以运行，.js是直接连到网站的.map{height:400px;width:

黄大仙儿·2020-07-16 00:30

Openlayers 3 linedash画虚线

Openlayers3linedash画虚线虚线样式如下newol.style.Style({fill:newol.style.Fill({color:'#0044CC'}),stroke:newol.style.Stroke

暴烈骑士·2020-07-15 00:09

Openlayers3 轨迹回放，点在线上运动，解决linestring坐标显示不全

记录基于geoserver地图服务，Openlayers3在web前端实现车辆轨迹回放功能，并记录和解决过程中出现的linestring只描绘部分经纬度坐标问题。

暴烈骑士·2020-07-15 00:08

[原创.数据可视化系列之一]使用OPENLAYERS 3 显示聚合数据

使用openlayers3地图组件比较容易解决这个问题，关键是ol.source.Cluster对象，

数据秀·2020-07-13 22:30

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

Ol3selectbody,#map{border:0px;margin:0px;padding:0px;width:100%;height:100%;font-size:13px;}.form-inline{position:absolute;top:10pt;right:10pt;z-index:99;}varpoint="POINT(103.58429749802736.1190864502

leopold_2017·2020-07-12 17:16

openlayers3投影转换——proj4js

proj4jsproj4js是一个转换点坐标从一个坐标系到另一个坐标系的JavaScript库，包括数据转换。这个库是由proj4和gctcpC库转换而来的JavaScript版本。在浏览器端进行转换的可能允许将存储在不同的投影存储的地理数据可以在基于浏览器的Web地图应用应用中结合到一起。proj4js是metacrs项目组的一部分，使用和PROJ.4相同的MIT许可。proj4js和openl

学大大·2020-07-10 13:16

利用OpenLayers3在地图上显示标记并点击标记后显示弹出框

前言在上一篇《利用全能电子地图下载器+GeoWebCache发布ArcgisServer缓存瓦片过程全记录》中，我们利用GeoWebCache作为瓦片地图服务器发布了瓦片地图。虽然在其中可以直接浏览，但是在GeoWebCache1.10.0中，官方内置的是OpenLayers2的版本，这个版本比较老旧，不能很好的适应诸如触屏设备等应用环境。所以，我想利用OpenLayers2的升级版OpenLay

mgsky1·2020-07-07 17:37

OpenLayers3 学习心得（二）——开发配置

由于ol是js类库，因此在开发时只需要将ol引用到页面中。1类库下载编译好的类库可以到ol的官网下载，但是由于国内屏蔽了github可能下载不了，解决方法：可以重新定向host；也可以到csdn上下载：http://download.csdn.net/download/longshengguoji/8053751没有积分的可以到网盘：http://yunpan.cn/cAreGWFvrcTkE访问

GISerHou·2020-07-06 08:12

基于openlayers3调用来自geoserver的wms服务

基于openlayers3调用来自geoserver的wms服务.map{height:400px;width:100%;}OpenLayers3exampleMyMap//基于openlayers3functioninit

疯羊先森·2020-07-05 19:12

openlayers3-经纬度坐标系转平面坐标系算法--米勒投影

地图组件是前端数据可视化非常重要的一个组成部分，根据geoJSON这种通用数据格式来生成地图是比较便捷的做法。不过对于地图坐标转换的算法，还是了解一些比较好，对于设定高阶地图组件会有帮助。这里介绍一下在米勒投影的地图上，如何将经纬度转换为平面坐标的算法，这个算法在生成世界地图的时候比较常见。（维基百科-米勒投影）//lon经度，西经为负数//lat纬度，南纬是负数functionmillerXY(

haha_ying_haha·2020-07-05 18:38

openlayers3 切换底图控件

效果如以下1影像图2.平面图具体代码ol.control.LayerSwitcher=function(opt_options){varoptions=opt_options||{};vartipLabel=options.tipLabel?options.tipLabel:'Legend';this.mapListeners=[];this.hiddenClassName='ol-unselec

JackChenKing·2020-07-05 17:16

推荐频道

openlayers3