如何在ArcGIS JavaScript API中绘制矩形框?

使用ArcGIS JavaScript API绘制矩形

arcgisjs画矩形

ArcGIS JavaScript API(简称ArcGIS API for JavaScript)是Esri公司提供的一个用于开发地理信息系统应用的JavaScript库,通过这个API,开发者可以在网页上创建交互式的地图应用,本文将详细介绍如何使用ArcGIS JavaScript API在地图上绘制一个矩形。

环境准备

1、引入ArcGIS JavaScript API:首先需要在HTML文件中引入ArcGIS JavaScript API,可以通过CDN方式引入。

    <script src="https://js.arcgis.com/4.25/"></script>

2、创建基础的HTML结构:包括一个用于显示地图的div元素,以及一个按钮来触发绘制矩形的功能。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Draw Rectangle</title>
        <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css">
        <style>
            html, body, #viewDiv {
                padding: 0;
                margin: 0;
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="viewDiv"></div>
        <button id="drawRectButton">Draw Rectangle</button>
        <script src="https://js.arcgis.com/4.25/"></script>
        <script src="app.js"></script>
    </body>
    </html>

3、初始化地图视图:在app.js文件中初始化地图视图。

    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/geometry/Polygon",
        "esri/symbols/SimpleFillSymbol",
        "esri/Color",
        "dojo/domReady!"
    ], function(Map, MapView, Graphic, GraphicsLayer, Polygon, SimpleFillSymbol, Color) {
        var map = new Map({
            basemap: "streets"
        });
        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-118.80500, 34.02700], // Longitude, Latitude
            zoom: 13
        });
        // Create a graphics layer to hold the rectangle
        var graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);
    });

实现绘制矩形功能

1、添加事件监听器:为按钮添加点击事件监听器,当点击按钮时调用绘制矩形的函数。

arcgisjs画矩形

    document.getElementById("drawRectButton").addEventListener("click", drawRectangle);

2、定义绘制矩形的函数:在app.js中定义drawRectangle函数,该函数将在地图上绘制一个预设大小的矩形。

    function drawRectangle() {
        require([
            "esri/geometry/SpatialReference",
            "esri/geometry/Point",
            "esri/geometry/util/GeometryEngine"
        ], function(SpatialReference, Point, GeometryEngine) {
            // Define the coordinates of the rectangle corners (in Web Mercator projection)
            var point1 = new Point({longitude: -118.805, latitude: 34.027}, SpatialReference.create(4326));
            var point2 = new Point({longitude: -118.800, latitude: 34.030}, SpatialReference.create(4326));
            var point3 = new Point({longitude: -118.800, latitude: 34.025}, SpatialReference.create(4326));
            var point4 = new Point({longitude: -118.805, latitude: 34.025}, SpatialReference.create(4326));
            // Project the points to the map's spatial reference (Web Mercator)
            point1 = GeometryEngine.project(point1, map.spatialReference);
            point2 = GeometryEngine.project(point2, map.spatialReference);
            point3 = GeometryEngine.project(point3, map.spatialReference);
            point4 = GeometryEngine.project(point4, map.spatialReference);
            // Create a polygon from the points
            var polygon = new Polygon({
                rings: [[point1, point2, point3, point4]],
                srid: map.spatialReference.wkid,
                hasZ: false,
                hasM: false
            });
            // Create a symbol for the polygon
            var simpleFillSymbol = new SimpleFillSymbol({
                color: new Color([226, 119, 40]), // Orange color
                style: "solid",
                outline: { // autocasts as esri/symbols/SimpleLineSymbol
                    color: [255, 255, 255], // White color
                    width: "2px"
                }
            });
            // Create a graphic and add it to the graphics layer
            var rectangleGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol,
                popupTemplate: { // autocasts as esri/PopupTemplate
                    title: "Rectangle",
                    content: "This is a drawn rectangle."
                }
            });
            graphicsLayer.add(rectangleGraphic);
        });
    }

