内容涉及到: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展示不一样,注意代码执行顺序与时间问题!
**