基于openlayers实现聚类统计展示
来源:互联网 发布:runescape 知乎 编辑:程序博客网 时间:2024/05/21 07:56
概述:
在前面的博文中讲述过基于Arcgis for js如何实现聚类统计展示,在本文中讲述如何基于openlayers实现聚类统计的效果,Arcgis for js聚类统计的博文地址为:
http://blog.csdn.net/gisshixisheng/article/details/40867989
效果:
实现关键点:
实现代码:
1、数据格式
2、设置显示样式
var style = new OpenLayers.Style({ fillColor: "#ffcc66", strokeColor: "#ff9933", strokeWidth: 2, label: "${count}", fontColor: "#333333", fontFamily: "sans-serif", fontWeight: "bold" }, { rules: [ new OpenLayers.Rule({ minScaleDenominator: 100000000, symbolizer: { pointRadius: 7, fontSize: "9px" } }), new OpenLayers.Rule({ maxScaleDenominator: 100000000, minScaleDenominator: 50000000, symbolizer: { pointRadius: 10, fontSize: "11px" } }), new OpenLayers.Rule({ maxScaleDenominator: 50000000, symbolizer: { pointRadius: 13, fontSize: "13px" } }) ] });
3、添加矢量图层
var features = new Array(); for (var i=0; i<data.length; i++) { features[i] = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(data[i].x, data[i].y), { count:data[i].count, name:data[i].name } ); } var clusterLayer = new OpenLayers.Layer.Vector("Points", { styleMap: new OpenLayers.StyleMap(style) }); clusterLayer.addFeatures(features); map1.addLayer(clusterLayer);
程序完整代码为;
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>openlayers map</title> <link rel="stylesheet" href="http://localhost/olapi/theme/default/style.css" type="text/css"> <style> html, body{ padding:0; margin:0; height:100%; width:100%; overflow: hidden; font-size: 12px; } #map1{ width: 100%; height: 100%; float: left; border-right: 1px solid #000000; } </style> <script src="http://localhost/olapi/OpenLayers.js"></script> <script src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script> <script src="http://localhost/jquery/jquery-1.8.3.js"></script> <script> var map1, vectors; OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2'; $(function(){ var bounds = new OpenLayers.Bounds( 73.45100463562233, 18.16324718764174, 134.97679764650596, 53.531943152223576 ); var options = { controls: [], maxExtent: bounds, maxResolution: 0.2403351289487642, projection: "EPSG:4326", units: 'degrees' }; map1 = new OpenLayers.Map('map1', options); map1.addLayer(getWms("china")); map1.addControl(new OpenLayers.Control.Zoom()); map1.addControl(new OpenLayers.Control.Navigation()); map1.zoomToExtent(bounds); addCluster(); }); function getWms(layer){ return new OpenLayers.Layer.WMS( "Geoserver layers - Tiled", "http://localhost:8081/geoserver/lzugis/wms", { "LAYERS": layer, "STYLES": '', format: 'image/png' }, { buffer: 0, displayOutsideMaxExtent: true, isBaseLayer: true, yx : {'EPSG:4326' : true} } ); } function addCluster(){ var style = new OpenLayers.Style({ fillColor: "#ffcc66", strokeColor: "#ff9933", strokeWidth: 2, label: "${count}", fontColor: "#333333", fontFamily: "sans-serif", fontWeight: "bold" }, { rules: [ new OpenLayers.Rule({ minScaleDenominator: 100000000, symbolizer: { pointRadius: 7, fontSize: "9px" } }), new OpenLayers.Rule({ maxScaleDenominator: 100000000, minScaleDenominator: 50000000, symbolizer: { pointRadius: 10, fontSize: "11px" } }), new OpenLayers.Rule({ maxScaleDenominator: 50000000, symbolizer: { pointRadius: 13, fontSize: "13px" } }) ] }); var data = [{name:"乌鲁木齐",x:87.5758285931,y:43.7822116460,count:10}, {name:"拉萨",x:91.1629975040,y:29.7104204643,count:30}, {name:"西宁",x:101.797302689,y:36.5936423859,count:50}, {name:"兰州",x:103.584297498,y:36.1190864503,count:70}, {name:"成都",x:104.035508297,y:30.7141790950,count:90}, {name:"重庆",x:106.519115206,y:29.4789248520,count:60}, {name:"贵阳",x:106.668071385,y:26.4573115457,count:20}]; var features = new Array(); for (var i=0; i<data.length; i++) { features[i] = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(data[i].x, data[i].y), { count:data[i].count, name:data[i].name } ); } var clusterLayer = new OpenLayers.Layer.Vector("Points", { styleMap: new OpenLayers.StyleMap(style) }); clusterLayer.addFeatures(features); map1.addLayer(clusterLayer); } </script></head><body> <div id="map1"></div></body></html>
0 0
- 基于openlayers实现聚类统计展示
- Arcgis for JS扩展GraphicLayer实现区域对象的聚类统计与展示
- 基于echarts实现图表展示
- 基于echarts实现图表展示
- OpenLayers 3 +天地图展示
- 基于Geoserver的WFS服务与Openlayers实现地理查询
- 基于CSS3实现三维视图展示功能
- 基于angular实现分页工具条展示
- 基于OpenLayers的地图封装Javascript类定义
- 基于 OpenLayers地图加载功能Javascript类定义
- 基于OpenLayers的地图封装Javascript类定义
- OpenLayers源码学习---OpenLayers中的继承实现
- openlayers中的proxyhost实现
- openlayers实现查询功能
- openlayers的popup实现
- openlayers实现在线编辑
- openlayers实现画圆
- 基于OpenLayers实战地理信息系统视频
- 第三章第四十四题
- Android 自定义view时,顶层view为ScrollView 注意
- 数据结构面试题总结2——数组:求出现次数超过一半的元素
- 浅谈iOS面向对象之类与对象
- 第三章 第三十九题
- 基于openlayers实现聚类统计展示
- [超牛]只能输入数字的文本框,兼容IE7IE8等
- jquery基础知识
- JS阻止冒泡方法
- WAS中单元(Cell)节点(Node),以及Node、Profile 与 Server 之间的关系是什么
- APUE-CH3 文件IO(2)
- 不用装软件-不用任何插件-在PC上下载Google play的apk
- List::traverse遍历
- maven 打包可执行jar的方法