本文介绍如何使用ArcGIS API实现热力图渲染，并详细解释了如何将InfoWindow正确添加到esri.Graphic元素而非整个GraphicsLayer图层中，以实现更精确的交互效果。
GraphicsLayer图层的infoWindow主要是把infoWindow添加到每一个esri.Graphic元素当中而不是添加到GraphicsLayer图层里。添加到GraphicsLayer图层中就会使得单击那个地方都会弹出infoWindow，而添加到esri.Graphic中，只有单击到元素时才会弹出infoWindow。
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>FeatureLayer using Weighted HeatmapRenderer</title>
<link rel="stylesheet"
href="http://localhost:8080/arcgis_js_v320_api/arcgis_js_api/library/3.20/3.20/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet"
href="http://localhost:8080/arcgis_js_v320_api/arcgis_js_api/library/3.20/3.20/esri/css/esri.css">
<script src="http://localhost:8080/arcgis_js_v320_api/arcgis_js_api/library/3.20/3.20/init.js"></script>
<script src="getJson.js"></script><!--获取json文件的js-->
<!--获取json文件的js-->
<script src="jquery.min.js"></script>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.blurInfo {
position: absolute;
top: 10px;
right: 5px;
font-size: 1.25em;
font-family: monospace;
color: #4C4C4C;
width: 240px;
background-color: #FFFFFF;
padding: 10px;
border: 2px solid #57585A;
border-radius: 20px;
}
.blurInfo p span {
background-color: #FFFFFF;
padding: 0 5px;
border-radius: 5px;
}
.blurInfo input[type=range] {
width: 100%;
display: block;
}
</style>
<script>
var map;
var json;
var heatmapRenderer;
var heatmapRenderer1;
var featureLayer;
var graphiclayer;
require([
"dojo/number",
"esri/InfoTemplate",
"esri/layers/FeatureLayer",
"esri/map",
"esri/renderers/HeatmapRenderer",
"esri/layers/GraphicsLayer",
"dojo/domReady!"
], function (number, InfoTemplate, FeatureLayer, Map, HeatmapRenderer) {
//图片作为点样式
var StarSymbol = new esri.symbol.PictureMarkerSymbol({
"url": "esriDMTStopOrigin.png",
"height": 20,
"width": 20,
"type": "esriPMS",//esri颜色样式
"angle": 0//旋转角度
});
var ptSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 0, 0]), 1), new esri.Color([0, 255, 0, 0.25]));
map = new Map("map");
layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/network/MapServer");
map.addLayer(layer);
//添加热力图渲染
heatmapRenderer = new HeatmapRenderer({
colors: ["rgba(255, 0, 0, 0)", "rgb(0, 255, 0)", "rgb(255, 0, 255)", "rgb(255, 0, 0)"],
blurRadius: 10,
maxPixelIntensity: 20,
minPixelIntensity: 1
});
//创建GraphicsLayer图层
graphiclayer = new esri.layers.GraphicsLayer();
map.addLayer(graphiclayer);
json = getJson("TingZiJson.json");//获取json中点的坐标
grap();//添加esri.layers.FeatureLayer是热力图的渲染图层，好像只能用这种图层
for (var i = 0; i < json.feature.length; i++) {
var x = json.feature[i].geometry.x;
var y = json.feature[i].geometry.y;
var point = new esri.geometry.Point(x, y, new esri.SpatialReference({wkid: 4326}));//初始化起点
var infoTemplate = new esri.InfoTemplate(i, i);//创建一个消息框
featureLayer.add(new esri.Graphic(json.feature[i]));//添加点渲染热力图
graphiclayer.add(new esri.Graphic(point, StarSymbol).setInfoTemplate(infoTemplate));//创建点添加点的infoWindow并添加到GraphicsLayer图层中
}
map.infoWindow.anchor = "top";
dojo.connect(map.infoWindow, "show", infoOnShow1);
dojo.connect(map, "onClick", onClickMap);
});
var boinfo = true;
function infoOnShow1(evt) {
if (boinfo&&map.graphics.graphics.length!=0) {
//map.infoWindow.hide();
boinfo = false;
map.infoWindow.show(map.graphics.graphics[0].geometry);
map.centerAt(map.graphics.graphics[0].geometry);
map.graphics.clear();
}
graphiclayer.show();//GraphicsLayer图层显示
}
function onClickMap(evt) {
boinfo = true;
//map.infoWindow.hide();
graphiclayer.hide();//GraphicsLayer图层隐藏
}
//添加esri.layers.FeatureLayer是热力图的渲染图层，好像只能用这种图层
function grap() {
var layerDefinition = {
"geometryType": "esriGeometryPoint",
"fields": [{
"name": "ID",
"type": "esriFieldTypeInteger",
"alias": "ID"
}]
}
var featureCollection = {
layerDefinition: layerDefinition,
featureSet: null
};
featureLayer = new esri.layers.FeatureLayer(featureCollection, {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
outFields: ["FID"],
opacity: 1
});
featureLayer.setRenderer(heatmapRenderer);
map.addLayer(featureLayer);
}
</script>
</head>
<body>
<div id="map"></div>
<div class="blurInfo">
<p>
<label for="valueControl">Weight by magnitude</label>
<input id="valueControl" type="checkbox" checked>
</p>
<p>Blur Radius : <span id="blurValue">10</span></p>
<input id="blurControl" type="range" max=30 min=0 value=10 step=1/>
<p>Max Value : <span id="maxValue">100</span></p>
<input id="maxControl" type="range" max=500 min=0 value=100 step=1/>
<p>Min Value : <span id="minValue">0</span></p>
<input id="minControl" type="range" max=500 min=0 value=0 step=1/>
</div>
</body>
</html>
getJson.js
var GrapLayer_PJD=null; var TZ_json=null;//亭子 function getJson(url) { if (url == null) return; var json; $.ajaxSettings.async = false;//同步执行 // var urlJD="JingDianJson.json"; $.getJSON(url, function (data) { json = data; }); $.ajaxSettings.async = true;//异步执行 return json; }
json文件主要格式
{
"feature": [
{
"attributes": {
"Name": "红荔亭",
"Introduction": "红荔亭",
"Shape": "Point"
},
"geometry": {
"y": 22.898239192,
"x": 113.749512334,
"type": "point"
}
}}
允行效果：
扫一扫
7835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
