<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Synchronize MapView and SceneView | Sample | ArcGIS Maps SDK for
JavaScript 4.26
</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
</style>
<link rel="stylesheet"
href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.26/"></script>
<script>
require(["esri/Map", "esri/views/MapView", "esri/Graphic", "esri/layers/GraphicsLayer",
"esri/widgets/Editor",
"esri/layers/TileLayer", "esri/layers/WMTSLayer", "esri/layers/WebTileLayer",
"esri/geometry/Extent", "esri/geometry/Point",
"esri/widgets/Sketch/SketchViewModel",
], (
Map,
MapView, Graphic, GraphicsLayer, Editor,
TileLayer, WMTSLayer, WebTileLayer, Extent, Point,SketchViewModel
) => {
const map = new Map();
var tdtVecLayer = new WebTileLayer({
urlTemplate:
'http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=22cf8525db5d2a1d0d5533798645b867',
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
})
var tdtPoiLayer = new WebTileLayer({
urlTemplate:
'http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=22cf8525db5d2a1d0d5533798645b867',
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
})
map.add(tdtVecLayer);
map.add(tdtPoiLayer);
var mapview = new MapView({
container: "viewDiv",
center: [118.884968, 32.12381],
zoom: 14,
map: map
});
/**** 构造多边形***/
const rings = [
[ // first ring
[118.884968, 32.12381],
[118.894968, 32.12381],
[118.894968, 32.13381],
[118.884968, 32.13381],
[118.884968, 32.12381]
]
];
let polygon = {
type: "polygon", // autocasts as new Polyline()
rings: rings
};
let polygonSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [226, 119, 40],
width: 4
};
let polylineGraphic = new Graphic({
geometry: polygon,
symbol: polygonSymbol,
});
/**** 构造多边形***/
let graphicsLayer = new GraphicsLayer();
graphicsLayer.add(polylineGraphic);
map.add(graphicsLayer);
// 创建编辑工具
var sketchViewModel = new SketchViewModel({
layer: graphicsLayer,
view: mapview,
defaultUpdateOptions: "move"
});
//如果设置false,则单击无法实现选择要素进行更新操作
//sketchViewModel.updateOnGraphicClick = false;
sketchViewModel.on("update", onGraphicUpdate);
//监听函数
function onGraphicUpdate(event) {
const graphic = event.graphics[0];
if (event.state === "complete") {
//取到更改之后的要素
console.log(graphic);
}
}
});
</script>
</head>
<body>
<div id="viewDiv" style="float: left; width: 100%; height: 100%"></div>
</body>
</html>
文章来源:https://www.toymoban.com/news/detail-533904.html
文章来源地址https://www.toymoban.com/news/detail-533904.html
到了这里,关于基于arcgis js 4.x实现编辑多边形节点问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!