arcgis扇形可视域.zip_arcgisapi4.32可视域范围内加载点资源-CSDN下载

共3个文件

js：1个

png：1个

html：1个

数据分析

javascript

需积分: 5 188 浏览量 2019-09-04 15:41:13 上传评论收藏 115KB ZIP 举报

在GIS（地理信息系统）领域，ArcGIS是一款广泛使用的专业软件，用于地图制作、地理数据分析以及空间决策支持。本文将深入探讨“arcgis js4实现绘制扇形区域”的技术细节，以及如何通过调整半径和范围来创建灵活的可视域。 ArcGIS JavaScript API，简称arcgis js4，是Esri公司提供的一个强大的Web开发框架，它允许开发者利用JavaScript构建交互式地图应用。API包含了丰富的地图操作和分析功能，包括图层管理、几何操作、空间分析等。在本案例中，我们将关注如何利用这个API来创建扇形可视域。扇形区域是一种特殊的空间几何对象，它由中心点、半径和一个角度范围定义。在地理空间分析中，扇形可视域常用于模拟视线、声音传播或雷达覆盖范围。在ArcGIS js4中，我们可以通过构建几何对象并利用渲染器来实现扇形的可视化。我们需要创建一个中心点，这可以是一个Point几何对象，包含经度和纬度坐标。然后，定义扇形的半径，这可以是地图单位（如米或公里）。接着，设定扇形的角度范围，通常以度为单位。在JavaScript中，我们可以使用Math对象的acos和sin函数计算扇形边界点的坐标。接下来，我们要构建扇形的多边形边界。这通常涉及计算多个等距的点，每个点位于中心点和边界之间的连线上。这些点的计算需要考虑角度范围和半径。一旦我们有了这些点，就可以创建一个Polygon几何对象，并将其添加到地图图层上。为了使扇形可视，我们需要设置合适的渲染器。ArcGIS js4提供了多种渲染器选项，例如SimpleRenderer或UniqueValueRenderer。对于扇形，我们可以使用SimpleRenderer，设置填充色和描边色，以清晰地显示扇形区域。此外，用户交互性是这种功能的关键。为了让用户能够动态调整半径和范围，可以添加滑块或输入框控件，监听用户的输入变化，实时更新扇形的几何属性，并重新渲染地图。这需要对ArcGIS事件处理和DOM操作有深入理解。总结来说，通过ArcGIS JavaScript API，我们可以方便地在Web应用中实现扇形可视域的绘制。这涉及到地图几何对象的构造、渲染器的应用以及用户交互设计。在实际项目中，这种功能可用于各种场景，如安全监控、无线通信覆盖分析或是自然景观的视觉影响评估。了解并掌握这一技术将极大地扩展你在GIS领域的应用能力。

资源推荐

资源详情

资源评论

收起资源包目录

arcgis扇形可视域.zip （3个子文件）

arcgis扇形可视域

jquery-1.12.4.js 297KB

image

car.png 28KB

