计算几何

了解如何对几何图形执行缓冲、相交和联合操作。

几何计算是通过缓冲、相交或联合等操作运算并生成一个新几何的操作。生成的几何通常用于在地图中显示图形或作为其他分析的输入。

在本教程中，演示如何使用 geometryEngine 执行缓冲、相交和联合。

步骤 ​

创建带有图形的地图 ​

1. 开始之前，先完成添加点、线和面教程。

添加 geometryEngine 模块 ​

1. 通过 require 引入geometryEngine 模块。 GeoScene Maps SDK for JavaScript 提供了 AMD 模块和 ES 模块，本教程中我们是以 AMD 为例。AMD 使用require 函数加载模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持引用模块和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

   js

       require([
           "geoscene/config",
           "geoscene/Map",
           "geoscene/views/MapView",
           "geoscene/Graphic",
           "geoscene/layers/GraphicsLayer",
   
           "geoscene/geometry/geometryEngine"
   
       ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) {

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

添加 HTML 元素 ​

创建一个简单的页面，在 view 中放置几个按钮，负责调用计算操作和从 view 中清空图形。

1. div 中添加三个 buttons，分别用来执行缓冲、相交、联合，最后添加一个按钮用于清除图形。样式采用 geoscene-widget 和 geoscene-button 。

   html

   <div id="viewDiv"></div>
   
   <div id="controls" class="geoscene-widget">
       <button id="buffer" class="geoscene-button">缓冲区</button>
       <button id="intersect" class="geoscene-button">相交</button>
       <button id="union" class="geoscene-button">联合</button>
       <button id="reset" class="geoscene-button geoscene-button--secondary">重置</button>
   </div>

   1
   2
   3
   4
   5
   6
   7
   8
   

2. 为元素设置CSS样式。

   js

       html, body, .viewDiv {
           padding: 0;
           margin: 0;
           height: 100%;
           width: 100%;
           font-family: "Avenir Next"
       }
   
       .controls {
           width: 250px;
           padding: 0px 5px 0px 5px;
       }
       .geoscene-button {
           margin: 5px 0px 5px 0px;
       }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   

3. 将 controls div 块级元素添加至视图 UI。

   js

       view.ui.add(document.getElementById("controls"), "top-right");

   1
   

4. 运行应用程序以验证按钮是否已添加到视图中。

添加图形图层 ​

图形图层是图形的容器。它与地图视图一起使用负责在地图上显示图形。在地图视图中，可以添加多个图形图层，它们都显示在其他类型图层之上。

1. 为几何计算的结果添加一个 GraphicsLayer 实例。要一次向地图添加多个图层使用 map.addMany。

   js

       const graphicsLayer = new GraphicsLayer();
   
       const resultsLayer = new GraphicsLayer();
       map.addMany([graphicsLayer, resultsLayer]);

   1
   2
   3
   4
   

创建缓冲区 ​

缓冲区是指在点、线、面实体的周围，自动建立的一定宽度的多边形。使用缓冲区有助于更好地可视化相交和联合操作的结果。

1. 定义变量 bufferGraphic 和 createBuffer 函数。如果 bufferGraphic不为空，则直接返回，不需要创建缓冲区。

   js

       view.ui.add(document.getElementById("controls"), "top-right");
   
       let bufferGraphic;
       function createBuffer() {
           if (bufferGraphic) {
               return;
           }

   1
   2
   3
   4
   5
   6
   7
   

2. 为空则使用 geometryEngine 上的 geodesicBuffer 方法在点图形周围创建一个 1 千米的缓冲区。

   js

       let bufferGraphic;
       function createBuffer() {
           if (bufferGraphic) {
               return;
           }
   
           const buffer = geometryEngine.geodesicBuffer(
               pointGraphic.geometry,
               1,
               "kilometers"
           );

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   

3. 定义 Graphic 类来显示地图中的缓冲区图形。将图形的几何设置为刚刚计算的缓冲区，将符号设置为 SimpleFillSymbol。然后将图形添加到 bufferLayer。

   js

       let bufferGraphic;
       function createBuffer() {
           if (bufferGraphic) {
               return;
           }
   
           const buffer = geometryEngine.geodesicBuffer(
               pointGraphic.geometry,
               1,
               "kilometers"
           );
   
           bufferGraphic = new Graphic({
               geometry: buffer,
               symbol: {
                   type: "simple-fill",
                   color: [227, 139, 79, 0.5],
                   outline: {
                       color: [255, 255, 255, 255],
                   },
               },
           });
           graphicsLayer.add(bufferGraphic);
       }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   

4. 为 缓冲区 按钮添加一个事件监听器，在单击该按钮时，调用 createBuffer 函数。

   js

       view.ui.add(document.getElementById("controls"), "top-right");
   
       document.getElementById("buffer").addEventListener("click", createBuffer);

   1
   2
   3
   

5. 运行应用程序，查看缓冲区结果。

定义移除图形方法 ​

定义一个重置方法，将图形图层中所有图形移除。

1. 定义 resetGraphics 函数。从 graphicsLayer 中移除 bufferGraphic，并从 resultsLayer 中 removeAll 几何。将 bufferGraphic 设置为 null。

   js

           bufferGraphic = new Graphic({
               geometry: buffer,
               symbol: {
                   type: "simple-fill",
                   color: [227, 139, 79, 0.5],
                   outline: {
                       color: [255, 255, 255, 255],
                   },
               },
           });
           graphicsLayer.add(bufferGraphic);
       }
   
       function resetGraphics() {
           graphicsLayer.remove(bufferGraphic);
           resultsLayer.removeAll();
           bufferGraphic = null;
       }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   

2. 为 重置 按钮添加事件监听器，单击该按钮时调用 resetGraphics 函数。

   js

       document.getElementById("buffer").addEventListener("click", createBuffer);
   
       document.getElementById("reset").addEventListener("click", resetGraphics);

   1
   2
   3
   

3. 运行应用程序。在缓冲区和重置按钮之间切换可以创建缓冲区，然后将其从 view 中移除。

相交 ​

当两个几何具有共同的几何区域时，它们将相交 intersect。单击 Intersect 按钮时，调用 findIntersect 函数并将生成的图形添加到 resultsLayer。

1. 定义 findIntersect 函数。

   js

       function resetGraphics() {
           graphicsLayer.remove(bufferGraphic);
           resultsLayer.removeAll();
           bufferGraphic = null;
       }
   
       function findIntersect() {
   
       }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

2. 从 resultsLayer 中 removeAll 图形。如果没有用于执行 intersect 操作的 bufferGraphic，则 return。

   js

       function findIntersect() {
   
           resultsLayer.removeAll();
           if (!bufferGraphic) {
               return;
           }
   
       }

   1
   2
   3
   4
   5
   6
   7
   8
   

3. 调用 intersect 方法以查找两个几何之间的交集。

   js

       function findIntersect() {
   
           resultsLayer.removeAll();
           if (!bufferGraphic) {
           return;
       }
   
       const intersectGeom = geometryEngine.intersect(polygonGraphic.geometry, bufferGraphic.geometry);
   
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

4. 创建图形以显示相交几何并将其添加到 resultsLayer。

   js

       function findIntersect() {
   
           resultsLayer.removeAll();
           if (!bufferGraphic) {
               return;
           }
   
           const intersectGeom = geometryEngine.intersect(polygonGraphic.geometry, bufferGraphic.geometry);
   
           const intersectionGraphic = new Graphic({
               geometry: intersectGeom,
               symbol: {
                   type: "simple-fill",
                   style: "cross",
                   color: "green",
                   outline: {
                       color: "green"
                   }
               }
           });
           resultsLayer.add(intersectionGraphic);
   
       }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   

5. 为 相交 按钮添加事件监听器，以在单击该按钮时调用 findIntersect 函数。

   js

       document.getElementById("reset").addEventListener("click", resetGraphics);
   
       document.getElementById("intersect").addEventListener("click", findIntersect);

   1
   2
   3
   

6. 运行应用程序。如果先单击相交按钮，则不会调用 intersect 方法，因为它需要 bufferGraphic。单击缓冲区按钮，然后单击相交按钮以查看结果几何。

联合 ​

union 是多边形联合，输出结果保留原来两个输入图层的所有多边形。单击 联合 按钮时，将计算缓冲区和 polygonGraphic 几何之间的并集，并将结果添加到 resultsLayer。

1. 定义 createUnion 函数。

   js

           const intersectGeom = geometryEngine.intersect(polygonGraphic.geometry, bufferGraphic.geometry);
   
           const intersectionGraphic = new Graphic({
               geometry: intersectGeom,
               symbol: {
                   type: "simple-fill",
                   style: "cross",
                   color: "green",
                   outline: {
                       color: "green"
                   }
               }
           });
           resultsLayer.add(intersectionGraphic);
       }
   
       function createUnion() {
   
       }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   

2. 从 resultsLayer 中 removeAll 图形。如果没有用于执行 union 操作的 bufferGraphic，则 return。

   js

       function createUnion() {
   
           resultsLayer.removeAll();
           if (!bufferGraphic) {
               return;
           }
   
       }

   1
   2
   3
   4
   5
   6
   7
   8
   

3. 调用 union 方法，查找两个几何之间的并集。

   js

       function createUnion() {
   
           resultsLayer.removeAll();
           if (!bufferGraphic) {
               return;
           }
   
           const unionGeom = geometryEngine.union(polygonGraphic.geometry, bufferGraphic.geometry);
   
       }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   

4. 创建图形，显示生成的几何，并将其添加到 resultsLayer。

   js

       function createUnion() {
   
           resultsLayer.removeAll();
               if (!bufferGraphic) {
               return;
           }
   
           const unionGeom = geometryEngine.union(polygonGraphic.geometry, bufferGraphic.geometry);
   
           const unionGraphic = new Graphic({
               geometry: unionGeom,
               symbol: {
                   type: "simple-fill",
                   style: "cross",
                   color: "green",
                   outline: {
                       color: "green"
                   }
               }
           });
           resultsLayer.add(unionGraphic);
   
       }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   

5. 为 联合 按钮添加事件监听器，以在单击该按钮时调用 createUnion 函数。

   js

       document.getElementById("buffer").addEventListener("click", createBuffer);
   
       document.getElementById("reset").addEventListener("click", resetGraphics);
   
       document.getElementById("intersect").addEventListener("click", findIntersect);
   
       document.getElementById("union").addEventListener("click", createUnion);

   1
   2
   3
   4
   5
   6
   7
   

6. 运行应用程序。如果先单击联合按钮，则不会调用方法，因为它需要 bufferGraphic。单击缓冲区按钮，然后单击联合按钮以查看结果几何。

运行应用程序 ​

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

地图应加载围绕点图形的缓冲区图形。单击相交或联合按钮时，将计算的结果创建一个图形。

下一步是什么？ ​

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

• 查找空间关系

• 几何投影

• 计算长度和面积