查找空间关系

了解如何确定几何之间的空间关系。

空间关系 (也称为 spatial relation) 是指一个几何与另一个几何的拓扑关联关系。这种关联是基于其内部、边界和外部确定的。

在本教程中，您将使用 geometryEngine 来确定两个几何之间的空间关系。要确定空间关系是否存在，请使用 intersects、disjoint 和 within 等操作。如果存在关系，则返回 true。

步骤

创建新 Pen

要开始使用，请完成显示地图教程或使用此 Pen。

添加模块

在 require 语句中，添加 Graphic、GraphicsLayer、Sketch 和 geometryEngine 模块。

GeoScene API for JavaScript 使用 AMD 模块。require 函数用于加载模块，以便它们可在主 function 中使用。保持模块引用和函数参数的顺序相同很重要。

Add line.Add line.Add line.Add line.Change line
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

添加 HTML 元素

添加 <div> 元素以在 view 中显示两个几何之间的空间关系。

使用 HTML 创建 div 元素以显示要评估的每种空间关系。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

将 relationshipResults 添加至视图 UI 的右下角。

Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //经度、纬度
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

添加一些 CSS 以格式化 relationshipResults <div>。

Add line.Add line.Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

创建图形

您需要两个几何才能执行空间关系操作。创建折线和面图形以在应用程序运行时显示。

创建新 GraphicsLayer 并将其添加至 map。

Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //经度、纬度
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

创建折线图形并将其添加至 graphicsLayer。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //经度、纬度
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

创建面图形并将其添加至 graphicsLayer。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //经度、纬度
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // 创建面几何
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

将图形添加至 selectedGraphics 数组。

Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

运行代码以验证图形是否显示在视图中。

使用 Sketch 和 GraphicsLayer 类以交互方式创建图形并将其添加至 view。事件处理程序将监听草绘微件的更改，并相应地更新空间关系。

使用配置创建 Sketch 微件。将 layer 指定为之前定义的 graphicsLayer。这将允许您移动和更新在上一步中创建的线和折线图形。此外，在 Sketch 微件上启用 snappingOptions。最后，设置微件的 visibleElements 以移除不需要的工具。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

将草绘微件添加到视图 UI 的右上角。

Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

运行代码以验证草绘微件是否显示在视图中。

确定空间关系

空间关系是根据两个几何的内部、边界和外部确定的。使用 contains() 和 intersects() 等方法查找草图几何之间的空间关系。

要格式化结果，可创建 showSpatialRelationship 函数。如果空间关系的 value 为 true，则以粗体显示 string。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

创建名为 onGraphicUpdate 的函数。

Add line.Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

从 selectedGraphics 数组中获取几何，以查找空间关系。

Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

在两个几何上测试每个空间关系，并在 relationshipResults div 块级元素中显示结果。调用 showSpatialRelationship 函数以显示结果。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

添加事件监听器

创建事件监听器以在绘制或更新新几何时注册更改。如果绘制新几何，则会从 selectedGraphics 数组中移除最后一个几何。调用 onGraphicUpdate 函数以确定其余几何之间的空间关系。

监听 Sketch 微件上的事件。监视 update、undo 或 redo 事件，并调用 onGraphicUpdate 方法以确定这些事件发生时的空间关系。

Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

监听 Sketch 微件上的 create 事件。创建新图形时，从 selectedGraphics 数组中获取最后一个图形，并从 graphicsLayer 中移除该图形，以便在 view 中一次仅显示两个图形。调用 onGraphicUpdate 函数以确定几何之间的空间关系。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

当加载应用程序时，可调用 onGraphicUpdate 来计算空间关系。使用草绘微件的 update 方法选择折线图形，以便用户知道他们可以移动该图形。

