SuperMap热力网格图

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>&nbsp;<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>&nbsp;<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>&nbsp; &nbsp;&nbsp;<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>&nbsp; &nbsp;&nbsp;<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>&nbsp; &nbsp;&nbsp;<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>

SuperMap热力网格图相关推荐

Leetcode69场双周赛-第四题5931. 用邮票贴满网格图
5931. 用邮票贴满网格图题目描述解题思路查找标志为0的点,尝试以该点为邮票的左上角,直到尝试为以该点为邮票的右下角.如果能放邮票,并覆盖该为0 的点,则把覆盖的点标志为2.如果不能,直接返回 ...
【数据结构与算法】之给Nx3网格图涂色的方案数的求解算法
一.题目要求你有一个 n x 3 的网格图 grid ,你需要用红,黄,绿三种颜色之一给每一个格子上色,且确保相邻格子颜色不同(也就是有相同水平边或者垂直边的格子颜色不同). 给你网格图的行数 ...
[ZJOI2016]旅行者（网格图分治最短路）
problem luogu-P3350 solution 据说,网格图最短路用分治是一个人人皆知的套路.对不起我不是人类比整体二分的算法流程. 考虑在一个 (xl,yl)−(yl,yr)(xl,yl ...
MATLAB库函数polly2trellis(卷积码生成多项式转网格图描述)的实现过程详解
关注公号[逆向通信猿]更精彩!!! 生成多项式转网格图在MATLAB中,卷积码的维特比(Viterbi)译码实现通常需要先将生成多项式转换成网格图描述,然后才能利用网格图进行维特比译码生成多项式转 ...
Leetcode 1559二维网格图中探测环技巧DFS|剪枝
二维网格图中探测环给你一个二维字符网格数组 grid ,大小为 m x n ,你需要检查 grid 中是否存在相同值形成的环. 一个环是一条开始和结束于同一个格子的长度大于等于 4 的路径.对 ...
LeetCode 2132. 用邮票贴满网格图（DP/二维差分）
文章目录 1. 题目 2. 解题 1. 题目给你一个 m x n 的二进制矩阵 grid ,每个格子要么为 0 (空)要么为 1 (被占据). 给你邮票的尺寸为 stampHeight x stam ...
LeetCode 2087. 网格图中机器人回家的最小代价（脑筋急转弯）
文章目录 1. 题目 2. 解题 1. 题目给你一个 m x n 的网格图,其中 (0, 0) 是最左上角的格子,(m - 1, n - 1) 是最右下角的格子. 给你一个整数数组 startPos ...
LeetCode 1411. 给 N x 3 网格图涂色的方案数（数学）
1. 题目你有一个 n x 3 的网格图 grid ,你需要用红,黄,绿三种颜色之一给每一个格子上色,且确保相邻格子颜色不同(也就是有相同水平边或者垂直边的格子颜色不同). 给你网格图的行数 n ...
LeetCode 1368. 使网格图至少有一条有效路径的最小代价（BFS最短路径，难）
1. 题目给你一个 m x n 的网格图 grid . grid 中每个格子都有一个数字,对应着从该格子出发下一步走的方向. grid[i][j] 中的数字可能为以下几种情况: 1 ,下一步往右走, ...

SuperMap热力网格图

SuperMap热力网格图相关推荐

最新文章

热门文章