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

Question

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

107 Views Asked by Adam-KER At 21 October 2024 at 02:02

I am referring an example provided in, https://developers.arcgis.com/documentation/core-concepts/features-and-geometries/#polygons for drawing a polygon and move the map to that location. The example is working fine. But when I use my custom details such as the rings values and WKID, the polygon is drawing in the location but the map appears completely zoom out such that all the continents are appearing (Please check the image attached). It is required to zoom to the location by click on the '+' widget. Please find the code below. enter image description here

I have commented the example wkid and ring values.

<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>

Original Q&A

There are 1 best solutions below

**cabesuon** · Accepted Answer

The problem is that you need to reproject your custom coordinates (assume we call custom to other coordinate rather than WebMercator 3857 or 102100 and Geographics 4326). In order to do so,

you can use the GeometryService to interact with a geometry service of an ArcGIS Server,
or you could try pojection module to do it in the client.

Here you have a working example base on your code, that uses 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 map shows all continents (zoom out completely) when using wkid 102704

There are 1 best solutions below

Related Questions in ARCGIS-JS-API

Related Questions in ESRI-MAPS

Trending Questions

Popular # Hahtags

Popular Questions