arcgis for jsapi 4.10繪製熱力圖
版權宣告:本文為博主原屙文章,喜歡你就擔走。 https://blog.csdn.net/leftfist/article/details/87189002
arcgis for jsapi 從 3 變到 4 之後,變化巨大,原先網路上的許多例子,好像都過時了。比如echart與arcgis結合,都是for 3.x的,4時代就不行了。
熱力圖也一樣。
現在俺給個例子,不依賴於arcgis伺服器,直接渲染出來:
原理是繪製,繪製在FeatureLayer裡。怎麼繪製呢?原來熱力圖有個專門的渲染器:HeatmapRenderer,將樣式賦給該渲染器,然後渲染器、點資料等參與FeatureLayer的構造,就可以了。
<!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>heatMap</title> <link rel="stylesheet" type="text/css" href="http://192.168.0.211/pubzy/arcgis_js_api/4.10/esri/css/main.css" /> <style> html, body, #map { height: 100%; margin: 0; padding: 0; } </style> <script src="http://192.168.0.211/pubzy/media/js/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://192.168.0.211/pubzy/arcgis_js_api/4.10/init.js"></script> </head> <body> <div id="map"></div> </body> <script> require(["esri/map", "esri/views/MapView", "esri/Basemap", "esri/geometry/Extent", "esri/layers/TileLayer", "esri/layers/FeatureLayer", "esri/renderers/HeatmapRenderer", "dojo/domReady!"], function (Map, MapView, BaseMap, Extent, TileLayer, FeatureLayer, HeatmapRenderer) { let map, view; (function () {//載入底圖等 map = new Map({ basemap: getBaseMap({ "title": "影像圖", "thumbnailUrl": "images/map/影像圖.gif", "type": "tile", "layer": "http://192.168.0.206:6080/arcgis/rest/services/HNJCZS/HNJCZSYXT/MapServer" }), }); view = new MapView({ container: "map", map: map, extent: new Extent({ "xmin": 105, "ymin": 18, "xmax": 115, "ymax": 20, "spatialReference": { "wkid": 4326 } }), }); view.ui._removeComponents(["attribution"]); })(); function getBaseMap(basemapcof) { let baselayer = new TileLayer({ url: basemapcof.layer, }); return new BaseMap({ baseLayers: baselayer, title: basemapcof.title, thumbnailUrl: "../" + basemapcof.thumbnailUrl, }); } var heatmapRenderer = new HeatmapRenderer({//設定渲染器 colorStops: [{ ratio: 0.4, color: "rgba(0, 255, 0, 0)" }, { ratio: 0.75, color: "rgba(255, 140, 0, 1)" }, { ratio: 0.9, color: "rgba(255, 0,0, 1)" }], blurRadius: 8, maxPixelIntensity: 230, minPixelIntensity: 10 }); var heatDataUrl = "data/heatJson.json"; $.getJSON(heatDataUrl,{},function(data,textStatus,jqXHR){//讀取資料,設定點資料集 var features = []; for (var i = 0; i < data.heatData.length; i++) { var x = data.heatData[i].lng; var y = data.heatData[i].lat; features.push({ geometry: { type: "point", x: x, y: y }, attributes: { ObjectID: i,//重要!!! } }); } var featureLayer = new FeatureLayer({ source: features,//點資料集 title: "熱力圖", objectIdField: "ObjectID",//重要!!! renderer: heatmapRenderer//渲染器 }); map.add(featureLayer); }); }); </script> </html>
熱力圖有個專有的名詞:HeatMap,可以用這個單詞去搜。
參考資料:
arcgis js api:熱力圖arcgis for jsapi官網上有兩個例子,一個似乎是直接展示圖層,一個是依賴於CSVLayer,好像挺複雜。
https://developers.arcgis.com/javascript/latest/sample-code/visualization-heatmap-scale/index.html
https://developers.arcgis.com/javascript/latest/sample-code/visualization-heatmap/index.html