编写代码:arcgis api for js 创建FeatureLayer,其中FeatureLayer图层中包含很多多边形要素。要求提供一个多边形/矩形绘制工具,通过点击多边形按钮或者矩形按钮进行形状绘制。判断绘制的形状与FeatureLayer中的多边形要素的包含关系,突出显示包含在绘制的形状内部的要素,并输出要素的信息
时间: 2024-03-29 13:35:26 浏览: 56
好的,我来给你提供一份代码示例,实现你所需的功能:
```javascript
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/geometryEngine",
"esri/geometry/Polygon",
"esri/geometry/Extent",
"esri/layers/GraphicsLayer",
"esri/widgets/Draw"
], function(Map, MapView, FeatureLayer, Graphic, geometryEngine, Polygon, Extent, GraphicsLayer, Draw) {
// 创建地图
var map = new Map({
basemap: "streets"
});
// 创建地图视图
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80500, 34.02700], // 设置地图中心点
zoom: 13 // 设置缩放级别
});
// 创建 FeatureLayer
var featureLayer = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2"
});
// 添加 FeatureLayer 到地图
map.add(featureLayer);
// 创建一个 GraphicsLayer,用于存储符合要求的要素
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
// 创建 Draw 工具
var draw = new Draw({
view: view
});
// 创建多边形按钮
var polygonButton = document.createElement("button");
polygonButton.innerHTML = "绘制多边形";
polygonButton.addEventListener("click", function() {
drawPolygon();
});
view.ui.add(polygonButton, "top-right");
// 创建矩形按钮
var rectangleButton = document.createElement("button");
rectangleButton.innerHTML = "绘制矩形";
rectangleButton.addEventListener("click", function() {
drawRectangle();
});
view.ui.add(rectangleButton, "top-right");
// 绘制多边形
function drawPolygon() {
// 清空 GraphicsLayer
graphicsLayer.removeAll();
// 设置 Draw 工具为多边形
draw.active = "polygon";
// 监听 draw-end 事件
draw.on("draw-end", function(event) {
// 获取用户绘制的多边形
var polygon = new Polygon(event.geometry);
// 遍历 FeatureLayer 中的要素
featureLayer.queryFeatures().then(function(results) {
results.features.forEach(function(feature) {
// 判断要素是否包含在用户绘制的多边形内部
if (geometryEngine.contains(polygon, feature.geometry)) {
// 将符合要求的要素添加到 GraphicsLayer 中
graphicsLayer.add(new Graphic(feature.geometry, null, feature.attributes));
}
});
});
});
}
// 绘制矩形
function drawRectangle() {
// 清空 GraphicsLayer
graphicsLayer.removeAll();
// 设置 Draw 工具为矩形
draw.active = "rectangle";
// 监听 draw-end 事件
draw.on("draw-end", function(event) {
// 获取用户绘制的矩形
var extent = new Extent(event.geometry);
var polygon = Polygon.fromExtent(extent);
// 遍历 FeatureLayer 中的要素
featureLayer.queryFeatures().then(function(results) {
results.features.forEach(function(feature) {
// 判断要素是否包含在用户绘制的矩形内部
if (geometryEngine.contains(polygon, feature.geometry)) {
// 将符合要求的要素添加到 GraphicsLayer 中
graphicsLayer.add(new Graphic(feature.geometry, null, feature.attributes));
}
});
});
});
}
});
```
这个代码示例创建了一个地图视图,加载了一个包含多个多边形要素的 FeatureLayer,并提供了两个按钮,用于绘制多边形和矩形。当用户绘制完形状后,代码会判断 FeatureLayer 中的每个要素是否包含在用户绘制的形状内部,如果是,则将要素添加到一个 GraphicsLayer 中,并将其突出显示。同时,代码还会输出符合要求的要素的属性信息。
希望这个代码示例能够帮助到你。如果你有任何问题,请随时问我。
阅读全文