ArcGIS 地图在使用 wkid 102704 时显示所有大洲（完全缩小）

Question

我指的是 https://developers.arcgis.com/documentation/core-concepts/features-and-geometries/#polygons 中提供的示例，用于绘制多边形并将地图移动到该位置。这个例子工作正常。但是，当我使用我的自定义详细信息（例如环值和 WKID）时，多边形正在该位置绘制，但地图似乎完全缩小，因此所有大陆都出现了（请检查附图）。需要通过单击“+”小部件来缩放到该位置。请在下面找到代码。 enter image description here

我已经评论了示例 wkid 和 ring 值。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>


<style>
  html,
  body,
  #mapDiv,
  .map .container {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100vw !important;
  }
</style>

</head>
<body>


<script>
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/geometry/Polygon",
  "esri/Graphic",
  "esri/symbols/SimpleFillSymbol",
  "esri/geometry/support/webMercatorUtils",
  "dojo/domReady!"
], function(
  Map,
  MapView,
  FeatureLayer,
  Polygon,
  Graphic,
  SimpleFillSymbol,
  webMercatorUtils
) {
  var map = new Map({
    basemap: "streets-navigation-vector"
  });


// 102704 - Custom WKID
// 4326 - Example WKID
  var poly = new Polygon({
    spatialReference: {
      wkid: 102704
    },
    rings: [
      // [
      //   [-118.38516, 34.0127],
      //   [-118.38827, 34.01489],
      //   [-118.38813, 34.01602],
      //   [-118.38797, 34.01648],
      //   [-118.3876, 34.01712],
      //   [-118.38733, 34.01696],
      //   [-118.38696, 34.01749],
      //   [-118.38662, 34.01789],
      //   [-118.38689, 34.01805],
      //   [-118.38683, 34.01812],
      //   [-118.38295, 34.01592],
      //   [-118.38516, 34.0127]
      // ],
      // [
      //   [-118.38661, 34.01486],
      //   [-118.38634, 34.01498],
      //   [-118.38652, 34.01563],
      //   [-118.3867, 34.01559],
      //   [-118.38679, 34.01595],
      //   [-118.38699, 34.01591],
      //   [-118.38707, 34.01507],
      //   [-118.38661, 34.01486]
      // ]



    [
       [
       2744913.4668447226,
       541568.06113781035
      ],
      [
       2744917.4038447142,
       541499.65215389431
      ],
      [
       2744864.2454864681,
       541496.82210706174
      ],
      [
       2744813.6648789644,
       541494.12952713668
      ],
      [
       2744810.2104895562,
       541563.64283956587
      ],
      [
       2744860.4905727208,
       541565.79441006482
      ],
      [
       2744913.4668447226,
       541568.06113781035
      ]
     ]
    ]
  });

  var view = new MapView({
    container: "mapDiv",
    map: map,
    // zoom: 18,
        // minZoom: 13,
        basemap: "satellite",
    // extent: webMercatorUtils.geographicToWebMercator(poly.extent.expand(3))
  });
  var symbol = new SimpleFillSymbol({
    style: "solid",
    color: [4, 121, 193, 0.5],
    outline: {
      width: 2,
      color: [2, 94, 149, 1]
    }
  });

  var graphic = new Graphic({
    geometry: poly,
    symbol: symbol
  });

  view.on("mouse-wheel", function(event) {
    event.stopPropagation();
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
    window.scroll(0, top + event.deltaY);
  });

  view.graphics.add(graphic);

});
</script>
<div style="" id="mapDiv"></div>
<mat-button-toggle-group [multiple]="true" name="fontStyle" aria-label="Font Style">
  <button id="parcels" value="bold">Parcels</button>
  <button id="housenumbers" value="italic">House Numbers</button>
  <button id="said" value="underline">Sample Area IDs</button>
</mat-button-toggle-group>
</body>
</html>

Answer 1

问题是您需要重新投影您的自定义坐标（假设我们将自定义称为其他坐标而不是 WebMercator 3857 或 102100 和 Geographics 4326）。为此，

您可以使用 GeometryService 与 ArcGIS Server 的几何服务进行交互，
或者您可以尝试 pojection 模块在客户端中完成。

这里有一个基于您的代码的工作示例，它使用 GeometryService。

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>


  <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.16/"></script>


  <style>
    html,
    body,
    #mapDiv,
    .map .container {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100vw !important;
    }
  </style>

</head>

<body>


  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/geometry/Polygon",
      "esri/geometry/SpatialReference",
      "esri/Graphic",
      "esri/tasks/GeometryService",
      "esri/tasks/support/ProjectParameters",
      "dojo/domReady!"
    ], function (
      Map,
      MapView,
      Polygon,
      SpatialReference,
      Graphic,
      GeometryService,
      ProjectParameters
    ) {

      const map = new Map({
        basemap: "streets"
      });

      const view = new MapView({
        container: "mapDiv",
        map: map
      });

      // 102704 - Custom WKID
      const originalPoly = new Polygon({
        spatialReference: {
          wkid: 102704
        },
        rings: [
          [
            [
              2744913.4668447226,
              541568.06113781035
            ],
            [
              2744917.4038447142,
              541499.65215389431
            ],
            [
              2744864.2454864681,
              541496.82210706174
            ],
            [
              2744813.6648789644,
              541494.12952713668
            ],
            [
              2744810.2104895562,
              541563.64283956587
            ],
            [
              2744860.4905727208,
              541565.79441006482
            ],
            [
              2744913.4668447226,
              541568.06113781035
            ]
          ]
        ]
      });

      console.log(`Original Polygon: ${JSON.stringify(originalPoly.toJSON())}`);

      const geomSer = new GeometryService(
        "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer"
      );

      const outSpatialReference = new SpatialReference({ wkid: 102100 });

      const params = new ProjectParameters({
        geometries: [originalPoly],
        outSpatialReference
      });

      geomSer.project(params).then(function(result) {
        const projectedPoly = result[0];

        if (!projectedPoly) {
          return;
        }

        console.log(`Projected Polygon: ${JSON.stringify(projectedPoly.toJSON())}`);

        view.graphics.add(new Graphic({
          geometry: projectedPoly,
          symbol: {
            type: "simple-fill",
            style: "solid",
            color: [255, 0, 0, 0.1],
            outline: {
              width: 2,
              color: [255, 0, 0, 1]
            }
          }
        }));

        view.extent = projectedPoly.extent.clone().expand(3);

      });

    });
  </script>
  <div id="mapDiv"></div>
</body>

</html>

ArcGIS API - GeometryService

ArcGIS API - projection

ArcGIS 地图在使用 wkid 102704 时显示所有大洲（完全缩小）

ArcGIS map shows all continents (zoom out completely) when using wkid 102704

arcgis-js-api

esri-maps