OpenLayers2笔记
此爱如少年
不学习就是落后
展开
-
Openlayers2图层加载(一)WMS图层
Openlayers+Geoserver来实现前端地图开发,是常见的一种地图开发操作方式。以下简单介绍js代码function loadWMSLayer(){ var map,baseLayer map = new OpenLayers.Map("map"); baseLayer = new OpenLayers.Layer.WMS( "basic",原创 2018-11-16 19:29:22 · 1844 阅读 · 0 评论 -
Openlayers2图层加载(二)加载矢量图层
加载矢量图层文件通过WMS请求获取到图层,其实是一张张图片拼在一起的。而矢量图层,是由矢量数据来构造的。OpenLayer是中支持的矢量数据文件格式较多,如GeoJSON、KML、XML等。以加载GeoJson为例,如下数据源:GeoJSON文件示例数据一级河流,命名为river.geosion。function initMap(){ var map,baseLayer map =...原创 2018-11-16 21:03:50 · 1864 阅读 · 0 评论 -
Openlayers2图层加载(三)使用WFS方式加载矢量图层
加载WFS图层上一篇加载的图层是以文件形式存在的,而实际项目应用中,矢量数据通常是存储在数据库中,通过请求来获取数据,在装载到矢量图层中。WFS是OGC开放联盟制定的一种标准地图服务协议,支持通过WFS请求来获取矢量数据,对数据进行操作等。以下简单介绍Openlayer加载WFS请求到的矢量数据。示例:function initMap(){ var map,baseLayer ma...原创 2018-11-16 22:00:21 · 1331 阅读 · 0 评论 -
Openlayers2实现的路径追踪动态效果
本功能将实现在给定的任意线路(线上可以有任意多个节点)上,要素在线的轨迹上进行匀速移动。track.jsvar map = new OpenLayers.Map("map");function initMap(){ var baseLayer = new OpenLayers.Layer.WMS( "basic", "http://localhost:...原创 2018-11-21 23:18:58 · 2322 阅读 · 6 评论 -
Openlayers2图层加载(四)marker图层
Marker图层marker图层非常适合在地图对一些特殊的点位标记进行展示,如想在地图上标记出所有的空气监测站、标记移动监测车的实时位置等。marker图层的使用方法很简单,主要涉及到以下几个Openlayers2对象:OpenLayers.Icon,图标对象OpenLayers.Marker,marker点对象OpenLayers.Layer.Markers,markers图层Op...原创 2018-11-17 11:52:49 · 1953 阅读 · 0 评论 -
利用Openlayers2实现WFS服务GetFeature操作
GetFeaute操作getFeature可以返回数据源中的要素的属性信息和坐标信息,支持条件过滤,是一种常见的从后台地图数据库中获取地理数据的手段。OpenLayers2可以轻松实现该操作,例如:从geoserver地图服务器上获取省会城市的点位,加载到地图上。示例如下:var map = new OpenLayers.Map("map");//getFeature数据请求funct...原创 2018-11-17 21:41:28 · 1454 阅读 · 0 评论 -
Openlayers2实现的地图闪烁
地图闪烁动画原理:利用window.setInterval()方法,间歇性的打开地图和隐藏地图,完成闪烁动画。示例:在一幅地图上中国地图上,实现青海省范围的闪烁动画。js代码如下:var map = new OpenLayers.Map("map");//闪烁的图层var wfsLayer;//闪烁开关var visble = false;function initMap(...原创 2018-11-17 23:14:25 · 1403 阅读 · 0 评论 -
openlayers2实现图层要素单击事件
openlayers2已经越来越少用了,但是由于一些老项目要维护的原因,偶尔还是要使用一下。经常不用,一些功能使用方法难免会生疏,所以最好趁着新鲜写下了。这次要实现的是在矢量图层上单击选择要素事件,示例代码如下:1、实现过程1)初始化地图先进行地图初始化,并定义了一个名为vectorlLayer的矢量图层。var map;var vectorLayer;//这此示例操作的图层func...原创 2019-08-26 23:33:37 · 4172 阅读 · 0 评论