SuperMap热力网格图

最新推荐文章于 2024-07-25 03:56:53 发布

原创

最新推荐文章于 2024-07-25 03:56:53 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何使用SuperMap GIS平台和C#语言开发热力网格图，展示点数据的密度分布，如人群分布、旅游景点客流量等，通过颜色渐变直观表示数据密度，适用于地图放大缩小的动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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].f