（转）基于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、设置显示样式

[javascript] view plaincopy print?

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、添加矢量图层

[javascript] view plaincopy print?

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);

程序完整代码为；

[html] view plaincopy print?

<!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>

转载于:https://www.cnblogs.com/telwanggs/p/6972851.html

（转）基于openlayers实现聚类统计展示相关推荐

基于openlayers实现聚类统计展示
概述: 在前面的博文中讲述过基于Arcgis for js如何实现聚类统计展示,在本文中讲述如何基于openlayers实现聚类统计的效果,Arcgis for js聚类统计的博文地址为: http: ...
基于改进K-means聚类和隐马尔可夫链的汽车行驶工况构建
摘要: 汽车行驶工况的构建对于车辆能耗.排放测试,以及汽车性能指标优化有着重要意义.而欧洲NEDC工况.世界WLTC工况等为基准的行驶工况构建并不完全适用我国汽车行驶工况的构建,基于此,制定反映我国 ...
基于密度的聚类算法（3）——DPC详解
基于密度的聚类算法(1)--DBSCAN详解基于密度的聚类算法(2)--OPTICS详解基于密度的聚类算法(3)--DPC详解 1. DPC简介 2014年,一种新的基于密度的聚类算法被提出,且其 ...
基于网格的聚类算法STING
基于网格的聚类算法STING STING方法简介 ① 全称 : STING , Statistical Information Grid , 统计信息网格 , 是一种多分辨率聚类技术 ; ② 划分方 ...
【数据挖掘】基于方格的聚类方法 ( 概念 | STING 方法 | CLIQUE 方法 )
文章目录 I . 基于方格的聚类方法简介 II . 基于方格的聚类方法图示 III . STING 方法 IV . CLIQUE 方法 I . 基于方格的聚类方法简介 1 . 基于方格的聚类方法 ...
【数据挖掘】聚类算法简介 ( 基于划分的聚类方法 | 基于层次的聚类方法 | 基于密度的聚类方法 | 基于方格的聚类方法 | 基于模型的聚类方法 )
文章目录 I . 聚类主要算法 II . 基于划分的聚类方法 III . 基于层次的聚类方法 IV . 聚合层次聚类图示 V . 划分层次聚类图示 VI . 基于层次的聚类方法切割点选取 VII ...
《异构信息网络挖掘：原理和方法(1)》一第2章基于排名的聚类
本节书摘来自华章出版社<异构信息网络挖掘: 原理和方法(1)>一书中的第2章,作者［美］孙艺洲(Yizhou Sun)韩家炜(Jiawei Han),更多章节内容可以访问云栖社区" ...
基于threejs的商品VR展示平台的设计与实现思路
目录基于threejs的商品VR展示平台的设计与实现思路前言总体开发方案设计总体开发设计思维导图模型制作模块前端展示模块存储模块后端管理模块后台管理实现商品模型制作商品模型前期准 ...
聚类之层次聚类、基于划分的聚类（…
5.聚类之层次聚类.基于划分的聚类(k-means).基于密度的聚类.基于模型的聚类目录(?)[-] 1. 一层次聚类 1. 层次聚类的原理及分类 2. 层次聚类的流程 ...

（转）基于openlayers实现聚类统计展示

（转）基于openlayers实现聚类统计展示相关推荐

最新文章

热门文章