ArcGIS API For Javascript 4.15 绘制地图:GeometryEngine 和 要素之间的空间位置关系

1、HTML 页面

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第九讲-GeometryEngine</title>
    <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/4.15/esri/css/main.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="http://127.0.0.1/arcgis_js_api/4.15/init.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <div id="viewDiv">
        <div class="toolbar">
            <button id="btnBuffer">Buffer</button>
            <button id="btnDifference">Difference</button>
            <button id="btnIntersect">Intersect</button>
            <button id="btnUnion">Union</button>
            <button id="btnConvexHull">ConvexHull</button>
            <button id="btnPlanarArea">PlannarArea</button>
            <button id="btnGeodesicArea">GeodesicArea</button>
        </div>
    </div>
</body>
</html>

2、样式设置

## index.css

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#viewDiv {
    width: 100%;
    height: 100%;
}

.toolbar {
    position: absolute;
    top: 20px;
    right: 20px;
}

3、Javascript API 实现地图绘制

## index.js

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/geometry/geometryEngine",
    "esri/geometry/Polygon",
    "esri/Graphic",
    "esri/layers/GraphicsLayer",
    "esri/widgets/LayerList"
], function(Map, MapView, geometryEngine, Polygon, Graphic, GraphicsLayer, LayerList) {

    var map = new Map({
        basemap: "hybrid"
    });

    var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [0, 0],
        zoom: 15
    });

    var layerList = new LayerList({
        view: view
    });

    view.ui.add(layerList, "bottom-left");

    // const rings = [
    //     [
    //         // first ring
    //         [-97.06138, 32.837, 35.1, 4.8],
    //         [-97.06133, 32.836, 35.2, 4.1],
    //         [-97.06124, 32.834, 35.3, 4.2],
    //         [-97.06138, 32.837, 35.1, 4.8]
    //     ],
    //     [ // second ring
    //         [-97.06326, 32.759, 35.4],
    //         [-97.06298, 32.755, 35.5],
    //         [-97.06153, 32.749, 35.6],
    //         [-97.06326, 32.759, 35.4]
    //     ]
    // ];

    var fillSymbolA = {
        type: "simple-fill",
        color: [51, 51, 204, 0.9],
        style: "solid",
        outline: {
            color: "red",
            width: 1
        }
    };

    var fillSymbolB = {
        type: "simple-fill",
        color: [255, 255, 0, 0.9],
        style: "solid",
        outline: {
            color: "green",
            width: 1
        }
    };

    var graphicsLayer = new GraphicsLayer({
        title: "原始图形"
    });

    map.add(graphicsLayer);

    // 多边形A的坐标
    const ringsA = [
        [
            [0, 0],
            [1000, 0],
            [1000, 1000],
            [0, 1000],
            [0, 0]
        ]
    ];

    const polygonA = new Polygon({
        hasZ: false,
        hasM: false,
        rings: ringsA,
        spatialReference: {
            // wkid: 4826
            wkid: 3857
        }
    });

    var graphicA = new Graphic({
        geometry: polygonA,
        symbol: fillSymbolA
    });

    graphicsLayer.add(graphicA);

    // view.goto(graphicA);

    const ringsB = [
        [
            [500, 500],
            [1500, 500],
            [1500, 1500],
            [500, 1500],
            [500, 500]
        ]
    ];

    const polygonB = new Polygon({
        hasZ: false,
        hasM: false,
        rings: ringsB,
        spatialReference: {
            wkid: 3857
        }
    });

    var graphicB = new Graphic({
        geometry: polygonB,
        symbol: fillSymbolB
    });

    graphicsLayer.add(graphicB);

    // view.goto(graphicB);

    // 存放缓冲区运算结果的图形的图层
    var bufferLayer = new GraphicsLayer({
        title: "缓冲区图层"
    });
    map.add(bufferLayer);

    // Buffer运算
    document.getElementById("btnBuffer").addEventListener("click", function() {
        bufferLayer.removeAll();
        // var bufferPolygon = geometryEngine.buffer(polygonA, 300, "meters");
        var bufferPolygon = geometryEngine.geodesicBuffer(polygonB, 300, "meters");
        var fillSymbolBuffer = {
            type: "simple-fill",
            color: [255, 0, 0, 0.9],
            style: "solid",
            outline: {
                color: "blue",
                width: 1
            }
        };
        var graphicBuffer = new Graphic({
            geometry: bufferPolygon,
            symbol: fillSymbolBuffer
        });
        bufferLayer.add(graphicBuffer);
        // view.graphics.removeAll();
    });

    // 存放Difference运算结果图形的图层
    var differenceLayer = new GraphicsLayer({
        title: "差集图层"
    });
    map.add(differenceLayer);
    // Difference运算
    document.getElementById("btnDifference").addEventListener("click", function() {
        differenceLayer.removeAll();
        var differencePolygon = geometryEngine.difference(polygonB, polygonA);
        var fillSymbolDifference = {
            type: "simple-fill",
            color: [255, 0, 0, 0.9],
            style: "solid",
            outline: {
                color: "blue",
                width: 1
            }
        };
        var graphicDifference = new Graphic({
            geometry: differencePolygon,
            symbol: fillSymbolDifference
        });
        differenceLayer.add(graphicDifference);
    });

    // 存放Intersect运算结果图形的图层
    var intersectLayer = new GraphicsLayer({
        title: "交集图层"
    });
    map.add(intersectLayer);
    // Intersect运算
    document.getElementById("btnIntersect").addEventListener("click", function() {
        intersectLayer.removeAll();
        var intersectPolygon = geometryEngine.intersect(polygonA, polygonB);
        var fillSymbolIntersect = {
            type: "simple-fill",
            color: [255, 0, 0, 0.9],
            style: "solid",
            outline: {
                color: "blue",
                width: 1
            }
        };
        var graphicIntersect = new Graphic({
            geometry: intersectPolygon,
            symbol: fillSymbolIntersect
        });
        intersectLayer.add(graphicIntersect);
    });

    // 存放Union运算结果的图层
    var unionLayer = new GraphicsLayer({
        title: "并集图层"
    });
    map.add(unionLayer);
    // Union运算
    document.getElementById("btnUnion").addEventListener("click", function() {
        unionLayer.removeAll();
        var unionPolygon = geometryEngine.union(polygonA, polygonB);
        var fillSymbolUnion = {
            type: "simple-fill",
            color: [255, 0, 0, 0.9],
            style: "solid",
            outline: {
                color: "blue",
                width: 1
            }
        };
        var graphicUnion = new Graphic({
            geometry: unionPolygon,
            symbol: fillSymbolUnion
        });
        unionLayer.add(graphicUnion);
    });

    // 存放ConvexHull运算结果的图形的图层
    var convexHullLayer = new GraphicsLayer({
        title: "最小凸包图层"
    });
    map.add(convexHullLayer);
    // ConvexHull运算
    document.getElementById("btnConvexHull").addEventListener("click", function() {
        convexHullLayer.removeAll();
        var convexHullPolygon = geometryEngine.convexHull(polygonA);
        var fillSymbolConvexHull = {
            type: "simple-fill",
            color: [255, 0, 0, 0.9],
            style: "solid",
            outline: {
                color: "blue",
                width: 1
            }
        };
        var graphicConvexHull = new Graphic({
            geometry: convexHullPolygon,
            symbol: fillSymbolConvexHull
        });
        convexHullLayer.add(graphicConvexHull);
    });

    // 计算平面面积
    document.getElementById("btnPlanarArea").addEventListener("click", function() {
        var planarArea = geometryEngine.planarArea(polygonA, "square-meters");
        console.log("polygonA的平面面积是:", planarArea, "平方米");

    });

    // 计算球面面积
    document.getElementById("btnGeodesicArea").addEventListener("click", function() {
        var geodesicArea = geometryEngine.geodesicArea(polygonA, "square-meters");
        console.log("polygonA的球面面积是:", geodesicArea, "平方米");
    });
});

4、实现效果

原始图形

缓冲区图层

差集图层

交集图层

并集图层

最小凸包图层

求要素的平面面积和球面面积

  • 0
    点赞
  • 2
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值