计算几何
了解如何对几何执行缓冲、相交和联合操作。
几何计算是一种可用于缓冲、相交或联合几何以创建新几何的操作。生成的几何通常用于在地图中显示图形或作为其他分析的输入。
在本教程中，您将使用 geometryEngine 来缓冲、相交和联合几何。
步骤
创建带有图形的地图
添加 geometryEngine 模块
在
require语句中，添加geometryEngine模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可在主function中使用。保持模块引用和函数参数的顺序相同很重要。Add line. Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>
添加 HTML 元素
通过在 view 中放置按钮可为用户添加一个简单的用户界面，该按钮将调用计算操作或从 view 中移除图形。
添加三个
buttons的div以计算交集、并集，最后一个按钮用于移除所有生成的几何。可使用geoscene-widget和geoscene-button类为元素提供一致的样式。Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>添加 CSS 以设置刚刚添加的 HTML 元素的样式。
Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>将
controlsdiv 块级元素添加至视图UI。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>运行应用程序以验证按钮是否已添加到视图中。
添加新图形图层
图形图层是图形的容器。它与地图视图一起使用以在地图上显示图形。您可以将多个图形图层添加到地图视图中。图形图层显示在所有其他图层之上。
为几何计算的结果添加一个额外的
GraphicsLayer实例。要一次向地图添加多个图层，请使用map.addMany。Add line. Change line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>
创建缓冲区
缓冲区是指在点、线、面实体的周围，自动建立的一定宽度的多边形。使用缓冲区有助于更好地可视化从相交和联合操作创建的几何。
创建全局变量
bufferGraphic和createBuffer函数。如果有bufferGraphic，则return。Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>使用
geometryEngine上的geodesicBuffer方法在点图形周围创建一个1千米的缓冲区。Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>创建
Graphic以显示地图中的缓冲区几何。将图形的几何设置为刚刚计算的缓冲区，并将符号设置为 SimpleFillSymbol。将图形添加到bufferLayer。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>为
Buffer按钮添加一个事件监听器，以在单击该按钮时，调用createBuffer函数。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>运行应用程序以查看缓冲区。
从结果图层中移除图形
创建一个将重置并从图形图层中移除所有图形的函数。
创建
resetGraphics函数。从graphicsLayer中移除bufferGraphic，并从resultsLayer中removeAll几何。将bufferGraphic设置为null。Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>为
Reset按钮添加事件监听器，以在单击该按钮时调用resetGraphics函数。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>运行应用程序。在缓冲区和重置按钮之间切换以创建缓冲区，然后将其从
view中移除。
相交
当两个几何具有共同的几何区域时，它们将 intersect。单击 Intersect 按钮时，调用 findIntersect 函数并将生成的图形添加到 resultsLayer。
定义
findIntersect函数。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>从
resultsLayer中removeAll图形。如果没有用于执行intersect操作的bufferGraphic，则return。Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>调用
intersect方法以查找两个几何之间的交集。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>创建图形以显示相交几何并将其添加到
resultsLayer。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>为
Intersect按钮添加事件监听器，以便在单击按钮时调用findIntersect函数。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>运行应用程序。如果先单击相交按钮，则不会调用
intersect方法，因为它需要bufferGraphic。单击缓冲区按钮，然后单击相交按钮以查看结果几何。
联合
union 是进行多边形叠合，输出层为保留原来两个输入图层的所有多边形。单击 Union 按钮时，将计算缓冲区和 polygonGraphic 几何之间的并集，并将结果添加到 resultsLayer。
定义
createUnion函数。Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>从
resultsLayer中removeAll图形。如果没有用于执行union操作的bufferGraphic，则return。Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>调用
union方法以查找两个几何之间的并集。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>创建图形以显示生成的几何并将其添加到
resultsLayer。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>为
Union按钮添加事件监听器，以便在单击按钮时调用createUnion函数。Add line. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226<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%; font-family: "Avenir Next" } #controls { width: 250px; padding: 0px 5px 0px 5px; } .geoscene-button { margin: 5px 0px 5px 0px; } </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/geometry/geometryEngine" ], function(geosceneConfig, Map, MapView, Graphic, GraphicsLayer, geometryEngine) { const map = new Map({ basemap: "tianditu-vector" //Basemap layer service }); const view = new MapView({ map: map, center: [118.80500, 34.0075], //Longitude, latitude zoom: 13, container: "viewDiv" }); const graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); const resultsLayer = new GraphicsLayer(); map.addMany([graphicsLayer, resultsLayer]); const point = { //Create a point type: "point", longitude: -118.80657463861, latitude: 34.0005930608889, }; const simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // Orange outline: { color: [255, 255, 255], // White width: 1 } }; const pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); graphicsLayer.add(pointGraphic); // Create a line geometry const polyline = { type: "polyline", paths: [ [118.821527826096, 34.0139576938577], //Longitude, latitude [118.814893761649, 34.0080602407843], //Longitude, latitude [118.808878330345, 34.0016642996246] //Longitude, latitude ] }; const simpleLineSymbol = { type: "simple-line", color: [226, 119, 40], // Orange width: 2 }; const polylineGraphic = new Graphic({ geometry: polyline, symbol: simpleLineSymbol }); graphicsLayer.add(polylineGraphic); // Create a polygon geometry const polygon = { type: "polygon", rings: [ [118.818984489994, 34.0137559967283], //Longitude, latitude [118.806796597377, 34.0215816298725], //Longitude, latitude [118.791432890735, 34.0163883241613], //Longitude, latitude [118.79596686535, 34.008564864635], //Longitude, latitude [118.808558110679, 34.0035027131376] //Longitude, latitude ] }; const simpleFillSymbol = { type: "simple-fill", color: [227, 139, 79, 0.8], // Orange, opacity 80% outline: { color: [255, 255, 255], width: 1 } }; const polygonGraphic = new Graphic({ geometry: polygon, symbol: simpleFillSymbol }); graphicsLayer.add(polygonGraphic); view.ui.add(document.getElementById("controls"), "top-right"); document.getElementById("buffer").addEventListener("click", createBuffer); document.getElementById("reset").addEventListener("click", resetGraphics); document.getElementById("intersect").addEventListener("click", findIntersect); document.getElementById("union").addEventListener("click", createUnion); 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); } function resetGraphics() { graphicsLayer.remove(bufferGraphic); resultsLayer.removeAll(); bufferGraphic = null; } 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); } 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); } }); </script> </head> <body> <div id="viewDiv"></div> <div id="controls" class="geoscene-widget"> <button id="buffer" class="geoscene-button">Buffer</button> <button id="intersect" class="geoscene-button">Intersect</button> <button id="union" class="geoscene-button">Union</button> <button id="reset" class="geoscene-button geoscene-button--secondary">Reset</button> </div> </body> </html>运行应用程序。如果先单击联合按钮，则不会调用方法，因为它需要
bufferGraphic。单击缓冲区按钮，然后单击联合按钮以查看结果几何。
运行应用程序
在 CodePen 中，运行代码以显示地图。
地图应加载围绕点图形的缓冲区图形。当您单击相交或联合按钮时，应为这些计算的结果创建一个图形。
下一步是什么？
要了解如何使用其他 API 功能，请参阅以下教程：
解决方案
估计时间
10 分钟