<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%;
}
#draw{
position:absolute;
right:18%;
top:2%;
}
#editor {
position: absolute;
right: 14%;
top: 2%;
}
#undo {
position: absolute;
right: 10%;
top: 2%;
}
#redo {
position: absolute;
right: 6%;
top: 2%;
}
#change {
position: absolute;
right: 2%;
top: 2%;
}
</style>
<link rel="stylesheet"
href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.23/"></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=',
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=',
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 changePolygonSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [0, 0, 255],
width: 4
};
let polygonGraphic = new Graphic({
geometry: polygon,
symbol: polygonSymbol,
});
/**** 构造多边形***/
let graphicsLayer = new GraphicsLayer();
graphicsLayer.add(polygonGraphic);
map.add(graphicsLayer);
// 创建编辑工具
var sketchViewModel = new SketchViewModel({
layer: graphicsLayer,
view: mapview,
activeFillSymbol:{
type: "simple-fill",
style: "solid",
color: [255, 0, 0, 0.2],
outline: {
color: [255, 0, 0],
width: 1
}
},
snappingOptions: {
enabled: true,
featureSources: [{
layer: graphicsLayer, enabled: true
}]
}
});
sketchViewModel.updateOnGraphicClick = false;
//绘制
document.getElementById("draw").addEventListener("click", function () {
sketchViewModel.updateOnGraphicClick = false;
sketchViewModel.create("polygon", { "mode": "click" });
})
//编辑
document.getElementById("editor").addEventListener("click", function () {
//编辑图形绑定事件
sketchViewModel.update([drawGraphic], {
tool: "reshape",
enableRotation: false, //是否旋转
enableScaling: false, //是否缩放
preserveAspectRatio: false,
toggleToolOnClick: false, //是否可以在转换和重塑更新选项之间切换
reshapeOptions: { shapeOperation: "move-xy" },
});
})
//撤销
document.getElementById("undo").addEventListener("click", function () {
sketchViewModel.undo();
})
//恢复
document.getElementById("redo").addEventListener("click", function () {
sketchViewModel.redo();
})
//恢复
document.getElementById("change").addEventListener("click", function () {
console.log("change")
drawGraphic.symbol=changePolygonSymbol;
})
//绘制图形绑定事件
sketchViewModel.on("create", onGraphicCreate);
sketchViewModel.on("update", onGraphicUpdate);
let drawGraphic;
//绘制完执行函数
function onGraphicCreate(event) {
if (event.state === "complete") {
drawGraphic = event.graphic;
drawGraphic.symbol = polygonSymbol;
console.log(drawGraphic)
graphicsLayer.add(event.graphic);
}
}
//编辑完执行函数
function onGraphicUpdate(event) {
const graphic = event.graphics[0];
if (event.state === "complete") {
console.log(graphic);
drawGraphic = event.graphics[0];
console.log(drawGraphic)
}
}
});
</script>
</head>
<body>
<div id="viewDiv" style="float: left; width: 100%; height: 100%"></div>
<button id="draw">绘制</button>
<button id="editor">编辑</button>
<button id="undo">撤销</button>
<button id="redo">恢复</button>
<button id="change">更改样式</button>
</body>
</html>
arcgis js 4.26实现绘制、编辑及样式更改
最新推荐文章于 2024-06-03 14:14:25 发布