ArcGISAPIforJavaScript实现热力图_js实现热力图资源-CSDN文库

共4个文件

js：3个

html：1个

ArcGIS

JavaScript

heatMap

4星 · 超过85%的资源需积分: 50 23 浏览量 2018-07-09 19:18:42 上传评论 3 收藏 13KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

热力图.zip （4个子文件）

热力图

src

heatmapArcgis.js 10KB

heatmap.js 24KB

heatmap-arcgis1.js 10KB

index.html 7KB

<!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>

评论收藏

内容反馈