完整代码示例

以下是完整的HTML和JavaScript代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw Rectangle</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css">
    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="viewDiv"></div>
    <button id="drawRectButton">Draw Rectangle</button>
    <script src="https://js.arcgis.com/4.25/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/geometry/Polygon",
            "esri/symbols/SimpleFillSymbol",
            "esri/Color",
            "esri/geometry/SpatialReference",
            "esri/geometry/Point",
            "esri/geometry/util/GeometryEngine",
            "dojo/domReady!"
        ], function(Map, MapView, Graphic, GraphicsLayer, Polygon, SimpleFillSymbol, Color, SpatialReference, Point, GeometryEngine) {
            var map = new Map({
                basemap: "streets"
            });
            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-118.80500, 34.02700], // Longitude, Latitude
                zoom: 13
            });
            // Create a graphics layer to hold the rectangle
            var graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);
            document.getElementById("drawRectButton").addEventListener("click", drawRectangle);
            function drawRectangle() {
                // Define the coordinates of the rectangle corners (in Web Mercator projection)
                var point1 = new Point({longitude: -118.805, latitude: 34.027}, SpatialReference.create(4326));
                var point2 = new Point({longitude: -118.800, latitude: 34.030}, SpatialReference.create(4326));
                var point3 = new Point({longitude: -118.800, latitude: 34.025}, SpatialReference.create(4326));
                var point4 = new Point({longitude: -118.805, latitude: 34.025}, SpatialReference.create(4326));
                // Project the points to the map's spatial reference (Web Mercator)
                point1 = GeometryEngine.project(point1, map.spatialReference);
                point2 = GeometryEngine.project(point2, map.spatialReference);
                point3 = GeometryEngine.project(point3, map.spatialReference);
                point4 = GeometryEngine.project(point4, map.spatialReference);
                // Create a polygon from the points
                var polygon = new Polygon({
                    rings: [[point1, point2, point3, point4]],
                    srid: map.spatialReference.wkid,
                    hasZ: false,
                    hasM: false
                });
                // Create a symbol for the polygon
                var simpleFillSymbol = new SimpleFillSymbol({
                    color: new Color([226, 119, 40]), // Orange color
                    style: "solid",
                    outline: { // autocasts as esri/symbols/SimpleLineSymbol
                        color: [255, 255, 255], // White color
                        width: "2px"
                    }
                });
                // Create a graphic and add it to the graphics layer
                var rectangleGraphic = new Graphic({
                    geometry: polygon,
                    symbol: simpleFillSymbol,
                    popupTemplate: { // autocasts as esri/PopupTemplate
                        title: "Rectangle",
                        content: "This is a drawn rectangle."
                    }
                });
                graphicsLayer.add(rectangleGraphic);
            }
        });
    </script>
</body>
</html>

相关问题与解答栏目

问题1:如何在ArcGIS JavaScript API中动态修改矩形的大小和位置?:答:要动态修改矩形的大小和位置,可以创建一个包含矩形坐标的变量,并在需要时更新这些变量的值,重新生成多边形并更新图形图层中的图形对象,可以在按钮点击事件中获取新的坐标值,并使用这些新值来更新矩形的位置和大小,具体实现可以参考以下代码片段:

function updateRectangle(newPoints) {
    require([
        "esri/geometry/SpatialReference",
        "esri/geometry/Point",
        "esri/geometry/util/GeometryEngine"
    ], function(SpatialReference, Point, GeometryEngine) {
        // Project the new points to the map's spatial reference (Web Mercator)
        var projectedPoints = newPoints.map(function(point) {
            return GeometryEngine.project(new Point(point), map.spatialReference);
        });
        // Create a new polygon from the updated points
        var newPolygon = new Polygon({
            rings: [projectedPoints],
            srid: map.spatialReference.wkid,
            hasZ: false,
            hasM: false
        });
        // Update the existing graphic with the new polygon geometry
        if (rectangleGraphic) {
            rectangleGraphic.geometry = newPolygon;
            rectangleGraphic.symbol = simpleFillSymbol; // Reapply the symbol if needed
        } else {
            rectangleGraphic = new Graphic({
                geometry: newPolygon,
                symbol: simpleFillSymbol,
                popupTemplate: { // autocasts as esri/PopupTemplate
                    title: "Updated Rectangle",
                    content: "This is an updated drawn rectangle."
                }
            });
            graphicsLayer.add(rectangleGraphic); // Add the new graphic to the layer if it doesn't exist yet
        }
    });
}

