超图热点图代码分析
使用超圖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庫；
<script type="text/javascript">
var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
var map, layer, heatMapLayer,
url=host+"/iserver/services/map-world/rest/maps/World";
function init(){
if(!document.createElement('canvas').getContext) {
alert('您的瀏覽器不支持 canvas，請升級');
return;
}
? ? 定義變量；地圖服務地址賦值給url變量；檢查瀏覽器是否支持canvas；
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>
總結
- 上一篇： sqlite创建表联合主键的sql写法、
- 下一篇： GIS可视性分析概述