Category: openlayers

openlayers3.x
openlayers4.x
openlayers5.x

OpenLayer之聚合标注和信息框弹出

聚合标注和信息框弹出,聚合图层的组成1、Vector的source,这里面主要放feature,这个source不是直接加载到Vector图层中的source for (var i = 0; i < dataSource.length; i++) n var coordi...

OpenLayers官方示例详解二:Drag-and-Drop Image Vector

目录nn nn一、示例概述nn二、代码详解nn2.1、创建DragAndDrop控件并添加到地图nn2.2、设置数据文件拖拉到浏览器后执行的操作nn2.3、样式函数nn2.4、显示新添加的要素的信息nn三、完整代码与测试nn四、总结nn一、示例概述nn    本示例实现了从文件夹中拖拉文件到浏览器从而加载地理数据的功能,地理数据是以图片的形式展示在浏览器。nn二、代码详解nn2.1、创建DragA…

[1]openlayers API之地图比例尺ScaleLine

参考书籍《WebGIS之OpenLayers全面解析》,研究OpenLayers的API,做一些exercise。n      地图比例尺表示地图上距离按一定比例比实际缩小的程度,表示为地图的缩小程度,又称为缩尺,这里用到的OpenLayers3封装的比例尺控件ol.control.ScaleLine。

web GIS地图打印

最近做了个小的功能,关于web GIS的地图打印功能,最终页就是将信息生成pdf。rn整个流程如下:rn1、在上侧的工具栏中添加一个打印按钮,如下图rnrn2、单击打印按钮,弹出打印设置对话框,设置打印信息,标题,纸张大小,图标,rn比例尺这一项没有用上,使用的是当前的地图比例尺,其中纸张大小,图标使用的是自定义标签从数据库中读取出来rnrn3、点击OK按钮后打印对话框关闭,使用鼠标右键画框选定需…

ArcGIS学习(五)OpenLayers调用WMS服务

OpenLayers:rnrnOpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能。OpenLayers支持的地图来源包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的图片作为源,在这一方面OPenLayers提供了非常多的选择。

openlayers结合百度地图API加载搜索定位功能

nnn//每次请求之前清空上一次搜索的图层 n searchPlaceLayer.getSource().clear()n $.ajax(n //url中的参数含义参见百度地图官网webAPI文档n url: ‘http://api.map.baidu.com/place/v2/search?query=大唐芙蓉园&region=西安市&p…

OpenLayers(Layer1)

