超图热点图代码分析

最新推荐文章于 2023-05-18 15:39:48 发布

bcbobo21cn

最新推荐文章于 2023-05-18 15:39:48 发布

阅读量414

点赞数

分类专栏： GIS 文章标签：超图热点图地图控件热点数量热点半径

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/108303973

版权

GIS 专栏收录该内容

163 篇文章 19 订阅

订阅专栏

使用超图js自带例子；先看一下不同参数的热点图效果；

下面是全部的代码；分段对代码进行说明；

<!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;
}
html文档头部，定义文档体背景色，元素超出边界不显示等；

#map{
position: relative;
height: 520px;
border:1px solid #3473b7;
}
定义显示地图的div的属性；

#toolbar {
position: relative;
padding-top: 5px;
padding-bottom: 10px;
}
定义网页工具条样式；

</style>
<link href='./css/bootstrap.min.css' rel='stylesheet' />
<link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
<script src='../libs/SuperMap.Include.js'></script>
链接到超图js库；

map = new SuperMap.Map("map",{controls: [
new SuperMap.Control.ScaleLine(),
new SuperMap.Control.Zoom(),
new SuperMap.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
})]
});
map.addControl(new SuperMap.Control.MousePosition());
new 地图类；加载地图控件；Control.xxxx，这都是地图控件；

layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, {transparent: true, cacheEnabled: true}, {maxResolution:"auto"});
heatMapLayer = new SuperMap.Layer.HeatMapLayer(
"heatMap",
{
"radius":45,
"featureWeight":"value",
"featureRadius":"geoRadius"
}
);
layer.events.on({"layerInitialized": addLayer});
}
new基础的TiledDynamicRESTLayer图层；new 热点图图层，其图层名称为 heatMap；热点图图层的变量名称为heatMapLayer；

function addLayer() {
map.addLayers([layer,heatMapLayer]);
map.setCenter(new SuperMap.LonLat(0, 0), 0);
}
加载图层到地图；

function createHeatPoints(){
clearHeatPoints();
var heatPoints = [];
var num = parseInt(document.getElementById('heatNums').value);
var radius = parseInt(document.getElementById('heatradius').value);
//var useGeoRadius = "checked" == $('#useGeoRadius').attr('checked');
var unit = document.getElementById("radiusUnit").value,
useGeoRadius = false;
if("degree" == unit){
useGeoRadius = true;
}
heatMapLayer.radius = radius
接受界面输入值，热点数量，热点半径；

for(var i=0; i < num; i++){
heatPoints[i] = new SuperMap.Feature.Vector(
new SuperMap.Geometry.Point(
Math.random()*360 - 180,
Math.random()*180 - 90
),
{
"value":Math.random()*9,
"geoRadius":useGeoRadius?radius:null
}
);
}
heatMapLayer.addFeatures(heatPoints);
}
根据参数生成随机热点；点是 SuperMap.Geometry.Point 类的对象；由点再构建 SuperMap.Feature.Vector 要素对象；
把生成的要素对象添加到 heatMapLayer 图层；加到图层上的是要素，图层包含要素；

function clearHeatPoints(){
heatMapLayer.removeAllFeatures();
}
清除热点；

</script>
</head>
<body οnlοad="init()">
<div id="toolbar">
<span>热点数量：</span>
<input type='text' style='width:50px;height: 30px' id='heatNums' value='200'/>
<span>热点半径：</span>
<input type='text' style='width:30px;height: 30px' value='50' id='heatradius'/>
<select style='width:70px' id='radiusUnit'><option value='px'>px</option><option value ='degree'>degree</option></select>
<input type="button" class="btn" value="渲染热点" style="margin-bottom: 10px" οnclick="createHeatPoints()" />
<input type="button" class="btn" value="清除" style="margin-bottom: 10px" οnclick="clearHeatPoints()" />
</div>
工具栏输入热点数量和半径的界面；

<div id="map"></div>
地图容器，即显示地图的div；

</body>
</html>

bcbobo21cn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
超图热点图代码分析

使用超图js自带例子；先看一下不同参数的热点图效果；下面是全部的代码；分段对代码进行说明；<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>热点图</title><style type="text/css">body{margin: 0;over
复制链接

扫一扫