基于ArcGISJSAPI实现的两种距离和面积测量方式

共7个文件

png：3个

md：2个

js：1个

5星 · 超过95%的资源需积分: 50 96 浏览量 2019-04-14 16:44:04 上传评论 2 收藏 14KB RAR 举报

在GIS（地理信息系统）应用中，测量距离和面积是常见的需求，特别是在规划、环境分析、城市设计等领域。ArcGIS JavaScript API（简称ArcGIS JS API）是Esri公司提供的一种强大的Web GIS开发工具，允许开发者创建交互式的地图应用程序。本主题将深入探讨如何利用ArcGIS JS API实现两种不同的距离和面积测量方法。 1. **基本概念** - **ArcGIS JS API**：它是基于JavaScript的，用于构建功能丰富的Web GIS应用程序的库。它提供了与ArcGIS Server、ArcGIS Online等服务进行交互的能力，包括地图展示、图层操作、地理编码、测量等功能。 - **测量工具**：ArcGIS JS API 提供了内置的测量工具，允许用户在地图上测量距离、面积和角度。 2. **测量方法** - **几何对象计算**：第一种方法是通过创建和操作几何对象来实现测量。例如，可以使用`esri.geometry.Point`、`esri.geometry.Polyline`和`esri.geometry.Polygon`等类来构建路径或形状，然后使用`geometryEngine.geodesicArea`或`geometryEngine.geodesicLength`方法计算其面积和长度。这种方法适用于简单的测量需求。 - **互动式测量控件**：另一种方法是创建一个自定义的测量控件，用户可以在地图上交互地添加点或绘制图形，然后实时显示测量结果。这通常涉及到监听地图的鼠标事件，动态构建几何对象，并使用API的测量函数来计算。这种方法更适用于复杂的测量场景，提供更好的用户体验。 3. **实现细节** - **封装好的类文件**：这些文件可能包含了自定义的测量类，如`MeasurementTool.js`，其中可能包含测量控件的逻辑，如开始测量、添加点、结束测量以及结果显示等功能。 - **测试页面**：可能是一个HTML文件，如`index.html`，它引入了ArcGIS JS API库和自定义测量类，用户可以通过浏览器运行这个页面进行功能测试和验证。 - **资源文件**：可能包括CSS样式文件、图片资源等，用于美化测量控件和结果展示。 4. **实现步骤** - 引入ArcGIS JS API库和自定义测量类到HTML页面。 - 初始化地图，加载所需的图层和服务。 - 创建并实例化测量类，配置测量参数。 - 将测量控件添加到地图，设置事件监听器处理用户的交互操作。 - 在地图上绘制测量线或面，调用API进行计算，显示结果。 5. **注意事项** - 地图投影选择：测量结果受地图投影影响，不同投影下的距离和面积可能有所不同。应确保选择合适的投影系统以获取准确的测量结果。 - 地理坐标与平面坐标：ArcGIS JS API支持地理坐标和平面坐标，距离和面积的计算需考虑坐标系转换。 - 用户体验：优化交互流程，如提供清晰的指引，即时反馈测量状态，以及错误处理机制。 6. **扩展应用** - 结合其他GIS功能：如叠加分析、缓冲区分析等，以满足更复杂的业务需求。 - 移动端适配：考虑到移动设备的特性，优化测量控件在触摸屏上的操作体验。 7. **学习与进阶** - 学习Esri的官方文档，了解ArcGIS JS API的更多功能和最佳实践。 - 参加社区讨论，获取最新的开发资讯和技术支持。通过以上介绍，我们可以看到基于ArcGIS JS API实现的距离和面积测量不仅涉及基本的地图操作，还涵盖了交互设计、几何计算等多个方面，对于GIS开发人员来说，掌握这些技能能够提升地图应用的实用性和用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

ArcGIS_Measure.rar （7个子文件）

ArcGIS_Measure

index.html 3KB

icons

clear.png 806B

distance.png 766B

area.png 845B

ArcGIS_Measure.md 23KB

ArcGIS_WebMercator.md 1KB

modules

Measure.js 15KB

<!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>基于ArcGIS JS API实现的两种距离和面积测量方式</title> <link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css"> </head> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } .horizontal-toolbar{ position: absolute; top: 30px; right: 75px; /* width: 100px; */ height: 50px; overflow: hidden; background-color: white; border-radius: 4px; z-index: 100; } .horizontal-toolbar>li{ position: relative; margin: 5px; list-style: none; float: left; width: 46px; height: 46px; } </style> <script> var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')); //var package_path = window.location.pathname.replace(/\/[^\/]*$/,""); var dojoConfig = { // The locationPath logic below may look confusing but all its doing is // enabling us to load the api from a CDN and load local modules from the correct location. packages: [{ name: "modules", location: package_path + '/modules' }] }; </script> <script src="https://js.arcgis.com/3.27/"></script> <script> var map,measureTool; require([ "esri/map", "modules/Measure", "dojo/domReady!" ], function (Map, Measure) { map = new Map("map", { basemap: 'topo', center: [117.02156, 36.65993], zoom: 16 }); //方式一：使用几何服务 var options = { map: map, geometryServiceUrl: 'https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer' }; //方式二：不传几何服务参数，使用GeometryEngine // var options = { // map: map // }; measureTool = new Measure(options); }); function measureDistance () { measureTool.measureDistance(); } function measureArea () { measureTool.measureArea(); } function clearMeasureActionAndGraphics () { measureTool.clearMeasureActionAndGraphics(); } </script> <body> <div id="map" style="position:relative;"> <ul class="horizontal-toolbar"> <li onclick="measureDistance()"> <img src="./icons/distance.png" alt="测量距离" title="测量距离"> </li> <li onclick="measureArea()"> <img src="./icons/area.png" alt="测量面积" title="测量面积"> </li> <li onclick="clearMeasureActionAndGraphics()"> <img src="./icons/clear.png" alt="清除" title="清除"> </li> </ul> </div> </body> </html>

评论收藏

内容反馈