(转)基于openlayers实现聚类统计展示
http://blog.csdn.net/gisshixisheng/article/details/46137015
概述:
在前面的博文中讲述过基于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>
(转)基于openlayers实现聚类统计展示的更多相关文章
- 聚类:层次聚类、基于划分的聚类(k-means)、基于密度的聚类、基于模型的聚类
一.层次聚类 1.层次聚类的原理及分类 1)层次法(Hierarchicalmethods)先计算样本之间的距离.每次将距离最近的点合并到同一个类.然后,再计算类与类之间的距离,将距离最近的类合并为一 ...
- 基于密度的聚类之Dbscan算法
一.算法概述 DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一个比较有代表性的基于密度的聚类算法.与划分和层次 ...
- 【机器学习】DBSCAN Algorithms基于密度的聚类算法
一.算法思想: DBSCAN(Density-Based Spatial Clustering of Applications with Noise)是一个比较有代表性的基于密度的聚类算法.与划分和层 ...
- 一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- DBSCAN聚类︱scikit-learn中一种基于密度的聚类方式
一.DBSCAN聚类概述 基于密度的方法的特点是不依赖于距离,而是依赖于密度,从而克服基于距离的算法只能发现"球形"聚簇的缺点. DBSCAN的核心思想是从某个核心点出发,不断向密 ...
- PHP+jQuery中国地图热点数据统计展示实例
一款PHP+jQuery实现的中国地图热点数据统计展示实例,当鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息. 首先在页面中加一个div#tip,用来展示地图信息的提示框和#map ...
- 简单易学的机器学习算法—基于密度的聚类算法DBSCAN
简单易学的机器学习算法-基于密度的聚类算法DBSCAN 一.基于密度的聚类算法的概述 我想了解下基于密度的聚类算法,熟悉下基于密度的聚类算法与基于距离的聚类算法,如K-Means算法之间的区别. ...
- 简单易学的机器学习算法——基于密度的聚类算法DBSCAN
一.基于密度的聚类算法的概述 最近在Science上的一篇基于密度的聚类算法<Clustering by fast search and find of density peaks> ...
- jQuery+PHP+Ajax动态数字统计展示实例
jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: <div ...
随机推荐
- 【codeforces 514A】Chewbaсca and Number
[题目链接]:http://codeforces.com/contest/514/problem/A [题意] 允许你把每个数字翻转 ->x变成9-x 然后问你能够变成的最小的数字是什么; 不能 ...
- linux服务器中不支持soap及bcmul函数的结局方法
新的程序里用了webserice接口,部到服务器,先是提示:bcmul() 函数不可用,网上搜索一番,得知这是php的高精度函数,需要在编译php的时候加入此模块,于是在编译脚本里增添 “–enabl ...
- Mac下查看文件编码方式
一句话:file -I {filename}
- 关于重置IOS App请求推送的授权请求
项目要加入推送通知.測试完本地通知后.发现測不了远程通知.于是想重置授权请求. 下面是重置授权请求的方法: 方法一: 通用->还原->抹掉全部内容和设置 可是第一种方法非常费时,抹掉内容预 ...
- Shredding Company (hdu 1539 dfs)
Shredding Company Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- android graphic(15)—fence
为何须要fence fence怎样使用 软件实现的opengl 硬件实现的opengl 上层使用canvas画图 上层使用opengl画图 下层合成 updateTexImage doComposeS ...
- jQuery - 选中复选框则弹出提示框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Android:制作Update.zip升级包 【转】
本文转载自:http://zwkufo.blog.163.com/blog/static/2588251201382293049118/ 很多时候厂商或者三方提供的ROM并不能满足需求,比如系统自带软 ...
- jsp页面动态展示list-使用<select>和<c:forEach>标签
转自:https://blog.csdn.net/zhugewochuang/article/details/80276466 后台:搜索数据放入list,然后为这个list提供响应的get和set方 ...
- linux下如何使用sftp命令进行文件上传和下载
sftp 是一个交互式文件传输程式.它类似于 ftp, 但它进行加密传输,比FTP有更高的安全性.下边就简单介绍一下如何远程连接主机,进行文件的上传和下载,以及一些相关操作. 举例,如远程主机的 IP ...