生活随笔
收集整理的這篇文章主要介紹了
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 实现动态测距和计算面积的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
