图层划片前置知识：
- GraphicsLayer
- Graphic
- SketchViewModel
什么是 GraphicsLayer ？
A&Q：字面意思: 图形图层，用于在arcgis 中承载 矢量几何图形 （通俗来说我们可以在 GraphicsLayer 图层中进行绘制几何图形）
什么是 Graphic ？
A&Q: 图形是现实世界地理现象的矢量表示（地图中显示的可视化图形），包含geometry几何图形、symbol（符号）、和 attributes属性
什么是 SketchViewModel ？
A&Q: 是 Sketch 部件提供的逻辑（暴露给开发人员的绘图接口），sketchViewModel 旨在与Graphics一起使用，并且需要在 配置参数中指定 layer 属性 为 GraphicsLayer 的实例；
require(
[
'esri/WebMap',
'esri/views/MapView',
'esri/layers/GraphicsLayer',
'esri/Graphic',
'esri/widgets/Sketch/SketchViewModel',
],
(WebMap, MapView, GraphicsLayer, Graphic, SketchViewModel) => {
// 创建地图服务
const webmap = new WebMap({
portalItem: {
id: "e691172598f04ea8881cd2a4adaa45ba"
}
});
// 创建视图
const view = new MapView({
map: webmap,
container: "viewDiv",
zoom: 4,
center: [-100.4593, 36.9014]
});
const graphicsLayer = new GraphicsLayer(); // 绘制图层
// 使用 SketchViewModel
const sketchViewModel = new SketchViewModel({
layer: graphicsLayer,
view: view,
pointSymbol: {
type: '', // 绘制什么图形
color: [], // 绘制的颜色
...
}
})
}))
sketchViewModel的交互操作
- 为 sketchViewModel 绑定click事件
- 通过
sketchViewModel的create、update等事件的监听
methed
- create：当开始绘图、正在绘图、完成绘图时触发，获取到绘制图形的地图要素信息；
sketchViewModel.on(['create'], (event) => {
// event.state事件状态： start、active、complete、cancel
if (event.state == 'complete') {
sketchGeometry = event.graphic.geometry;
}
})
sketchViewModel.on(["update"], (event) => {
const eventInfo = event.toolEventInfo;
// update the filter every time the user moves the filtergeometry
if (eventInfo && eventInfo.type.includes("move")) {
if (eventInfo.type === "move-stop") {
sketchGeometry = event.graphics[0].geometry;
}
}
// update the filter every time the user changes the vertices of the filtergeometry
if (eventInfo && eventInfo.type.includes("reshape")) {
if (eventInfo.type === "reshape-stop") {
sketchGeometry = event.graphics[0].geometry;
}
}
});
- update：当更新绘图、或完成绘图时触发，回调内获取地理要素信息；
- delete：当用户点击小部件 delete功能按钮、或调用delete()方法时触发；
- redo/undo：当用户重做/撤销时触发
绘制图形绑定click事件
绘制什么图形
document.getElementById("polygon-geometry-button").onclick = geometryButtonsClickHandler;
function geometryButtonsClickHandler(event) {
const geometryType = event.target.value; // 获取要画什么图形 polygon、polyline
sketchViewModel.create(geometryType); // 调用create方法，开始绘制
}
完整代码
<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/WebMap',
'esri/views/MapView',
'esri/layers/GraphicsLayer',
'esri/Graphic',
'esri/widgets/Sketch/SketchViewModel',
],
(WebMap, MapView, GraphicsLayer, Graphic, SketchViewModel) => {
// 创建地图服务
const webmap = new WebMap({
portalItem: {
id: "e691172598f04ea8881cd2a4adaa45ba"
}
});
// 创建视图
const view = new MapView({
map: webmap,
container: "viewDiv",
zoom: 4,
center: [-100.4593, 36.9014]
});
const sketchLayer = new GraphicsLayer(); // 绘制草图图层
const bufferLayer = new GraphicsLayer();
// create the layerView's to add the filter
let sceneLayerView = null;
let featureLayerView = null;
view.map.addMany([sketchLayer, bufferLayer]); // 把图层添加到视图图层中
view.map.load().then(() => {
view.map.layers.forEach((layer, index) => {
view.whenLayerView(layer)
.then((layerView) => {
if (layer.type === "feature") {
featureLayerView = layerView;
}
if (layer.type === "scene") {
sceneLayerView = layerView;
}
}).catch(() => console.error());
})
})
// use SketchViewModel to draw polygons that are used as a filter
let sketchGeometry = null;
const sketchViewModel = new SketchViewModel({
layer: sketchLayer,
view: view,
pointSymbol: {
type: "simple-marker",
style: "circle",
size: 10,
color: [255, 255, 255, 0.8],
outline: {
color: [211, 132, 80, 0.7],
size: 10
}
},
polylineSymbol: {
type: "simple-line",
color: [211, 132, 80, 0.7],
width: 6
},
polygonSymbol: {
type: "simple-fill",
symbolLayers: [
{
type: "fill",
material: {
color: [255, 255, 255, 0.8]
},
outline: {
color: [211, 132, 80, 0.7],
size: "10px"
}
}
]
},
defaultCreateOptions: { hasZ: false }
})
sketchViewModel.on(['create'], (event) => {
if (event.state == 'complete') {
sketchGeometry = null;
sketchGeometry = event.graphic.geometry;
}
})
sketchViewModel.on(["update"], (event) => {
const eventInfo = event.toolEventInfo;
// update the filter every time the user moves the filtergeometry
if (eventInfo && eventInfo.type.includes("move")) {
if (eventInfo.type === "move-stop") {
sketchGeometry = event.graphics[0].geometry;
}
}
// update the filter every time the user changes the vertices of the filtergeometry
if (eventInfo && eventInfo.type.includes("reshape")) {
if (eventInfo.type === "reshape-stop") {
sketchGeometry = event.graphics[0].geometry;
}
}
});
// draw geometry buttons - use the selected geometry to sktech
document.getElementById("point-geometry-button").onclick = geometryButtonsClickHandler;
document.getElementById("line-geometry-button").onclick = geometryButtonsClickHandler;
document.getElementById("polygon-geometry-button").onclick = geometryButtonsClickHandler;
function geometryButtonsClickHandler(event) {
const geometryType = event.target.value; // 获取要画什么图形
sketchViewModel.create(geometryType);
}
})
</script>
<div id="viewDiv"></div>
<div id="infoDiv" class="esri-widget">
<div class="geometry-options">
<button class="esri-widget--button esri-icon-map-pin geometry-button" id="point-geometry-button"
value="point" title="Filter by point"></button>
<button class="esri-widget--button esri-icon-polyline geometry-button" id="line-geometry-button"
value="polyline" title="Filter by line"></button>
<button class="esri-widget--button esri-icon-polygon geometry-button" id="polygon-geometry-button"
value="polygon" title="Filter by polygon"></button>
</div>
</div>
链接地址:
- pointSymbol 属性: developers.arcgis.com/javascript/…
