以下是基于你的代码需求，在不改变原有代码结构的基础上，添加测量距离与面积的功能。以下是完整的解决方案：
### 修改后的代码
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-1 findtask</title>
<!-- 用来引入esri.css和tundra.css
样式表 -->
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.45/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.45/esri/css/esri.css"/>
<!-- 用来引入init.js，即可引入ArcGIS API for Javascript-->
<script src="https://js.arcgis.com/3.45/init.js"></script>
<!-- style标签用来设定页面显示外观，其中width和hight分别用来设置组件mapDiv的宽和高，border用来设置mapdiv的边框
样式
.mapclass根据元素的id属性值，来精准的选中元素-->
<style>
.MapClass{
width:100%;
height: 500px;
border: 1px solid #000;
}
/* 添加测量按钮
样式 */
.measureButtons {
margin-top: 10px;
}
</style>
</head>
<body class="tundra">
<div id="mapDiv" class="MapClass"></div>
<!-- 查询功能 -->
Name:<input id="searchInput" type="text">
<button id="btn">查询</button>
<!-- 测量功能 -->
<div class="measureButtons">
<button id="measureLengthBtn">测量距离</button>
<button id="measureAreaBtn">测量面积</button>
<button id="clearMeasureBtn">清除测量</button>
</div>
<!-- 表格展示 -->
<table >
<thead>
<tr>
<th width="100px">名称</th>
<th width="100px">类型</th>
<th width="100px">面积</th>
</tr>
</thead>
<tbody id="infoBody"></tbody>
</table>
<script>
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/
SimpleFillSymbol",
"esri/geometry/Point",
"esri/Color",
"esri/graphic",
"esri/toolbars/draw", // 添加Draw工具栏
"esri/symbols/TextSymbol",
"esri/symbols/Font",
"esri/geometry/geodesicUtils"
],
function(Map, ArcGISDynamicMapServiceLayer, FindTask, FindParameters, SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol, Point, Color, Graphic, Draw, TextSymbol, Font, geodesicUtils) {
var map = new Map("mapDiv");
var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer");
map.addLayer(layer);
var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer");
var findParams = new FindParameters();
document.getElementById("btn").onclick = function funFind() {
var name = document.getElementById("searchInput").value;
map.graphics.clear();
findParams.returnGeometry = true;
findParams.layerIds = [0, 1];
findParams.searchFields = ["name"];
findParams.searchText = name;
findParams.returnGeometry = true;
findTask.execute(findParams, showFindResult);
};
function showFindResult(findResult) {
nameArr = [];
shapeArr = [];
AREAArr = [];
if (findResult.length === 0) {
alert("查询无结果");
return;
}
for (var i = 0; i < findResult.length; i++) {
nameArr[i] = findResult[i].feature.attributes.name;
shapeArr[i] = findResult[i].feature.attributes.Shape;
AREAArr[i] = findResult[i].feature.attributes.AREA;
var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 1);
var PolygonSymbol = new
SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([0, 255, 0, 1]));
var graphic = findResult[i].feature;
graphic.setSymbol(PolygonSymbol);
map.graphics.add(graphic);
}
var html = "";
for (var i = 0; i < nameArr.length; i++) {
html += "<tr>" +
" <td >" + nameArr[i] + "</td>" +
"<td >" + shapeArr[i] + "</td>" +
"<td >" + AREAArr[i] + "</td>" +
"</tr>";
}
document.getElementById("infoBody").innerHTML = html;
}
// 初始化测量工具
var toolbar = new Draw(map);
var measurementSymbol = new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]),
3
);
var measurementLabelSymbol = new TextSymbol(
"",
new Font("12pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD),
new Color([0, 0, 0])
);
// 测量距离按钮点击事件
document.getElementById("measureLengthBtn").onclick = function() {
toolbar.activate(Draw.POLYLINE);
map.hideZoomSlider();
};
// 测量面积按钮点击事件
document.getElementById("measureAreaBtn").onclick = function() {
toolbar.activate(Draw.POLYGON);
map.hideZoomSlider();
};
// 清除测量按钮点击事件
document.getElementById("clearMeasureBtn").onclick = function() {
toolbar.deactivate();
map.graphics.clear();
map.showZoomSlider();
};
// 测量工具事件
toolbar.on("draw-end", function(evt) {
toolbar.deactivate();
var geometry = evt.geometry;
var symbol;
if (geometry.type === "polyline") {
symbol = measurementSymbol;
var length = geodesicUtils.geodesicLengths([geometry], map.spatialReference)[0];
if (isNaN(length)) {
length = geometry.getLength(); // 如果geodesic计算失败，尝试平面计算
}
measurementLabelSymbol.setText(length.toFixed(2) + " 米");
} else if (geometry.type === "polygon") {
symbol = new
SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
measurementSymbol,
new Color([255, 0, 0, 0.2])
);
var area = geodesicUtils.geodesicAreas([geometry], map.spatialReference)[0];
if (isNaN(area)) {
area = geometry.getArea(); // 如果geodesic计算失败，尝试平面计算
}
measurementLabelSymbol.setText(area.toFixed(2) + " 平方米");
}
var graphic = new Graphic(geometry, symbol);
map.graphics.add(graphic);
var labelPoint = getLabelPoint(geometry);
var labelGraphic = new Graphic(labelPoint, measurementLabelSymbol);
map.graphics.add(labelGraphic);
map.showZoomSlider();
});
// 获取几何图形的中心点用于标签显示
function getLabelPoint(geometry) {
if (geometry.type === "point") {
return geometry;
} else if (geometry.type === "polyline") {
return geometry.getPoint(0, parseInt(geometry.getPointCount() / 2));
} else {
return geometry.getCentroid();
}
}
});
</script>
</body>
</html>
```
### 解释
1. **测量功能**：
- 添加了三个按钮：`测量距离`、`测量面积`和`清除测量`。
- 使用`Draw`工具栏实现绘制线段或多边形的功能。
- 在`draw-end`事件中，通过`geodesicUtils.geodesicLengths`和`geodesicUtils.geodesicAreas`计算距离和面积。
- 如果`geodesicUtils`返回`NaN`，则使用平面计算方法（`getLength()`和`getArea()`）。
2. **清除测量**：
- 点击“清除测量”按钮时，调用`toolbar.deactivate()`和`map.graphics.clear()`以清除所有测量内容。
3. **标签显示**：
- 测量结果显示在地图上，并通过`measurementLabelSymbol`显示文本。
###
扫一扫
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
