內容涉及到:arcgisJSON與geoJSON的相互轉換、map與foreach循環的同異步問題、子組件給父組件傳參等
剛遇到了這樣一個問題:後臺需要我傳給他一個geoJson的數據,可是我畫圖獲取到的時候是arcgisJSON怎麼辦呢?於是可以使用這樣的方法:
//引入
import { arcgisToGeoJSON, geojsonToArcGIS} from "@esri/arcgis-to-geojson-utils";
//arcgisJSON轉geoJSON
geoJSON.geometry = arcgisToGeoJSON(arcgisJSON.geometry)
//geoJSON轉arcgisJSON
arcgisJSON.geometry = arcgisToGeoJSON(geoJSON.geometry);
然後在我的代碼中有以下方法:
onExport() {
//導出所有繪製元素的json數組
loadModules(["esri/geometry/support/webMercatorUtils", "esri/Graphic"])
.then(([webMercatorUtils, Graphic]) => {
let arcgisJSON={}
let graphicJSON = this.drawLayer.graphics.map(item => {
// //3857 => 4326
item.geometry = webMercatorUtils.webMercatorToGeographic(
item.geometry
);
arcgisJSON = item.toJSON();
//保存spatialReference信息
arcgisJSON.attributes._spatialReference = JSON.parse(
JSON.stringify(arcgisJSON.geometry.spatialReference)
);
console.log("arc",arcgisJSON)
arcgisJSON.geometry = arcgisToGeoJSON(arcgisJSON.geometry);
console.log("arc1",arcgisJSON)
return arcgisJSON;
});
console.log("arc2",graphicJSON.items)
this.$emit("exportGraphicList", graphicJSON.items);
let geoJsonArr = graphicJSON.items;
geoJsonArr.forEach(geoJson => {
geoJson.geometry = geojsonToArcGIS(geoJson.geometry);
//獲取spatialReference信息
geoJson.geometry.spatialReference =
geoJson.attributes._spatialReference;
let center = Graphic.fromJSON(geoJson).geometry.extent.center;
store.commit("setCenterPoint", center);
});
})
.catch(err => {
console.error(err);
});
},
打印出來的 arc 和 arc1結果如下圖:
明明 arc 和 arc1 中間進行了arcgisJsonToGeoJson的轉化,可是結果兩個卻都還是arcgisJson。
於是打斷點進行調試,結果如下兩張圖(第一張展示arc的值,第二張展示arc1的值)
斷點發現並沒有問題,確實把arcgisJson轉成了geoJson,但是打印出來的不對,最終執行的結果(想實現的效果)也不對;
原來,在我的方法中出現了數組的map循環和foreach循環(如下圖)
map和foreach同時執行,arcdisJson在map中被轉成了geoJson,可是同時又在foreach中轉成了arcgisJson,所以在arc1位置打印出來的內容還是arcgisJson格式的;然而debugger一步一步按代碼順序來,所以顯示的arc1位置的arcgisJson是正常的轉換過的geoJson格式的數據。
解決方法把需要用到的geoJson和arcgisJson的方法換一下位置,因爲獲取到的本來就是arcgisJson格式的,這樣整個方法中只用轉換一次(把arcgisJson轉換成geoJson就可以了)。
**
總結一下:console和debugger展示不一樣,注意代碼執行順序與時間問題!
**