显示投影几何
了解如何在不同投影中显示几何。
几何投影可将几何形状的折点从一个坐标系（空间参考）变换到另一坐标系。例如，可以将地理坐标系（如 WGS84 (4326)）投影到投影坐标系（如 World Sinusoidal (54008)）。
每个投影可以保持以下参数之一：面积、角度或方向。您使用的投影基于应用程序的要求。例如，如果数据以北极为中心，则通常不会使用 Web Mercator (3857) 空间参考，因为投影无法正确表示极点要素；存在大面积失真。相反，您可以使用 North Pole Gnomonic (102034) 空间参考，因为它保留了北极周围的区域。
在本教程中，您将使用投影引擎和从选择器中选择的空间参考来投影 GeoJSON 要素。中心点和缓冲区图形也将添加到地图视图中。
步骤
创建新 Pen
- 转至 CodePen，为您的制图应用程序创建新 Pen。
添加 HTML 元素
在 CodePen > HTML 中，添加 HTML 和 CSS 以创建包含
viewDiv和wkid元素的页面。viewDiv是显示地图的元素，其 CSS 可重置任何浏览器设置，以便它可以使用浏览器的整个宽度和高度。wkid选项将为Web Mercator和WGS84。创建<script>和<link>标签以引用 CSS 和 JS 库。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>
添加模块
在
require语句中，添加模块。GeoScene API for JavaScript 使用 AMD 模块。
require函数用于加载模块，以便它们可在主function中使用。保持模块引用和函数参数的顺序相同很重要。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>
设置全局变量和样式
设置在空间参考之间切换和重新创建视图所需的全局变量。多边形和点样式将设置后续步骤中创建的缓冲区样式。
创建
spatialReference和view变量，以便在空间参考之间进行切换时使用。使用coordinatesdiv设置coordinates变量以在地图上显示中心点的投影 x/y。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>设置在地图上缓冲点时将显示的面和点样式。
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // 自动转换为新 SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // 自动转换为新 SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>
添加 GeoJSON 图层
要访问 GeoJSONLayer 类，可基于 GeoJSON 数据创建一个图层。GeoJSON 要素位于 WGS84 地理坐标系中。添加到地图后，要素将自动进行投影以匹配地图视图中的空间参考。要可视化每个空间参考的世界范围，将显示边界图形。
创建边界图形。设置
symbol的outline属性以创建灰色dash线。将几何type设置为extent并将spatialReference属性设置为WGS84。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>创建实例化 GeoJSONLayer 类的
countriesGeoJson元素。设置renderer以在国家/地区周围添加紫色轮廓。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>将
countriesGeoJson图层添加到map。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>
设置空间参考
GeoJSON 图层的默认空间参考是 WGS84 (4326)。使用选择器在 WGS84 和 Web Mercator (3857) 之间切换。
创建
getSpatialReference函数，该函数将基于从选择器中选择的wkid返回SpatialReference类的实例。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>将
wkidSelect变量分配给wkidHTML 元素。通过调用getSpatialReference函数，将spatialReference设置为选择器中的 wkid 值。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>添加事件监听器以根据选择器中的
event.target.value来注册更改。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>
在坐标系之间切换
每次选择新的空间参考时，都需要移除并重新创建视图。创建一个函数，该函数将根据所选的空间参考重新投影视图。
创建
center点，该点将在每次重新投影时聚焦视图。将latitude设置为30，longitude设置为-10。将spatialReference设置为4326(WGS84)。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>创建
createViewWithSpatialReference函数。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>添加一个条件语句，如果存在
view，则该语句将调用destroy()方法。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>使用
MapView类的新实例设置view。使用map和所选的spatialReference设置map和spatialReference属性。使用center点设置center属性。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //需要使用投影引擎 scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>将
projectionBoundary和wkidSelect元素添加到view UIAdd 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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //需要使用投影引擎 scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>调用
createViewWithSpatialReference方法以在加载应用程序时显示 GeoJSON 图形。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>更新事件监听器，通过基于新的空间参考调用
createViewWithSpatialReference函数来重新投影 GeoJSON 图层。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>运行应用程序。在 WGS84 和 Web Mercator 之间切换，以确保每次都重新创建视图。
添加更多空间参考
根据应用程序的需要，可以从许多空间参考中进行选择。有关支持的 WKID 的完整列表，请访问使用空间参考。
转至 REST API 文档中的投影坐标系列表，以查找感兴趣的 WKID。
更新选择器以添加其他投影坐标系，例如：
- World Eckert VI (54010)
- World Sinusoidal (54008)
- World Fuller (54050)
Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>运行应用程序并在新坐标系之间切换。
检查控制台。将出现一个错误显示："#center" "与视图的 spatialReference {"wkid": "THE_SELECTED_WKID"} 不兼容的 spatialReference {"wkid":4326}"。
重新投影中心点
您可以在 WGS84 和 Web Mercator 之间进行切换，因为 Web Mercator 的大地坐标由 WGS84 基准面定义。在其他投影坐标系之间切换时，应用程序将失败，因为中心点 [30, -10] 坐标未投影到指定的输出空间参考。默认情况下，视图会自动动态投影几何以匹配地图的空间参考。但是，由于中心点不会作为图形添加到视图中，因此需要使用投影引擎根据从选择器中选择的内容来变换坐标。
将
createViewWithSpatialReference函数更新为异步，以便它awaitsprojection引擎load引擎的依赖项。Change line Change 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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //需要使用投影引擎 scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>基于从选择器中选择的
spatialReference，在center点上调用project方法。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>重新运行应用程序，并从选择器中选择不同的空间参考。该应用程序将正常工作，因为中心点坐标随每个选择进行投影。
查看投影坐标
要可视化重投影 center 点的效果，可将其作为图形添加到视图中，然后从新的空间参考显示其 x/y 坐标。
创建具有
point参数的displayCoordinates函数。定义popupTemplate以显示point的wkid、x和y坐标。设置dockOptions和visibleElements以防止用户关闭弹出窗口。Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. Add line. 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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>创建
graphic。使用point设置geometry，并使用上一步中定义的popupTemplate设置popupTemplate。将graphic添加至view并调用open方法以在应用程序加载时显示弹出窗口。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>更新
createViewWithSpatialReference函数。when加载视图时，调用displayCoordinates函数，其中center点为其参数。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //需要使用投影引擎 scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>运行应用程序。在空间参考之间切换以查看中心点的投影坐标。
查看投影的效果
每个投影都保持一个维度的精度，但在另一个维度中会产生不准确性。例如，您可能能够保持面积，但不能保持距离。要查看每个空间参考对圆形形状的影响，请在其中创建一个测地线缓冲区，您可在其中移动鼠标。geodesicBuffer 方法仅适用于 WGS84 (4326) 和 Web Mercator (3857) 空间参考。要在另一个空间参考中查看缓冲区，需要先将点重新投影到 4326 或 3857，然后调用 geodesicBuffer 方法。
创建
bufferPoint函数，该函数使用point和view作为其参数。如果point位于另一空间参考中，则调用projection模块并将坐标转换为4326以创建缓冲区。如果没有point，则return。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>创建
buffer元素以在point上调用geodesicBuffer方法。它将以1000kilometers为半径缓冲point。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>从
view中移除现有graphics，地图投影边界和中心点图形除外。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // 避免移除地图投影边界 view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>创建
bufferGraphic，将buffer作为其geometry，将polySym作为其symbol样式。将bufferGraphic以及通过移动鼠标创建的point及其pointSym样式添加到view中。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // 避免移除地图投影边界 view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>创建
createBuffer函数，该函数将event和view作为其参数。根据event中的x和y坐标定义point。如果有point，则调用bufferPoint函数。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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //Need to use projection engine scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>创建一个事件处理程序，该处理程序将根据鼠标的移动来缓冲点。
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 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>显示投影几何</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; background-color: #ffffff; } #wkid { position: absolute; top: 15px; right: 15px; width: 220px; font-family: "Avenir Next"; font-size: 1em; } </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/views/MapView", "geoscene/Map", "geoscene/request", "geoscene/geometry/SpatialReference", "geoscene/Graphic", "geoscene/geometry/Point", "geoscene/geometry/Polyline", "geoscene/layers/GeoJSONLayer", "geoscene/geometry/geometryEngine", "geoscene/geometry/projection", ], ( MapView, Map, geosceneRequest, SpatialReference, Graphic, Point, Polyline, GeoJSONLayer, geometryEngine, projection ) => { let spatialReference; let view; const polySym = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: [150, 130, 220, 0.85], outline: { color: "gray", width: 0.5, }, }; const pointSym = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "red", outline: { color: "white", width: 0.5, }, size: 5, }; const projectionBoundary = { symbol: { type: "simple-fill", color: null, outline: { width: 0.5, color: [50, 50, 50, 0.75], style: "dash", }, }, geometry: { type: "extent", xmin: -180, xmax: 180, ymin: -90, ymax: 90, spatialReference: SpatialReference.WGS84, }, }; const countriesGeoJson = new GeoJSONLayer({ url: "https://services3.geoscene.com/GVgbJbqm8hXASVYi/GeoScene/rest/services/World_Countries_(Generalized)/FeatureServer/0/query?where=1%3D1&outFields=*&f=geojson", copyright: "Esri", spatialReference: { wkid: 4326, }, renderer: { type: "simple", symbol: { type: "simple-fill", color: [255, 255, 255, 1], outline: { width: 0.5, color: [100, 70, 170, 0.75], }, }, }, }); const map = new Map({ layers: [countriesGeoJson], }); const wkidSelect = document.getElementById("wkid"); spatialReference = getSpatialReference(wkidSelect.value); wkidSelect.addEventListener("change", (event) => { spatialReference = getSpatialReference(event.target.value); createViewWithSpatialReference(); }); let center = new Point({ latitude: 30, longitude: -10, spatialReference: { wkid: 4326, }, }); createViewWithSpatialReference(); function createViewWithSpatialReference(){ async function createViewWithSpatialReference() { await projection.load(); center = projection.project(center, spatialReference); if (view) { view.map = null; view.destroy(); } view = new MapView({ container: "viewDiv", map: map, spatialReference: spatialReference, center: center, //需要使用投影引擎 scale: 150000000, }); view.graphics.add(projectionBoundary); view.ui.add(wkidSelect, "top-right"); view.when(() => { displayCoordinates(center); }); view.on("pointer-move", (event) => { createBuffer(event); }); } function getSpatialReference(wkid) { return new SpatialReference({ wkid: wkid, }); } function displayCoordinates(point) { const popupTemplate = { title: `WKID: ${point.spatialReference.wkid}`, content: `<b>X:</b> ${point.x.toFixed(5)} | <b>Y:</b> ${point.y.toFixed( 5 )}`, overwriteActions: true, }; view.popup.dockOptions = { buttonEnabled: false, }; view.popup.visibleElements = { closeButton: false, featureNavigation: false, }; const graphic = new Graphic({ geometry: point, popupTemplate: popupTemplate, }); view.graphics.add(graphic); view.popup.open({ features: [graphic], }); } function createBuffer(event) { let point = view.toMap({ x: event.x, y: event.y, }); if (point) { bufferPoint(point); } } function bufferPoint(point) { if ([3857, 4326].indexOf(point.spatialReference.wkid) === -1) { point = projection.project(point, getSpatialReference(4326)); if (!point) { return; } } const buffer = geometryEngine.geodesicBuffer(point, 1000, "kilometers"); if (point && buffer) { // Avoid removing the map projection boundary view.graphics.removeMany([ view.graphics.getItemAt(2), view.graphics.getItemAt(3), ]); const bufferGraphic = { geometry: buffer, symbol: polySym, }; view.graphics.addMany([ bufferGraphic, { geometry: point, symbol: pointSym, }, ]); } } }); </script> </head> <body> <div id="viewDiv"></div> <select id="wkid" class="esri-widget esri-select"> <option value="3857" disabled>Select a projection</option> <optgroup label="Equidistant (maintain length)"> <option value="4326" selected>WGS84 (GCS) -> pseudo Plate Carrée (Cylindrical)</option> <option value="54028">World Cassini (Cylindrical)</option> <option value="54027">World Equidistant conic (Conic)</option> </optgroup> <optgroup label="Conformal (maintain angles)"> <option value="54026">World Stereographic (Azimuthal)</option> </optgroup> <optgroup label="Equal-area (maintain area)"> <option value="54010">World Eckert VI (Pseudocylindrical)</option> <option value="54008">World Sinusoidal (Pseudocylindrical)</option> </optgroup> <optgroup label="Gnomonic (distances)"> <option value="102034">North Pole Gnomonic (Azimuthal)</option> </optgroup> <optgroup label="Compromise (distort all)"> <option value="3857">Web Mercator Auxiliary Sphere (Cylindrical)</option> <option value="54016">World Gall Stereographic (Cylindrical)</option> <option value="54042">World Winkel Tripel (Pseudoazimuthal)</option> <option value="54050">World Fuller / Dymaxion map (Polyhedral)</option> </optgroup> </select> </body> </html>
运行应用程序
在 CodePen 中，运行代码以显示地图。
运行应用程序时，您将看到中心点及其坐标。选择新空间参考时，GeoJSON 图层中的要素以及中心点和缓冲区的几何将被重新投影。在地图上移动鼠标以查看每个空间参考的失真。
下一步是什么？
要了解如何使用其他API 功能，请参阅以下教程：
解决方案
估计时间
20 分钟