按下面的要求编写代码:arcgis api for js 创建FeatureLayer,其中FeatureLayer图层中包含很多多边形要素。要求提供一个多边形/矩形绘制工具,通过点击多边形按钮或者矩形按钮进行形状绘制。判断绘制的形状与FeatureLayer中的多边形要素的包含关系,突出显示包含在绘制的形状内部的要素
时间: 2024-03-28 16:37:55 浏览: 15
以下是基于ArcGIS API for JavaScript的代码示例,实现创建FeatureLayer、绘制多边形/矩形、判断包含关系和突出显示:
```javascript
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/geometryEngine",
"esri/widgets/Sketch/SketchViewModel",
"esri/widgets/Sketch",
"esri/widgets/Expand",
"dojo/domReady!"
], function(Map, MapView, FeatureLayer, Graphic, geometryEngine, SketchViewModel, Sketch, Expand) {
// 创建地图和视图
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.805, 34.027],
zoom: 13
});
// 创建 FeatureLayer
var featureLayer = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2"
});
// 向地图添加 FeatureLayer
map.add(featureLayer);
// 创建 SketchViewModel 和 Sketch 组件
var sketchViewModel = new SketchViewModel({
view: view,
layer: new GraphicsLayer(),
pointSymbol: {
type: "simple-marker",
style: "square",
size: "8px",
color: "blue",
outline: {
color: [255, 255, 0],
width: 3
}
},
polylineSymbol: {
type: "simple-line",
color: "blue",
width: 3
},
polygonSymbol: {
type: "simple-fill",
color: [0, 0, 200, 0.3],
style: "solid",
outline: {
color: "blue",
width: 2
}
}
});
var sketch = new Sketch({
view: view,
viewModel: sketchViewModel,
container: "sketchDiv"
});
// 创建 Expand 组件,用于显示“多边形”和“矩形”按钮
var sketchExpand = new Expand({
view: view,
content: sketch.domNode,
expandIconClass: "esri-icon-edit",
group: "top-right"
});
view.ui.add(sketchExpand, "top-right");
// 监听 SketchViewModel 的 create event,获取绘制完成的图形
sketchViewModel.on("create", function(event) {
if (event.state === "complete") {
// 获取绘制完成的图形
var graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.polygonSymbol
});
// 向地图添加图形
view.graphics.add(graphic);
// 判断包含关系
var contains = geometryEngine.contains(featureLayer.fullExtent, event.geometry);
if (contains) {
// 高亮显示包含在绘制的形状内部的要素
featureLayer.definitionExpression = "1=1";
featureLayer.outFields = ["*"];
featureLayer.queryFeatures().then(function(results) {
var graphics = results.features.filter(function(feature) {
return geometryEngine.contains(event.geometry, feature.geometry);
}).map(function(feature) {
return new Graphic({
geometry: feature.geometry,
symbol: {
type: "simple-fill",
color: [255, 0, 0, 0.5],
style: "solid",
outline: {
color: "red",
width: 2
}
}
});
});
view.graphics.addMany(graphics);
});
}
}
});
});
```
该代码示例中,通过 SketchViewModel 和 Sketch 组件实现了绘制多边形/矩形的功能,并通过 geometryEngine.contains() 方法判断绘制的形状与 FeatureLayer 中的多边形要素的包含关系,最后将包含在绘制的形状内部的要素突出显示。