<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>geometry to JSON & JSON to geometry</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.11/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
100%;
}
</style>
<script>
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/layers/GraphicsLayer",
"esri/views/MapView",
"esri/Graphic",
"esri/geometry/Polygon"
], function (Sketch, Map, GraphicsLayer, MapView, Graphic, Polygon) {
const layer = new GraphicsLayer();
const map = new Map({
basemap: "osm",
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [90, 45]
});
const sketch = new Sketch({
layer: layer,
view: view
});
view.ui.add(sketch, "top-right");
sketch.on("create", function (evt) {
if (evt.state == "complete" && evt.graphic.geometry.type == "polygon") {
var jsons = {};//新建一个对象
jsons = evt.graphic.geometry.toJSON();
console.log(jsons);
var a = JSON.stringify(jsons);//a为转换后的json
console.log(a);
}
});
var newRings = {
type: "polygon",
"spatialReference":
{
"latestWkid": 3857,
"wkid": 102100
},
"rings": [[[8154913.67368921, 7162491.976420692],
[10067673.869496953, 3928899.9318454554],
[7822259.726592211, 4369177.214767953],
[8154913.67368921, 7162491.976420692]]]
};
var fillSymbol = {
type: "simple-fill",
color: [227, 139, 79, 0.8],
outline: {
color: [255, 255, 255],
1
}
};
var po = Polygon.fromJSON(newRings);
var polygonGraphic = new Graphic({
geometry: po,
symbol: fillSymbol
});
view.graphics.add(polygonGraphic);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>