生活随笔
收集整理的这篇文章主要介绍了
arcgis api 4.x 实现动态测距和计算面积
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
先来个效果图：
图片是静态的，没有体现出来动态的效果，实际效果是测距和面积会随着鼠标的位置实时显示当前线段的长度或者面积大小。
本例采用arcgis api 4.x，原理是调用draw绘制工具，监听draw过程中的不同事件，并通过事件中获得的经纬度信息去绘制polyline和polygon。draw事件参考官方文档：4.x draw文档
通过"esri/geometry/geometryEngine" 中的geodesicLength()和geodesicArea()方法去计算长度和面积。官方文档：geodesicLength()和geodesicArea()
全部代码：复制可直接运行。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>arcgis api 4.x 实现动态测距和计算面积
</title><link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css"><style>body,html {margin: 0;padding: 0;width: 100%;height: 100%;font-family: Arial;}#map {width: 100%;height: 100%;margin: 0;padding: 0;border: 0px dashed black;background-color: rgb(0, 38, 48);}</style>
</head>
<body><button type="button" onclick="drawLine()">测距
</button><button type="button" onclick="drawPolygon()">面积
</button><div id="map"></div>
</body>
<script src="https://js.arcgis.com/4.15/"></script>
<script type="text/javascript">var map, drawLine, drawPolygon;require(["esri/Map",'esri/Color','esri/symbols/SimpleLineSymbol',"esri/views/MapView","esri/layers/TileLayer",'esri/views/draw/Draw','esri/geometry/geometryEngine','esri/geometry/Point','esri/geometry/Polyline','esri/geometry/Polygon','esri/layers/GraphicsLayer','esri/Graphic',"dojo/domReady!"], function(Map,Color,SimpleLineSymbol,MapView,TileLayer,Draw,GeometryEngine,Point,Polyline,Polygon,GraphicsLayer,Graphic) {var tileLayer = new TileLayer({ url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"}) var lineLayer = new GraphicsLayer() var polygonLayer = new GraphicsLayer() map = new Map({layers:[tileLayer, lineLayer, polygonLayer],});map.on('load', function() {map.hideZoomSlider()map.hidePanArrows()map.disableDoubleClickZoom() })var view = new MapView({container: "map",map: map,zoom: 8,spatialReference: {wkid: 3857},center: [110.72, 18.92] });drawLine = function() {let draw = new Draw({ view: view})let action = draw.create("polyline") view.focus()action.on(["vertex-add", "vertex-remove", "cursor-update", "draw-complete" ],function(evt){createLine(evt.vertices)})}drawPolygon = function() {let draw = new Draw({ view: view})let action = draw.create("polygon") view.focus()action.on(["vertex-add", "vertex-remove", "cursor-update", "draw-complete" ],function(evt){createPolygon(evt.vertices)})}createLine = function(vertices) {lineLayer.removeAll() let symbol = { type: "simple-marker",color: [47,79,79],width: 0.5,size: 4,outline: {color: [ 0, 0, 0 ],width: 1 }}let startGraphics = new Graphic({geometry: new Point({type: "point",x: vertices[0][0], y: vertices[0][1], spatialReference: view.spatialReference }),symbol: symbol})lineLayer.add(startGraphics)let lineGraphics = new Graphic({geometry: new Polyline({paths: vertices,spatialReference: view.spatialReference}),symbol: { type: "simple-line", style: "dash",color: [176,196,222],width: 2}});lineLayer.add(lineGraphics)let linePath = [] pointStart = [] pointStart.push(vertices[0][0])pointStart.push(vertices[0][1])linePath.push(pointStart)for (let i = 1; i < vertices.length ; i++) { let point = {type:"point",x:vertices[i][0],y:vertices[i][1],spatialReference: view.spatialReference};let mouseGraphics = new Graphic({geometry:point,symbol: symbol})let xy = [] xy.push(vertices[i][0])xy.push(vertices[i][1]) linePath.push(xy)let line = new Polyline({ paths: linePath,spatialReference: view.spatialReference})let length = GeometryEngine.geodesicLength(line, 'meters').toFixed(2) let lengthText = lengthFormat(length) let textSymbol = { type: "text",color: "white",haloColor: "black",haloSize: "2px",text: lengthText,xoffset: '50px',yoffset: '-5px',font: {size: 12,family: "sans-serif",weight: "bold"}}let textGraphics = new Graphic({ geometry:point,symbol: textSymbol});lineLayer.addMany([textGraphics, mouseGraphics ])}}createPolygon = function(vertices) {polygonLayer.removeAll();let symbol = { type: "simple-marker",color: [47,79,79],width: 0.5,size: 4,outline: {color: [ 0, 0, 0 ],width: 1 }}let fillSymbol = { type: "simple-fill", color: [3, 255, 240, 0.1],outline: { color: [255,116,3],width: 2}}let polygon = new Polygon({rings: vertices,spatialReference: view.spatialReference})let polygonGraphics = new Graphic({geometry: polygon,symbol: fillSymbol})polygonLayer.add(polygonGraphics);let area = GeometryEngine.geodesicArea(polygon,'square-meters')let areaText = areaFormat(area)let center = polygon.centroidlet pointCenter = {type:"point",longitude:center.longitude,latitude:center.latitude};let textSymbol = { type: "text",color: "white",haloColor: "black",haloSize: "2px",text: areaText,font: {size: 12,family: "sans-serif",weight: "bold"}}let textGraphics = new Graphic({ geometry:pointCenter,symbol: textSymbol});polygonLayer.add(textGraphics);for (let i = 0; i <vertices.length ; i++) {let point = {type:"point",x:vertices[i][0],y:vertices[i][1],spatialReference: view.spatialReference};let pointGraphics=new Graphic({geometry:point,symbol: symbol});polygonLayer.add(pointGraphics)}}function lengthFormat(length) {if (length < 2000) {return lengthText = length + "米"}else {length = (length/1000).toFixed(2)return lengthText = length + "千米"}}function areaFormat(area) {if (area < 2000) {area = area.toFixed(2)return areaText = area + "平方米"}else {area = (area/10000).toFixed(2)return areaText = area + "平方千米"}}});
</script>
</html>
总结
以上是生活随笔为你收集整理的arcgis api 4.x 实现动态测距和计算面积的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
