WebGIS-Openlayers专题
文章平均质量分 85
韩慧兵
项目经理
展开
-
OpenLayers-Editbar控件
利用Editbar控件,可以在OpenLayers地图上绘制点、线、面图元。1. 创建OpenLayers地图对象,并添加一个WMS图层作为底图。2. 创建OpenLayers的Vector Layer 绘制的点、线、面图元需要有一个Vector图层进行存储。1 var vlayer = new OpenLayers.Layer.Vector( "Editable" );原创 2015-10-30 13:26:04 · 570 阅读 · 0 评论 -
OpenLayers系列之-Geometry格式转换
Geometry有多种格式,例如WKT, GML, KML等格式。OpenLayers提供Geometry格式的转换方法,可以实现不同格式的Geometry的转换。Geometry格式转换类位于OpenLayers.Format命名空间下。本文以WKT--> GML的转换来说明OpenLayers Geometry格式转换方法的使用。1. 定义WKT Geometryvar wkt转载 2016-12-24 15:45:03 · 4666 阅读 · 0 评论 -
基于Solr的空间搜索
如果需要对带经纬度的数据进行检索,比如查找当前所在位置附近1000米的酒店,一种简单的方法就是:获取数据库中的所有酒店数据,按经纬度计算距离,返回距离小于1000米的数据。这种方式在数据量小的时候比较有效,但是当数据量大的时候,检索的效率是很低的,本文介绍使用Solr的Spatial Query进行空间搜索。空间搜索原理空间搜索,又名Spatial Search(Spatial Que转载 2016-12-24 15:45:48 · 307 阅读 · 0 评论 -
使用Lucene索引和检索POI数据
1、简介关于空间数据搜索,以前写过《使用Solr进行空间搜索》这篇文章,是基于Solr的GIS数据的索引和检索。Solr和ElasticSearch这两者都是基于Lucene实现的,两者都可以进行空间搜索(Spatial Search),在有些场景,我们需要把Lucene嵌入到已有的系统提供数据索引和检索的功能,这篇文章介绍下用Lucene如何索引带有经纬度的 POI信息并进行检索。2转载 2016-12-24 15:46:29 · 274 阅读 · 0 评论 -
openlayers系列之基于openlayers实现聚类统计展示
效果:实现关键点:实现代码:1、数据格式2、设置显示样式var style = new OpenLayers.Style({ fillColor: "#ffcc66", strokeColor: "#ff9933", strokeWidth: 2, label: "${count}", f转载 2016-12-24 15:48:00 · 2193 阅读 · 0 评论 -
大量POI的解决方案2
概述在前面的文章中,讲述了通过“抽稀+后台生成图片”的方式解决大量POI点展示的一种思路,后面看了tilestache的矢量切片方式,自己仔细思考了下,提出了本文大量POI点的展示解决方案。 tilestache大概看了下tilestache,理解了下,大概解决思路是这样的:随着地图四至范围的变换,实时的去请求数据,并将数据在前段渲染,这样就大大提升了大量点的展示的效率问题。转载 2016-12-24 15:48:32 · 250 阅读 · 0 评论 -
抽稀+图片生成
概述:在上文“ 大量POI点展示的一种解决方案”中,介绍了在在后台将POI生成图片在前台展示,文章中没有涉及到点的抽稀问题,也就是当点的数据量非常大的时候,这种展示方式还是会有一定的效率问题,在本文,书接上文,介绍一种点抽稀的算法,并结合上文,实现大量poi点的高效展示。 效果: 实现思路:1、点抽稀与图片生成package com.lzugis转载 2016-12-24 15:49:53 · 1502 阅读 · 0 评论 -
大量POI点展示的一种解决方案
概述:不论是在Arcgis for js还是Openlayers中,当POI点比较多的时候,在前台页面的展示在效率上是一大问题。经过一段时间的研究,发现百度地图在这一问题上的处理思 路比较好:将要展示的POI点在服务器端生成图片,页面只调用图片的话效率会比较高。本文讲述如何在Java后台实现POI点在服务器端的实时生成以及在Openlayers2的展示。 实现后效果:转载 2016-12-24 15:50:29 · 671 阅读 · 0 评论 -
Openlayers2中聚类的动态实现
概述:前面的文章中,讲述了Arcgis for js中聚类分析与展示,在本文,讲述如何在Openlayers2中聚类分析的实现。 实现效果: 实现:主要分为:1、点的聚类;2、聚类点随着地图缩放的更新;3、聚类点的详细。1、点的聚类与更新var style = new OpenLayers.Style({ pointRadius: "$转载 2016-12-24 15:51:09 · 805 阅读 · 1 评论 -
Openlayers2卷帘功能的实现
概述:在WebGIS开发中,经常会有用户提需求,要实现卷帘功能,卷帘功能主要是实现两张图之间的对比。在前文中,讲到了openlayers3以及Arcgis for js中卷帘的实现,在本文讲述如何在openlayers2中实现卷帘功能。 结果展示: 实现代码:在此,扩展了一个名为Swipe的Control,Swipe的代码如下:(猛击)/* * * @r转载 2016-12-24 15:52:13 · 801 阅读 · 0 评论 -
Openlayers3中统计图的实现:结合highcharts实现统计图
概述:在前文中讲到了在Arcgis for js中统计图的实现,在本文,讲述在Openlayers3中结合highcharts实现统计图。 实现:在Openlayers3中实现统计图比较方便,通过ol.Overlay即可。首先,了解下Overlay。在OL3的借口文档中,Overlay的描述如下:An element to be displayed over the map a转载 2016-12-24 15:52:53 · 531 阅读 · 0 评论 -
Openlayers2中统计图的实现
概述:在前文中,介绍了Arcgis for js和Openlayers3中统计图的实现,在本文,书接上文,介绍在Openlayers2中,统计图的实现。 实现:在Openlayers2中,popup的概念是:A popup is a small div that can opened and closed on the map. 所以,在OL2中,可以用popup来实现统计图的转载 2016-12-24 15:53:39 · 565 阅读 · 0 评论 -
结合heatmap.js,在Openlayers中如何实现热力图
概述:本文讲述结合heatmap.js,在Openlayers中如何实现热力图。 heatmap.js简介:Heatmap 是用来呈现一定区域内的统计度量,最常见的网站访问热力图就是以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域的图示。Heatmap.js 这个JavaScript 库可以实现各种动态热力图的网页,帮助您研究和可视化用户的行为。 实现转载 2016-12-24 15:54:26 · 2774 阅读 · 1 评论 -
Geotools读取shp文件并在Ol2中展示
概述:在前面有一篇文章中讲到了GDAL将shp转换为GeoJson的实现,以及ol2、3以及Arcgis for js中GeoJson的加载,今天呢,书接上文,介绍Geotools如何读取shp文件并在ol2中展示。 读取shp"1732791" snippet_file_name="blog_20160628_1_4602229" name="code" class="j转载 2016-12-24 15:49:05 · 418 阅读 · 0 评论 -
OpenLayers3 之 使用地理数据传输格式GeoJSON
目录(?)[-]GeoJSON如何利用它构建应用PS用户请求地理数据或者其他数据,服务器要以一定的客户端能够识别的数据 格式返回,数据格式是否高效,直接影响用户的体验!首先要求数据格式要是轻量级的,还要求客户端处理数据方便快捷,相较于XML,JSON满足这两个要 求,且目前应用广泛,非常流行。而在传输地理信息方面,相应有GeoJSON。下面咱就来了解一下GeoJSON,并看看它转载 2016-12-24 15:44:22 · 1390 阅读 · 0 评论 -
GeoJson+Openlayers展现后台服务提供的单点、多点的元素信息,并依据条件变化元素如元素色彩、图标
【目标1】通过Openlayers展现后台服务提供的一个点的元素信息。 【步骤】a.地图服务、b.后台查询点经纬度、c.后台拼写JSON串服务、d.Ajax异步获取JSON串、e.页面展现 a.地图服务:依据个人地图服务而定,这里不累述。 b.后台查询点经纬度:后台查询数据库,获取点的经纬度[125.37673830988,43.858870032345],这里不转载 2016-12-24 15:43:15 · 1190 阅读 · 1 评论 -
Openlayers-OpenLayers中基于Filter的WFS查询
打算实现的功能:基于OpenLayers实现对地图中城市POI模糊查询,并且能提 供基于位置的查询(GIS中就是基于圆的查询,通俗的说就是当确定用户位置后,可以查询用户周边一定范围内的POI)和基于多边形的查询(用户自己画出多 边形,实现在多边形范围内的POI查询),设定的界面如下图所示1. 界面实现页面的body主体实现如下: body onload="in转载 2016-12-24 15:41:01 · 2418 阅读 · 0 评论 -
OpenLayers-Vector图层Feature选择工具
1、创建Vector图层1 var vlayer = new OpenLayers.Layer.Vector("Vector Layer");2 map.addLayer(vlayer);2、创建Select Tool1 // 创建select control2 var sf = new OpenLayers.Control.SelectFeature(vlayer原创 2015-10-30 13:26:02 · 1866 阅读 · 0 评论 -
OpenLayers-添加Marker
在OpenLayers Map添加Marker。1.创建Marker图层Maker由Marker图层进行管理var marker_layer = new OpenLayers.Layer.Markers("markers");2. 创建Marker对象 1 //创建Marker 位置 2 var pos = new new OpenLayers.LonLat原创 2015-10-30 13:25:59 · 5989 阅读 · 1 评论 -
OpenLayers-Vector图层上添加Feature
调用Vector Layer的addFeatures方法可以在Vector Layer上添加新Feature1. 定义WKT Geometryvar wkt = "POLYGON((0 0,0 90,180 90,180 0,0 0))”;2. 创建Vector图层var vlayer = new OpenLayers.Layer.Vector("Vector Lay原创 2015-10-30 13:25:56 · 10833 阅读 · 0 评论 -
OpenLayers-Geometry格式转换
Geometry有多种格式,例如WKT, GML, KML等格式。OpenLayers提供Geometry格式的转换方法,可以实现不同格式的Geometry的转换。Geometry格式转换类位于OpenLayers.Format命名空间下。本文以WKT--> GML的转换来说明OpenLayers Geometry格式转换方法的使用。1. 定义WKT Geometryvar wkt原创 2015-10-30 13:25:54 · 1833 阅读 · 0 评论 -
OpenLayers-绘制图元
本文介绍使用OpenLayers.Control.DrawFeature和OpenLayers.Handler.Polygon来绘制Polygon图元。绘制Point和Line与此类似。1. 创建Vector图层 1 var vlayer = new OpenLayers.Layer.Vector("dv_layer" );2 map.addLayer(vlayer);原创 2015-10-30 13:25:51 · 891 阅读 · 0 评论 -
OpenLayers-Map事件
OpenLayer的Map Event在Event.js文件的OpenLayers.Events中定义。 1 BROWSER_EVENTS: [ 2 "mouseover", //鼠标位于对象或区域上 3 "mouseout", //鼠标移出 4 "mousedown", //鼠标按下 5 "m原创 2015-10-30 13:25:42 · 600 阅读 · 0 评论 -
OpenLayers-加载地图数据(Google Map)
除了WMS地图外,OpenLayers可以直接添加Google Map, Microsoft Virtual Earth等地图。 1. 添加google map的key 使用google map的数据需要google map的一个key。OpenLayers的examples里面有一个key,可以直接使用。也可以在https://developers.google.com/maps原创 2015-10-30 13:25:40 · 1404 阅读 · 0 评论 -
openlayer中文api
http://www.openlayers.cn/cnapi/files/OpenLayers-js.html原创 2015-10-30 13:26:23 · 6338 阅读 · 0 评论 -
OpenLayers-控件篇
OpenLayers带有很多的控件,只需要添加简单的代码,就可以在 OpenLayers上添加控件。 OpenLayers控件位于OpenLayers.Control命令空间下。1. 图层Switcher控件(Layer Switcher) 图层Switcher控件用于切换OpenLayers Map上的图层。Layer Swither的类为:OpenLayers.Control.L原创 2015-10-30 13:25:34 · 1782 阅读 · 0 评论 -
OpenLayers-第一个程序
整理自:http://www.cnblogs.com/marsprj/archive/2013/02/18/2915443.htmlOpenLayers是一个javascript编写的开源WebGIS客户端软件,后端可连接标准的OGC WMS/WFS/WCS的WebGIS服务以及Google Map,Microsoft Virtual Earth等空间数据。 OpenLayers具有丰富的功能原创 2015-10-30 13:25:37 · 772 阅读 · 0 评论 -
OpenLayers-点击查询
OpenLayers支持通过WMS的GetFeatureInfo(参考WMS说明)方法来实现地图上的点击查询。1.定义MapClick事件响应函数 1 function onMapClick(e){ 2 var params = { 3 REQUEST: "GetFeatureInfo", // WMS G原创 2015-10-30 13:25:47 · 2594 阅读 · 0 评论 -
OpenLayers 3之添加地图鼠标右键菜单
目录(?)[-]openlayers 初始化页面过程鼠标右键菜单具体实现对 html 元素添加 contextmenu 事件获取地图相应的点击坐标地图相应位置添加菜单菜单隐藏总结 添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发contextmenu 事件转载 2016-12-23 17:32:06 · 3406 阅读 · 0 评论 -
Openlayers-设置地图缩放级别
在实际项目中,好多地图不需要从第0级开始缩放,因为第0级地图太小了,没有实际意 义。那么就需要设置从中间某个级别开始缩放。该如何做呢。由于openlayrs2中没有直接属性进行控制,也因此需要自己注册事件通过监听事件来控制地 图的最小缩放级别。对于openlayers3来说,直接通过view的属性进行控制即可。openlayers中需要注册缩放事件来解决,在该事件中监听缩放后地图的级别,当地图转载 2016-12-24 15:39:03 · 1657 阅读 · 0 评论 -
Openlayers-限制地图拖动区域
现在做webgis基本都会用到openlayers或者leaflet。那么在显示地图的时候,特别是显示小区域地图的时候,由于地图区域较小,就会存在把地图拖动到显示区域之外的现象。那么该如何限制地图拖动的区域呢。 在openlayers2中有restrictedExtent属性,直接设置下即可。var options = { control转载 2016-12-24 15:39:44 · 2454 阅读 · 0 评论 -
OpenLayers-基于OpenLayers的地图应用中图标汉化
在OpenLayers中图标默认是英文的,但是作为中国人,且做出来的地图产品主要是面向中国人,英文的图标对我们来说自然是不可接受的,因此需要对其进行汉化。这个功能做起来也很简单。只需要添加如下几个语句即可: OpenLayers.INCHES_PER_UNIT["千米"]=OpenLayers.INCHES_PER_UNIT["km"]; OpenLayers.INCHE转载 2016-12-24 15:40:14 · 625 阅读 · 0 评论