扇形可视域.html 13KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>扇形可视域</title> <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css"> <script src="https://js.arcgis.com/4.12/"></script> <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } .btn { position: absolute; top: 100px; left: 100px; width: 60px; text-align: center; } .radius-range { position: absolute; top: 60px; left: 50px; height: 30px; line-height: 30px; font-size: 14px; } .sector-range1 { position: absolute; top: 100px; left: 50px; height: 30px; line-height: 30px; font-size: 14px; } .sector-range { position: absolute; top: 140px; left: 50px; height: 30px; line-height: 30px; font-size: 14px; } .sector-animate { position: absolute; top: 180px; left: 50px; width: 60px; button { width: 100%; height: 30px; line-height: 30px; font-size: 14px; } } </style> </head> <body> <div id="viewDiv"></div> <div class="sector-animate"> <button class="open-animate">开启环视动画</button> <button class="close-animate">关闭环视动画</button> </div> <script type="text/javascript"> $(function() { require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/layers/GraphicsLayer", "esri/layers/TileLayer", "esri/geometry/Point", "esri/Graphic", "esri/geometry/Polyline", "esri/geometry/Polygon", "esri/geometry/geometryEngine", "esri/PopupTemplate", "esri/symbols/PictureMarkerSymbol", "esri/symbols/TextSymbol", "esri/geometry/support/webMercatorUtils", "esri/widgets/DistanceMeasurement2D", "esri/widgets/Sketch/SketchViewModel", "esri/geometry/SpatialReference", "esri/widgets/CoordinateConversion", "dojo/domReady!" ], function( esriConfig, Map, MapView, GraphicsLayer, TileLayer, Point, Graphic, Polyline, Polygon, geometryEngine, PopupTemplate, PictureMarkerSymbol, TextSymbol, webMercatorUtils, DistanceMeasurement2D, SketchViewModel, SpatialReference, CoordinateConversion) { var centerGp = null, moveGp = null; var map = new Map({ basemap: "streets" }); //创建GraphicsLayer层 var deviceLayer = new GraphicsLayer(); //设备图层 var sidePointLayer = new GraphicsLayer(); //弧上的点图层 var sectorLayer = new GraphicsLayer(); //扇形图层 map.add(deviceLayer) map.add(sectorLayer) map.add(sidePointLayer) var view = new MapView({ map: map, container: "viewDiv", center: [113.190248, 23.03], zoom: 10 }) var coor = new CoordinateConversion({ view: view }) view.ui.add(coor, "bottom-left") var devicePt = new Point({ x: 113.190248, y: 23.03, spatialReference: { wkid: 4326 } }); var symbol = new PictureMarkerSymbol({ url: "image/car.png", width: 40, height: 40 }); var devcieGraphic = new Graphic({ geometry: devicePt, symbol: symbol }); deviceLayer.add(devcieGraphic) function getPoints(center, radius, startAngle, endAngle, pointNum) { var sin, cos, x, y, angle; var points = []; points[0] = center; for(var i = 1; pointNum && i <= pointNum; i++) { angle = startAngle + (endAngle - startAngle) * i / pointNum; sin = Math.sin(angle * Math.PI / 180); cos = Math.cos(angle * Math.PI / 180); x = center[0] + radius * sin; y = center[1] + radius * cos; points[i] = [x, y]; } points[points.length] = points[0]; return points; } var sectorGrp = null; var clon = 113.190248; var clat = 23.03; var curRad = 0.1; var curStartAng = -200; var curEndAng = 30; function drawPoint(centerPtArr, radius, startAng, endAng, pointNum) { sectorLayer.removeAll(); var apoint1 = getPoints(centerPtArr, radius, startAng, endAng, pointNum); generatePoint(radius, apoint1); var sectorSym = { type: "simple-fill", style: "solid", color: [255, 0, 0, 0.3], outline: { width: "0.5px", color: [255, 0, 0] } } var polygon = new Polygon({ rings: apoint1 }); sectorGrp = new Graphic(polygon, sectorSym, { "lon": 12, "lat": 444, "name": 5555 }); console.log(sectorGrp) sectorLayer.add(sectorGrp) } drawPoint([clon,clat],curRad,curStartAng,curEndAng,60); /* *生成移动的点 */ function generatePoint(radius, points) { sidePointLayer.removeAll(); var originPt = new Point({ x: points[0][0], y: points[0][1], spaticalReference: { wkid: 4326 } }); var movePt = new Point({ x: points[points.length - 2][0], y: points[points.length - 2][1], spaticalReference: { wkid: 4326 } }); var centerPt = new Point({ x: points[points.length / 2][0], y: points[points.length / 2][1], spaticalReference: { wkid: 4326 } }); //计算pt1到中心点pt的距离 var vertices = [ [points[0][0], points[0][1]], [points[1][0], points[1][1]] ] console.log(vertices) var polyline = new Polyline({ paths: vertices, spatialReference: view.spatialReference }) var dis = geometryEngine.geodesicLength(polyline, "meters"); //比例 scale = radius / dis; originGp = new Graphic(originPt, { type: "simple-marker", style: "circle", color: [255, 0, 0, 0.7] }, { "edge": "edge", "ptType": "origin" }) moveGp = new Graphic(movePt, { type: "simple-marker", style: "circle", color: [0, 255, 0, 0.7] }, { "edge": "edge", "ptType": "move" }) centerGp = new Graphic(centerPt, { type: "simple-marker", style: "circle", color: [0, 0, 255, 0.7] }, { "edge": "edge", "ptType": "center" }) sidePointLayer.add(originGp); sidePointLayer.add(moveGp); sidePointLayer.add(centerGp); } //获取两点的构成的扇形夹角 function getAngle(cx, cy, x2, y2) { if(cx == x2 && cy == y2) { return -1; } var x = Math.abs(cx - x2); var y = Math.abs(cy - y2); var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); var cos = y / z; var radina = Math.acos(cos); //用反三角函数求弧度 var angle = Math.floor(180 / (Math.PI / radina)); //将弧度转换成角度 console.log(angle) //x2大于cx if(x2 > cx) { if(y2 > cy) { // 第一象限 console.log("第一象限旋转的夹角:" + angle) } else if(y2 < cy) { //第四象限 angle = 180 - angle; console.log("第四象限旋转的夹角:" + angle) } } else if(x2 < cx) { if(y2 > cy) { //第二象限 angle = (-1) * angle; console.log("第二象限旋转的夹角:" + angle) } else if(y2 < cy) { //第三象限 angle = (-1) * (180 - angle); console.log("第三象限旋转的夹角:" + angle) } } //计算出�

评论收藏

内容反馈