arcgis判断点是否在多边形图中

最新推荐文章于 2024-08-12 19:01:02 发布
一只散修道友
最新推荐文章于 2024-08-12 19:01:02 发布
阅读量103
点赞数 1
分类专栏：地图文章标签： arcgis swift 开发语言
本文链接：https://blog.csdn.net/weixin_43903629/article/details/140300375
版权
地图专栏收录该内容
7 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS API for JavaScript - Draw Polygon</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css">
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <script src="https://js.arcgis.com/4.26/"></script>
    <script>
        var point, polygon;
        var polygonRings = []
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/geometry/Polygon",
            "esri/geometry/Point",
            "esri/geometry/SpatialReference",
            "esri/geometry/geometryEngine"
        ], function (Map, MapView, Graphic, Polygon, Point, SpatialReference, GeometryEngine) {
            var map = new Map({
                basemap: "streets-navigation-vector"
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-118, 34],
                zoom: 12
            });
            // 创建点
            point = new Point({
                x: -118,
                y: 34.0,
                spatialReference: new SpatialReference({ wkid: 4326 })
            });

            view.graphics.add(new Graphic({
                geometry: point,
                symbol: {
                    type: "simple-marker",
                    color: "blue",
                    size: "8px"
                }
            }));

            measurePolygon()



            function measurePolygon() {
                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",
                    "esri/geometry/SpatialReference",
                ], function
                    (
                        Map,
                        Color,
                        SimpleLineSymbol,
                        MapView,
                        TileLayer,
                        Draw,
                        GeometryEngine,
                        Point,
                        Polyline,
                        Polygon,
                        GraphicsLayer,
                        Graphic,
                        SpatialReference
                    ) {
                    let polygonLayer = map.findLayerById("polygonLayer"); //绘制面图层
                    if (!polygonLayer) {
                        polygonLayer = new GraphicsLayer({
                            id: "polygonLayer",
                        }); //绘制线图层
                    }

                    //画面按钮事件
                    let draw = new Draw({
                        //在view里创建draw
                        view: view,
                    });
                    let action = draw.create("polygon"); //创建画线实例
                    view.focus();
                    action.on(
                        [
                            "vertex-add", // when a vertex is added  鼠标单击
                        ],
                        function (evt) {
                            var screenPoint = {
                                x: event.x,
                                y: event.y
                            };
                            var mapPoint = view.toMap(screenPoint);
                            console.log("经度: " + mapPoint.longitude + "，纬度: " + mapPoint.latitude)
                            polygonRings.push([mapPoint.longitude, mapPoint.latitude]);
                        }
                    );
                    action.on(
                        [
                            "vertex-add", // when a vertex is added  鼠标单击
                            "vertex-remove", // when a vertex is removed 移除
                            "cursor-update", // when the pointer moves 鼠标移动
                            "draw-complete", // when the drawing is completed 鼠标双击
                        ],
                        function (evt) {
                            // console.log("evt",evt);
                            createPolygon(evt.vertices);
                            // var screenPoint = {
                            //     x: event.x,
                            //     y: event.y
                            // };
                            // var mapPoint = view.toMap(screenPoint);
                            // console.log("经度: " + mapPoint.longitude + "，纬度: " + mapPoint.latitude)
                        }
                    );
                    // };

                    //画面和测量面积
                    function createPolygon(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", // autocasts as new SimpleFillSymbol()
                            color: [3, 255, 240, 0.1],
                            outline: {
                                // autocasts as new SimpleLineSymbol()
                                color: [255, 116, 3],
                                width: 2,
                            },
                        };

                        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.centroid;
                        let pointCenter = {
                            type: "point",
                            longitude: center.longitude,
                            latitude: center.latitude,
                        };
                        let textSymbol = {
                            //面积标注
                            type: "text",
                            color: "white",
                            haloColor: "black",
                            haloSize: "2px",
                            // text: areaText,
                            //xoffset: '50px',
                            //yoffset: '-5px',
                            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);
                        }
                        map.layers.add(polygonLayer);

                    }

                    //面积单位转换
                    function areaFormat(area) {
                        let areaText;
                        if (area < 2000) {
                            area = area.toFixed(2);
                            return (areaText = area + "平方米");
                        } else {
                            area = (area / 10000).toFixed(2);
                            return (areaText = area + "平方千米");
                        }
                    }
                }
                );
            }
        });
        function say() {
            require([
                "esri/Map",
                "esri/views/MapView",
                "esri/Graphic",
                "esri/geometry/Polygon",
                "esri/geometry/Point",
                "esri/geometry/SpatialReference",
                "esri/geometry/geometryEngine"
            ], function (Map, MapView, Graphic, Polygon, Point, SpatialReference, GeometryEngine) {
                // 判断点是否在多边形中
                var polygon = new Polygon({
                    rings:polygonRings
                });

                var isWithin = GeometryEngine.within(point, polygon);
                // 输出判断结果
                console.log("Is the point within the polygon? " + isWithin);
            })
        }
    </script>
</head>

<body>
    <div id="viewDiv"></div>
    <div style="position: absolute;left:140px;top:20px;"><button onclick="say()">say</button></div>
</body>

</html>