SuperMap热力网格图
开发工具与关键技术：SQL Server、Visual Studio、SuperMap 、C#、GIS
作者：刘东标
撰写时间：2019-02-23
热力图是通过颜色分布，描述诸如人群分布、密度和变化趋势等的一种地图表现手法，因此，能够非常直观地呈现一些原本不易理解或表达的数据，比如密度、频度、温度等。
SuperMap热力图只针对点数据制作热力图，并生成热力图层。热力图图层可以将点要素绘制为相对密度的代表表面，并以色带加以渲染，以此表现点的相对密度等信息，一般情况下，从冷色（低点密度）到暖色（高点密度）来显示热力图图层中的点密度状态。热力图的成图原理，需要开启地图中Alpha通道。
热力图图层除了可以反映点要素的相对密度，还可以表示根据属性进行加权的点密度，以此考虑点本身的权重对于密度的贡献。
热力图图层将随地图放大或缩小而发生更改，是一种动态栅格表面。例如，绘制全国旅游景点的访问客流量的热力图，当放大地图后，该热力图就可以反映某省内或者局部地区的旅游景点访问客流量分布情况。
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>热点网格图</title>
<style type="text/css">
body {
margin: 0;
overflow: hidden;
background: #fff;
}
#map {
position: relative;
height: 900px;
border: 1px solid #3473b7;
}
</style>
</head>
<link href='./bootstrap/css/bootstrap.min.css' rel='stylesheet' />
<link href='./bootstrap/css/bootstrap-responsive.css' rel='stylesheet' />
<script src='./libs/SuperMap.Include.js'></script>
<script type="text/javascript">
var map, layer, heatGridLayer,selectGrid,infowin;
//定义网格的styles
var items=[
{
start:0,
end:2,
style:{
strokeColor: "#C69944",
strokeWidth: 1,
fillColor: "#B8E4B8",
fillOpacity: 0.5
}
},
{
start:2,
end:4,
style:{
strokeColor: "#C69944",
strokeWidth: 1,
fillColor: "#66dd66",
fillOpacity: 0.5
}
},
{
start:4,
end:6,
style:{
strokeColor: "#C69944",
strokeWidth: 1,
fillColor: "#00ee00",
fillOpacity: 0.5
}
},
{
start:6,
end:8,
style:{
strokeColor: "#C69944",
strokeWidth: 1,
fillColor: "#008800",
fillOpacity: 0.5
}
},
{
start:8,
end:10,
style:{
strokeColor: "#C69944",
strokeWidth: 1,
fillColor: "#df8505",
fillOpacity: 0.5
}
},
{
start:10,
end:12,
style:{
strokeColor: "#C69944",
strokeWidth: 1,
fillColor: "#CC9933",
fillOpacity: 0.5
}
},
{
start:12,
end:16,
style:{
strokeColor: "#C69944",
strokeWidth: 1,
fillColor: "#FF0000",
fillOpacity: 0.5
}
}
];
var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
var url=host+"/iserver/services/map-sa123/rest/maps/从化网格";
///iserver/services/map-sa123/rest/maps/从化网格
//初始化
function init(){
map = new SuperMap.Map("map",{controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.LayerSwitcher(),
new SuperMap.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
})]
});
map.addControl(new SuperMap.Control.MousePosition());
layer = new SuperMap.Layer.TiledDynamicRESTLayer("World",url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
//创建热点网格图
heatGridLayer = new SuperMap.Layer.HeatGridLayer("heatGrid");
layer.events.on({"layerInitialized": addLayer});
}
//添加图层、注册事件、激活格网选择控件
function addLayer() {
map.addLayers([layer,heatGridLayer]);
map.setCenter(new SuperMap.LonLat(113.57941, 23.55168), 3);
// 创建格网选择控件
var select = new SuperMap.Control.SelectGrid(heatGridLayer,{
callbacks:{
//点击feature事件
clickFeature:function(f){
closeInfoWin();
openInfoWin(f);
},
clickout:function(){
closeInfoWin();
}
}
});
map.events.on({"movestart":function(){
closeInfoWin();
}});
map.addControl(select);
select.activate();
createHeatPoints();
}
//向服务器发送请求，获取数据
function createHeatPoints(){
var points =[new SuperMap.Geometry.Point(-180,90),
new SuperMap.Geometry.Point(180,90),
new SuperMap.Geometry.Point(180,-90),
new SuperMap.Geometry.Point(-180,-90)
],
linearRings = new SuperMap.Geometry.LinearRing(points),
region = new SuperMap.Geometry.Polygon([linearRings]);
var queryParam, queryByGeometryParameters, queryService;
//设置查询数据集的查询过滤参数
queryParam = new SuperMap.REST.FilterParameter({name: "医院救急_point@Gzch#1"});
//设置 Geometry查询的相关参数
queryByGeometryParameters = new SuperMap.REST.QueryByGeometryParameters({
queryParams: [queryParam],
geometry: region,
spatialQueryMode: SuperMap.REST.SpatialQueryMode.INTERSECT
});
queryService = new SuperMap.REST.QueryByGeometryService(url, {
eventListeners: {
"processCompleted": processCompleted,
"processFailed": processFailed
}
});
queryService.processAsync(queryByGeometryParameters);
}
function processCompleted(queryEventArgs){
var i, j, result = queryEventArgs.result;
var heatFeatures = [];
if (result && result.recordsets) {
for (i=0, recordsets=result.recordsets, len=recordsets.length; i<len; i++) {
if (recordsets[i].features) {
for (j=0; j<recordsets[i].features.length; j++) {
var feature = recordsets[i].features[j];
var point = feature.geometry;
if(point.CLASS_NAME == SuperMap.Geometry.Point.prototype.CLASS_NAME){
feature.attributes.temperature = parseInt(Math.random()*45*10)/10;
feature.style = {
pointRadius: 20,
graphic:true,
externalGraphic:"./医疗1.png",
graphicWidth:20,
graphicHeight:20
};
heatFeatures.push(feature);
}
}
}
}
}
//设置地图在第4级的时候进行格网散开
heatGridLayer.spreadZoom = 4;
heatGridLayer.items=items;
//设置label显示的数据为字段temperature的内容
heatGridLayer.dataField = "temperature";
heatGridLayer.addFeatures(heatFeatures);
}
function processFailed(e) {
alert(e.error.errorMsg);
}
//弹出信息框
function openInfoWin(feature){
var geo = feature.geometry;
var bounds = geo.getBounds();
var center = bounds.getCenterLonLat();
var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";
contentHTML += "<div>"+"SmID："+feature.data.SmID+"<br />"+"医院中心："+feature.data.NAME+"<br />"+"地址："+feature.data.ADDRESS+"</div></div>";
var popup = new SuperMap.Popup.FramedCloud("popwin",
new SuperMap.LonLat(center.lon,center.lat),
null,
contentHTML,
null,
true);
feature.popup = popup;
infowin = popup;
map.addPopup(popup);
}
//关闭信息框
function closeInfoWin(){
if(infowin){
try{
infowin.hide();
infowin.destroy();
}
catch(e){}
}
}
//重置按钮
$("#reset").click(function(){
heatGridLayer.removeAllFeatures();
infowinonMessagefun();
markerLayer.clearMarkers();
})
$("#reset1").click(function(){
heatGridLayer.removeAllFeatures();
infowinonMessagefun();
markerLayer.clearMarkers();
})
</script>
<body "init()">
<!-- LEFT SIDEBAR -->
<div id="sidebar-nav" class="sidebar" style="overflow:auto">
<div class="sidebar-scroll" style="font-size:20px">
<nav>
<ul class="nav">
<li>
<a href="#subPages2" data-toggle="collapse" class="collapsed"><i class="glyphicon glyphicon-hdd"></i> <span>路径查询</span> <i class="icon-submenu lnr lnr-chevron-left"></i></a>
<div id="subPages2" class="collapse ">
<form action="/" method="post">
<ul class="nav nav-ul">
<li>
<label style="padding:0 0 0 0">
<input type="radio" name="radio" value="1" />
病例活动路径
</label>
<label style="padding:0 0 0 0">
<input type="radio" name="radio" value="2" />
病原活动路径
</label>
</li>
<li>
<input type="button" name="name" value="年" class="btn btn-primary blue" id="Year" />
<input type="button" name="name" value="月" class="btn btn-primary" id="Mooth"/>
<input type="button" name="name" value="日" class="btn btn-primary" id="Day"/>
<ul id="YearData">
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">开始年份:</div>
<input type="text" class="form-control" style="width:250px" id="Begin_datetime" name="StartTime" value="">
</div>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">结束年份:</div>
<input type="text" class="form-control" id="End_datetime" name="EndTime" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">登记号:</div>
<input type="text" class="form-control" name="PatientNuber" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">年龄:</div>
<input type="text" class="form-control" name="PatientAge" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">性别:</div>
<input type="text" class="form-control" name="PatientSex" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">户籍:</div>
<input type="text" class="form-control" name="Cadastral" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">疾病:</div>
<input type="text" class="form-control" name="Disease" value="">
</div>
</li>
@*<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">疾病亚类型:</div>
<input type="text" class="form-control" id="exampleInputAmount" value="">
</div>
</li>*@
<li>
<input type="button" name="name" value="查询" class="btn btn-primary" onclick="createHeatPoints()" />
<input type="reset" name="name" value="重置" class="btn btn-danger" id="reset" />
</li>
</ul>
<ul id="MoothData" class="hide">
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">开始月份:</div>
<input type="text" class="form-control" style="width:250px" id="Begin_datetime1" name="StartTime2" value="">
</div>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">结束月份:</div>
<input type="text" class="form-control" id="End_datetime1" name="EndTime2" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">登记号:</div>
<input type="text" class="form-control" name="PatientNuber2" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">年龄:</div>
<input type="text" class="form-control" name="PatientAge2" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">性别:</div>
<input type="text" class="form-control" name="PatientSex2" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">户籍:</div>
<input type="text" class="form-control" name="Cadastral2" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">疾病:</div>
<input type="text" class="form-control" name="Disease2" value="">
</div>
</li>
@*<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">疾病亚类型:</div>
<input type="text" class="form-control" id="exampleInputAmount" value="">
</div>
</li>*@
<li>
<input type="button" name="name" value="查询" class="btn btn-primary" onclick="createHeatPoints()" />
<input type="reset" name="name" value="重置" class="btn btn-danger" id="reset1" />
</li>
</ul>
<ul id="DayData" class="hide">
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">开始天数:</div>
<input type="text" class="form-control" id="Begin_datetime3" name="StartTime1" value="">
</div>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">结束天数:</div>
<input type="text" class="form-control" id="End_datetime3" name="EndTime1" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">登记号:</div>
<input type="text" class="form-control" name="PatientNuber1" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">年龄:</div>
<input type="text" class="form-control" name="PatientAge1" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">性别:</div>
<input type="text" class="form-control" name="PatientSex1" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">户籍:</div>
<input type="text" class="form-control" name="Cadastral1" value="">
</div>
</li>
<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">疾病:</div>
<input type="text" class="form-control" name="Disease1" value="">
</div>
</li>
@*<li>
<div class="input-group">
<div class="input-group-addon" style="width:100px;">疾病亚类型:</div>
<input type="text" class="form-control" >
</div>
</li>*@
<li>
<input type="button" name="name" value="查询" class="btn btn-primary" onclick="SelectPatient()" />
<input type="reset" name="name" value="重置" class="btn btn-danger" id="reset2" />
</li>
</ul>
</li>
</ul>
</form>
</div>
</li>
</ul>
</nav>
</div>
</div>
<div id="map" style="top:73px;bottom:0px;left:0px;right:0px;position:fixed;border:0px;">
</div> </body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
