<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"
? ? ? ? ? />
? ? <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
? ? ? ? ? ? });
? ? ? ? ? ? /**** 構(gòu)造多邊形***/
? ? ? ? ? ? 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,
? ? ? ? ? ? });
? ? ? ? ? ? /**** 構(gòu)造多邊形***/
? ? ? ? ? ? let graphicsLayer = new GraphicsLayer();
? ? ? ? ? ? graphicsLayer.add(polylineGraphic);
? ? ? ? ? ? map.add(graphicsLayer);
? ? ? ? ? ? ?// 創(chuàng)建編輯工具
? ? ? ? ? ? var sketchViewModel = new SketchViewModel({
? ? ? ? ? ? ? ? layer: graphicsLayer,
? ? ? ? ? ? ? ? view: mapview,
? ? ? ? ? ? ? ? defaultUpdateOptions: "move"
? ? ? ? ? ? });
? ? ? ? ? ? //如果設(shè)置false，則單擊無法實(shí)現(xiàn)選擇要素進(jìn)行更新操作?
? ? ? ? ? ? //sketchViewModel.updateOnGraphicClick = false;
? ? ? ? ? ? sketchViewModel.on("update", onGraphicUpdate);
? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ? //監(jiān)聽函數(shù)
? ? ? ? ? ? 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>
文章來源：http://www.zghlxwxcb.cn/news/detail-533904.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-533904.html
到了這里，關(guān)于基于arcgis js 4.x實(shí)現(xiàn)編輯多邊形節(jié)點(diǎn)問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
