<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>heatmap.js ArcGIS JavaScript API Heatmap Layer</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
<style>
body, html {
margin:0;
padding:0;
font-family:Arial;
}
#heatmapArea {
position:relative;
float:left;
width:800px;
height:600px;
border:1px dashed black;
}
#configArea {
position:relative;
float:left;
width:200px;
padding:15px;
padding-top:0;
padding-right:0;
}
.btn {
margin-top:25px;
padding:10px 20px 10px 20px;
-moz-border-radius:15px;
-o-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
border:2px solid black;
cursor:pointer;
color:white;
background-color:black;
}
#map {
width:800px;
height:600px;
}
</style>
<script type="text/javascript">
var dojoConfig = {
async:true,
packages:[{
name:"js",
location:location.pathname.replace(/\/[^/]*$/,"")+"/src"
}]
}
</script>
<script type="text/javascript" src="src/heatmap.js"></script>
<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
<script type="text/javascript">
var map;
var heatLayer;
var featureLayer;
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/tasks/query",
"esri/geometry/Extent",
"esri/layers/ArcGISTiledMapServiceLayer",
"dojo/on",
"js/heatmapArcgis",
"dojo/parser",
"dojo/domReady!"
],function(Map,FeatureLayer,Query,Extent,ArcGISTiledMapServiceLayer,on,HeatmapLayer,parser){
parser.parse();
// initial extent of map
var initExtent = new Extent({
xmax: -13624229.32056175,
xmin: -13625120.886837104,
ymax: 4548374.604660432,
ymin: 4547966.144290476,
"spatialReference": {
"wkid": 102100
}
});
// create map
map = new Map("map", {
extent: initExtent,
sliderStyle: "small"
});
//Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
var basemap = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(basemap);
// once map is loade
on(map, 'load', function (theMap) {
alert(1);
//resize the map when the browser resizes
// on(dijit.byId('map'), 'resize', map, map.resize);
// create heat layer
heatLayer = new HeatmapLayer({
config: {
"useLocalMaximum": true,
"radius": 40,
"gradient": {
0.45: "rgb(000,000,255)",
0.55: "rgb(000,255,255)",
0.65: "rgb(000,255,000)",
0.95: "rgb(255,255,000)",
1.00: "rgb(255,000,000)"
}
},
"map": map,
"domNodeId": "heatLayer",
"opacity": 0.85
});
// add heat layer to map
map.addLayer(heatLayer);
// resize map
map.resize();
// create feature layer to get the points from
featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND
});
map.addLayer(featureLayer);
// get features from this layer
getFeatures();
// on map extent change
on(map, "extent-change", getFeatures);
on(dojo.byId('tog'), "click", function () {
if (heatLayer.visible) {
heatLayer.hide();
} else {
heatLayer.show();
}
});
on(dojo.byId('tog2'), "click", function () {
if (featureLayer.visible) {
featureLayer.hide();
} else {
featureLayer.show();
}
});
});
// get the features within the current extent from the feature layer
function getFeatures() {
// set up query
var query = new Query();
// only within extent
query.geometry = map.extent;
// give me all of them!
query.where = "1=1";
// make sure I get them back in my spatial reference
query.outSpatialReference = map.spatialReference;
// get em!
featureLayer.queryFeatures(query, function (featureSet) {
var data = [];
// if we get results back
if (featureSet && featureSet.features && featureSet.features.length > 0) {
// set data to features
data = featureSet.features;
}
// set heatmap data
heatLayer.setData(data);
});
}
});
</script>
</head>
<body class="claro">
<div id="heatmapArea">
<div id="heatLayer"></div>
<div id="map"></div>
</div>
<div id="configArea">
<div id="tog" class="btn">Toggle HeatmapOverlay</div>
<div id="tog2" class="btn">Toggle Tree Points</div>
</div>
</body>
</html>
- 1
- 2
前往页