Add line.Add line.Add line.
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>GeoScene API for JavaScript Tutorials: 查找空间关系</title>
    <style>
        html,
        body,

        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #relationshipResults {
            width: 175px;
            padding: 10px;
        }

    </style>

    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
    <script src="https://js.geoscene.cn/4.23/"></script>

    <script>

        require([
            "geoscene/config",
            "geoscene/Map",
            "geoscene/views/MapView",

            "geoscene/Graphic",
            "geoscene/layers/GraphicsLayer",
            "geoscene/widgets/Sketch",
            "geoscene/geometry/geometryEngine"

        ], (geosceneConfig, Map, MapView, Graphic, GraphicsLayer, Sketch, geometryEngine) => {

            const map = new Map({
                basemap: "tianditu-vector", // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [118.80500, 34.02700], //Longitude, latitude
                zoom: 13,
                container: "viewDiv"
            });

            const relationshipDiv = document.getElementById("relationshipResults");
            view.ui.add(relationshipDiv, "bottom-right");

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const polyline = {
                type: "polyline",
                paths: [
                    [13227000.704542402, 4032506.197638312],
                    [13223540.698857695, 4034443.92109266],
                    [13222135.94452635, 4032506.197638312],
                    [13221470.479577951, 4033494.9524006792],
                    [13221470.404932415, 4033494.9524006792]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleLineSymbol = {
                type: "simple-line",
                width: 2
            };
            const polylineGraphic = new Graphic({
                geometry: polyline,
                symbol: simpleLineSymbol
            });
            graphicsLayer.add(polylineGraphic);

            // Create a polygon geometry
            const polygon = {
                type: "polygon",
                rings: [
                    [13228098.704542402, 4035365.9427463487],
                    [13226362.225451587, 4035365.9427463487],
                    [13226362.225451587, 4032059.2948176656],
                    [13228098.704542402, 4032059.2948176656],
                    [13228098.704542402, 4035365.9427463487]
                ],
                spatialReference: {
                    wkid: 102100
                }
            };
            const simpleFillSymbol = {
                type: "simple-fill"
            };
            const polygonGraphic = new Graphic({
                geometry: polygon,
                symbol: simpleFillSymbol
            });

            graphicsLayer.add(polygonGraphic);

            let selectedGraphics = [polygonGraphic, polylineGraphic];

            const sketch = new Sketch({
                view: view,
                layer: graphicsLayer,
                updateOnGraphicClick: true,
                snappingOptions: {
                    enabled: true,
                    featureSources: [{
                        layer: graphicsLayer
                    }]
                },
                visibleElements: {
                    createTools: {
                        point: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });

            view.ui.add(sketch, "top-right");

            sketch.on(["update", "undo", "redo"], onGraphicUpdate);

            sketch.on("create", (event) => {
                if (event.state === "start") {
                    const arrVal = selectedGraphics.pop();
                    graphicsLayer.remove(arrVal);
                }
                if (event.state === "complete") {
                    selectedGraphics.unshift(event.graphic);

                    onGraphicUpdate();

                }
            })

            view.when(() => {
                sketch.update(polylineGraphic).then(onGraphicUpdate)
            });

            function onGraphicUpdate() {

                let geometry1 = selectedGraphics[0].geometry;
                let geometry2 = selectedGraphics[1].geometry;

                const contains = geometryEngine.contains(geometry1, geometry2);
                showSpatialRelationship("Contains", contains)

                const crosses = geometryEngine.crosses(geometry1, geometry2);
                showSpatialRelationship("Crosses", crosses)

                const disjoint = geometryEngine.disjoint(geometry1, geometry2);
                showSpatialRelationship("Disjoint", disjoint)

                const equals = geometryEngine.equals(geometry1, geometry2);
                showSpatialRelationship("Equals", equals)

                const intersects = geometryEngine.intersects(geometry1, geometry2);
                showSpatialRelationship("Intersects", intersects)

                const overlaps = geometryEngine.overlaps(geometry1, geometry2);
                showSpatialRelationship("Overlaps", overlaps)

                const touches = geometryEngine.touches(geometry1, geometry2);
                showSpatialRelationship("Touches", touches)

                const within = geometryEngine.within(geometry1, geometry2);
                showSpatialRelationship("Within", within)

            }

            function showSpatialRelationship(string, value) {
                const element = document.getElementById(string)
                if (value) {
                  element.innerHTML =   "<b>" + string + ": " + value + "</b>";
                } else {
                 element.innerHTML = string + ": " + value;
                }
            }

        });
    </script>
</head>

<body>

    <div id="viewDiv"></div>

    <div id="relationshipResults" class="geoscene-widget">
        <div><b>Spatial relationships</b></div>
        <div id="Contains"></div>
        <div id="Crosses"></div>
        <div id="Disjoint"></div>
        <div id="Equals"></div>
        <div id="Intersects"></div>
        <div id="Overlaps"></div>
        <div id="Touches"></div>
        <div id="Within"></div>
    </div>

</body>

</html>

运行应用程序

在 CodePen 中，运行代码以显示地图。

地图将加载并显示线和面图形。在右下角，将显示图形之间的空间关系。移动图形以查看空间关系如何变化。使用 Sketch 微件创建新图形，以探索不同几何类型之间的空间关系。

下一步是什么？

要了解如何使用其他 API 功能，请参阅以下教程：

GeoScene API for JavaScript

查找空间关系

解决方案

估计时间

GeoScene API for JavaScript

查找空间关系

步骤

创建新 Pen

添加模块

添加 HTML 元素

创建图形

创建草绘微件

确定空间关系

添加事件监听器

运行应用程序

下一步是什么？

解决方案

估计时间