到此,以上就是小编对于“arcgisjs画矩形”的问题就介绍到这了,希望介绍的几点解答对大家有用,有任何问题和不懂的,欢迎各位朋友在评论区讨论,给我留言。

原创文章,作者:K-seo,如若转载,请注明出处:https://www.kdun.cn/ask/688840.html

Like (0)
Donate 微信扫一扫 微信扫一扫
K-seoK-seo
Previous 2024-11-29 11:53
Next 2024-11-29 11:55

相关推荐

  • 如何使用ArcGIS JS进行高效的空间查询操作?

    ArcGIS JS 空间查询背景介绍ArcGIS JavaScript API是由Esri开发的一组用于构建地理信息Web应用程序的JavaScript库,它提供了丰富的地图显示和空间分析功能,使开发人员能够轻松地在Web上展示地理信息数据,ArcGIS JavaScript API不仅可以用于地图的展示,还可……

    2024-11-29
    010
  • 如何利用ArcGIS JS实现动态地图动画效果?

    ArcGIS JS 动画ArcGIS JavaScript API 提供了丰富的动画功能,可以用于在地图上展示动态数据和效果,本文将详细介绍如何使用 ArcGIS JS 实现几种常见的动画效果,包括动态脉冲效果和车辆轨迹动画,一、ArcGIS JS 简介ArcGIS JavaScript API 是由 Esri……

    2024-11-27
    014
  • 如何利用ArcGIS JS API创建统计图?

    使用ArcGIS JavaScript API制作统计图1. ArcGIS JavaScript API简介ArcGIS JavaScript API是Esri提供的一个用于构建富互联网应用的JavaScript库,它允许开发者在网页上嵌入地图,并实现各种地理空间数据的交互操作,通过这个API,开发者可以轻松地……

    2024-11-29
    05
  • 如何使用ArcGIS JS实现缩放到特定图层?

    arcgisjs缩放到图层”这一主题,可以从以下几个方面进行详细阐述:一、功能概述在ArcGIS JavaScript API中,缩放到图层是一个常用的地图操作功能,它允许用户将地图视图快速定位到特定图层的全图范围或可见比例范围内,这一功能对于数据分析、地理信息展示以及地图交互等场景具有重要意义,二、功能实现方……

    2024-11-29
    05
  • 如何使用ArcGIS JS进行标绘操作?

    ArcGIS JS 标绘功能介绍ArcGIS JavaScript API(简称 ArcGIS JS)是 Esri 提供的一个强大的开发工具,用于构建 Web 应用,通过该 API,开发者可以在网页中嵌入地图,并进行各种交互操作,包括标绘功能,标绘功能允许用户在地图上绘制几何图形,如点、线、面等,并保存这些图形……

    网站运维 2024-11-29
    018
  • 如何在ArcGIS JS中实现点的快速判断与处理?

    判断点是否在多边形内在使用ArcGIS JavaScript API进行地理信息系统开发时,经常需要判断一个点是否位于某个多边形区域内,这一功能在许多应用场景中都非常重要,例如环境监测、城市规划和资源管理等,本文将详细介绍如何使用ArcGIS JavaScript API实现点在多边形内的判断,并提供相关代码示……

    2024-11-27
    013

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

免备案 高防CDN 无视CC/DDOS攻击 限时秒杀,10元即可体验  (专业解决各类攻击)>>点击进入