ArcGIS API for JS請求json資料 載入點到Graphics圖層
阿新 • • 發佈：2019-01-29
從專案內請求json檔案，使用的是dojo框架的請求方式，沒有使用jquery。中間因為經緯度搞反了，耽誤了很久
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>ArcGIS demo</title> <link type="text/css" rel="stylesheet" href="http://localhost/arcgis/esri/css/main.css"/> <script src="http://localhost/arcgis/init.js"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> </head> <body> <div id="viewDiv"></div> <script> require(["esri/Map", "dojo/_base/xhr", "esri/config", "esri/views/MapView", "esri/Graphic", "dojo/domReady" ], function (Map, xhr, esriConfig, MapView, Graphic ) { var map = new Map({ basemap: "streets"//ESRI提供的底 圖 }); //二維檢視 var view = new MapView({ map: map, container: "viewDiv", center: [118.55019107002441,29.300640724771107], zoom: 5 }); view.when(function () { //使用dojo框架進行請求 xhr.post({ url:"heat.json", handleAs : "json", load : function(data) { var markerSymbol = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: [226, 119, 40] }; data.heatData.forEach(function (json,index) { var x = json.lng; var y = json.lat; var point={ type: "point", longitude: x, latitude: y}; var graphic =new Graphic({ geometry: point, symbol: markerSymbol }); //將graphics新增到視窗圖層 view.graphics.add(graphic); }); }, error:function (error) { console.log("error"+error); } }); }).catch(function (reason) { console.log(reason) }); }) </script> </body> </html>
結果為：