添加4个图层,注意每个图层的属性设置:rnrnnnnn创建一个简单的电子地图nnnnnnnn var map; n var wms_base;n function init()n map=new OpenLayers.Map(‘map_element’,);n wms_base=new OpenLayers.Layer.WMS(n ‘Base Layer’,n ‘http://v

Openlayer图层载入时进行坐标系的转换

Openlayer地图和要添加的图层坐标系不一致的时候,需要进行转换,如下例所示:nnvar format = new ol.format.WKT();nvar feature;n$.each(data, function (i, link) n feature = format.readFeature(link.geom, n dataProjection: ‘EPSG:43

GIS程序开发-geoserver与OpenLayers配置入门

geoserver与OpenLayers配置入门rnrngeoserver与OpenLayers配置入门rn目录rn1    准备工作    4rn1.1    需要用到的程序和资料    4rn2    地图格式转换方式(一)    5rn3    地图格式转换方式(二)    5rn3.1    解压地图    5rn3.2    打开地图    5rn3.3

iconfont字体图标的使用

地图中使用图标的场景很多,之前一直都是将各图标放到一张大图里面,再使用css切图的方式读取,后来接触到iconfont,iconfont可以像字体一样使用css调整图标,简单好用功能强大!这里记录一下n1.注册登录阿里巴巴矢量图标库官网nhttp://www.iconfont.cn/nn2.新建项目n【图标管理】—>【我的项目】—>【新建项目】,创建自己的项目,保存和管理自己的图标

GIS-OpenLayer3探索:1 . 示例集合

Accessibility example(可访问的例子)n放大,缩小,鼠标移动地图nAnimation example(动画)n左右旋转180度n以罗马为中心每点击一次顺时针旋转90度n平行匀速移动地图到伦敦n弹到墨西哥n移动到伊斯坦布尔并且做弹动n旋转3圈后到罗马nTiled ArcGIS MapServer example(ArcGis 瓦片地图服务器示例)Attributions examp

OpenLayers源码学习(二) 加载城际通地图

背景:rnrn今天上班途中一直在回忆,我学习OpenLayers的过程。 rnrn记得几天前也就是3.31号的周末,整个人都要抓狂;已经学了一个多礼拜了但是依然不知道从哪里入手。rn昨天成功debug了地图移动触发事件的流程, 突然有种豁然开朗的感觉。rnrnrn流程:rnrn1.熟悉OpenLayers 基本的操作,载入地图加载控件.rn    了解 “比例尺”  “瓦片”  “墨卡托投影”

openlayers3应用(二):加载百度离线瓦片

上一篇文章介绍了使用openlayers3加载百度在线地图,对某些项目或应用场景比如不允许上外网的单位,某些项目只针对一定区域地图加载应用,比如一个县的地图,可以采用下载百度瓦片地图,在服务器或者本机单独部署的方式进行。rn本篇主要讲述如何使用openlayers3调用下载的百度离线瓦片地图。瓦片地图下载器,网上有很多,在此不做详细描述。rnOpenlayers3加载离线百度瓦片地图,效果以及代码

OpenLayer加载离线百度地图实现及其问题

OpenLayer加载离线百度地图实现及其问题rn1.离线地图使用切片为太乐地图下载器下载,下载格式为百度地图切片,下载方法可看我之前写的博客;rn2.使用百度API转换坐标后定位北客站准确,使用ol api转换地点偏移较大,猜测是由于百度地图切片还存在偏移算法问题,请大神指教;rn3.搭建虚拟地图服务路径之前博客已详细介绍;rn4.参考资料rnhttp://www.360doc.com/cont

openlayers第一天

openlayers第一天,加载高得地图nn废话少说,先上代码,以下代码中非js部分是从官网拷贝,官网也有诸多例子可供学习。nnnn

n Accessible Mapn

二三维联动开源框架:ol3-cesium

OL3-Cesium是OpenLayers和Cesium的集成库,使用openlayers3创建自己的地图,同时使用Cesium实现在地球上的三维可视化。

Openlayers入门

最近在研究GIS相关的内容,因此接触了Openlayers这一开源JS框架。一开始感觉对不怎么会使用和调试JS的我来说,发现这个东西写出来的东西好难好难调试,又不会用JS调试器,只得慢慢的alert()。rn         经过一段时间的调试之后发现原来所谓的JS也并没有那么的难,仅仅使用简单的alert()就能完成调试,当然前提是对于Openlayers有一定的认识。个人推荐首先读懂网上的示例

openlayer学习总结

最好的学习素材(http://openlayers.org/en/latest/examples/)n学习的主要点Map(View,Layer(Source(Feature(ol.geom.Point…))))n地图中主要的存在是图层Layer,这个Layer需要依赖于某个创建好的Map,图层中可以展示各种各样的点线面,对于这些点线面可以使用东西进行装饰他们,无论是点线还是面,都通通称呼为要素Fea

openlayer 测量

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

OpenLayers的使用

找个好工作,好难,回学校好好学习,明年实习吧!nnn  n         基本函数nnn1.    初始话一个MAP对象nnVarmap=new OpenLayers.Map(param1, param2 );参数一指示用于显示地图的HTML页面中元素的ID;参数二是一个JSON数据对象,包含一组键值对;nn2.    创建一个WMS的图层对象nnVarwms=new

openlayer2.X通过WMTS服务加载ArcGIS服务

ArcGIS10.1开始的Server版本切片服务可以支持WMTS服务,服务切片后自动支持WMTS服务,那么如何在一些开源客户端中使用WMTS服务,例如openlayer;首先要说的是openlayer2.X版本和ol3版本略有不同。rn在使用之前首先要获取WMTS的描述文件,在切片后的server服务中通过如下方式获取rnrnrn获取后可以通过如下代码添加WMTS服务,需要之一的是对于地理200

OpenLayer4实现卷帘效果

一、用途:卷帘效果在多个图层叠加的时候会用到。但是还想两个图层相互切换或者两个图层在一块,这个时候就用到卷帘效果,我们可以把这个卷帘做成一个label可以来回拖动,这样既可以达到控制效果,也很美观。nn先来张效果图:nnnn二、全部源码nnnnn

n 地图卷帘效果

openlayers获取一个图形的中心区域

在项目中需要做到点击一个市下面的不同区县,然后定位到该区县的中心位置,已知每个区县的多边形边界,从opanlayers API上找到方法ol.extent.getCenter()貌似可以解决这个问题,具体代码如下所示:nvar extent = ol.extent.boundingExtent(feature.getGeometry().getCoordinates()[0]); //获取一个坐标…

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

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

OpenLayers3+OpenStreetMap初探

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

如何在 OpenLayers 中调用中间件发布的WGS84卫星影像

一、概述rnrnrn《水经注地图发布服务中间件》发布的谷歌卫星影像瓦片数据支持在OpenLayers中调用,这里以“杭州市”谷歌卫星地图作为调用示例,旨在说明如何在OpenLayers中调用中间件发布的卫星影像。rnrnrnrnrn二、如何下载杭州市谷歌卫星地图rnrn在万能地图下载器中,选择地图类型为“谷歌地球”,数据类型为“卫星”地图,如下图所示。