<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定义测量工具</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.14/"></script>
<style>
html,
body {
position: relative;
padding: 0;
margin: 0;
}
.map {
width: 100vw;
height: 100vh;
}
.button {
position: absolute;
top: 30px;
right: 30px;
}
</style>
</head>
<body>
<div id="viewDiv" class="map"></div>
<div class="button">
<button
onclick="removeLayers(['maplayer_measure', 'maplayer_measure_text']);doMeasure('distance');sketchView.create('polyline', { mode: 'click' });">测距</button>
<button
onclick="removeLayers(['maplayer_measure', 'maplayer_measure_text']);doMeasure('area');sketchView.create('polygon', { mode: 'click' });">测面</button>
</div>
<script>
var map, view;
var geoservice;
var sketchView;
var gisModules = {};
require([
"esri/config",
"esri/Map",
"esri/WebMap",
"esri/views/MapView",
"esri/layers/TileLayer",
"esri/layers/WebTileLayer",
"esri/layers/MapImageLayer",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/geometry/Extent",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/geometry/geometryEngine",
"esri/geometry/SpatialReference",
"esri/Color",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"esri/symbols/Font",
"esri/tasks/GeometryService",
"esri/tasks/support/LengthsParameters",
"esri/tasks/support/AreasAndLengthsParameters",
"esri/widgets/Sketch",
"esri/widgets/Sketch/SketchViewModel",
"esri/widgets/DistanceMeasurement2D",
"esri/widgets/AreaMeasurement2D",
], function (config, Map, WebMap, MapView, TileLayer, WebTileLayer, MapImageLayer, GraphicsLayer, FeatureLayer,
Graphic, Extent, Point, Polyline, Polygon, geometryEngine, SpatialReference, Color, PictureMarkerSymbol,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, TextSymbol, Font, GeometryService, LengthsParameters,
AreasAndLengthsParameters, Sketch, SketchViewModel, DistanceMeasurement2D, AreaMeasurement2D) {
gisModules.config = config;
gisModules.Map = Map;
gisModules.WebMap = WebMap;
gisModules.MapView = MapView;
gisModules.TileLayer = TileLayer;
gisModules.WebTileLayer = WebTileLayer;
gisModules.MapImageLayer = MapImageLayer;
gisModules.GraphicsLayer = GraphicsLayer;
gisModules.FeatureLayer = FeatureLayer;
gisModules.Graphic = Graphic;
gisModules.Extent = Extent;
gisModules.Point = Point;
gisModules.Polyline = Polyline;
gisModules.Polygon = Polygon;
gisModules.geometryEngine = geometryEngine;
gisModules.SpatialReference = SpatialReference;
gisModules.Color = Color;
gisModules.PictureMarkerSymbol = PictureMarkerSymbol;
gisModules.SimpleMarkerSymbol = SimpleMarkerSymbol;
gisModules.SimpleLineSymbol = SimpleLineSymbol;
gisModules.SimpleFillSymbol = SimpleFillSymbol;
gisModules.TextSymbol = TextSymbol;
gisModules.Font = Font;
gisModules.GeometryService = GeometryService;
gisModules.LengthsParameters = LengthsParameters;
gisModules.AreasAndLengthsParameters = AreasAndLengthsParameters;
gisModules.Sketch = Sketch;
gisModules.SketchViewModel = SketchViewModel;
gisModules.DistanceMeasurement2D = DistanceMeasurement2D;
gisModules.AreaMeasurement2D = AreaMeasurement2D;
map = new Map({
basemap: "streets"
});
view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
});
geoservice = new GeometryService(
"https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
});
/**
* 自定义测量工具
* @param {string} measureType 测量类型(distance,area)
* @param {function} onComplete 测量完成回调
*/
function doMeasure(measureType, onComplete) {
// 坐标集合
var pointList = [];
// 总长度
var totalDistance = 0;
// 判断测量完成
var measureIdx = 0;
var graphicsLayerMeasure = new gisModules.GraphicsLayer({
id: "maplayer_measure"
});
var graphicsLayerText = new gisModules.GraphicsLayer({
id: "maplayer_measure_text"
});
map.add(graphicsLayerMeasure);
map.add(graphicsLayerText);
var distanceMeasure = function (evt) {
if (evt.state == 'complete') {
if (onComplete) onComplete();
}
if (evt.toolEventInfo && evt.toolEventInfo.type == "vertex-add") {
var x = evt.toolEventInfo.added[0];
var y = evt.toolEventInfo.added[1];
var point = new gisModules.Point([x, y], view.spatialReference);
pointList.push(point);
var pointSymbol = {
type: "simple-marker",
color: [255, 255, 255, 1],
outline: {
color: [0, 0, 0, 1],
width: 1
},
size: 6,
};
var pointGraphic = new gisModules.Graphic(point, pointSymbol);
graphicsLayerMeasure.add(pointGraphic);
if (pointList.length === 1) {
var startSymbol = {
type: "text",
color: [50, 50, 50, 1],
font: {
size: 12,
},
text: "起点",
xoffset: 8,
yoffset: -3,
haloColor: [255, 255, 255, 1],
haloSize: 1
};
var startGeometry = new gisModules.Point(point, view.spatialReference);
var startGraphic = new gisModules.Graphic(startGeometry, startSymbol);
graphicsLayerText.add(startGraphic);
} else if (pointList.length >= 2) {
var params = new gisModules.LengthsParameters();
params.lengthUnit = gisModules.GeometryService.UNIT_KILOMETER;
params.calculationType = "preserveShape";
var p1 = pointList[pointList.length - 2];
var p2 = pointList[pointList.length - 1];
var polyline = new gisModules.Polyline([
[p1.x, p1.y],
[p2.x, p2.y]
], view.spatialReference);
params.polylines = [polyline];
geoservice.lengths(params).then(function (distance) {
var les = distance.lengths[0];
var dis = totalDistance + les;
totalDistance += +les.toFixed(2);
// 小于一公里单位为米
if (dis < 1) {
dis = Math.round(dis * 1000) + "m";
} else {
dis = dis.toFixed(2) + "km";
}
// 节点距离
var textSymbol = {
type: "text",
color: [50, 50, 50, 1],
font: {
size: 12,
},
text: dis,
xoffset: 8,
yoffset: -3,
haloColor: [255, 255, 255, 1],
haloSize: 1
};
var textGeometry = new gisModules.Point(p2, view.spatialReference);
var textGraphic = new gisModules
