ArcGIS API - 无法居中或缩放

Question

So, I am using the ARCGIS api in order to show some old maps, that should start center at and zoomed in to a certain city. After finally figuring out how to use the specific map I want as a basemap, I've struggled for a couple of hours trying to zoom and center at the right place. I am able to zoom in to this place using a default basemap (eg "streets"), but not using my custom basemap. I've tried both map.centerAndZoom and map.centerAt, but neither seem to work. The relevant code:

var map;
    require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/on", "dojo/_base/json", "dojo/dom-style", "esri/request", "esri/geometry/Point", "esri/dijit/Search", "esri/dijit/LocateButton", "esri/tasks/GeometryService", "esri/tasks/locator", "esri/tasks/ProjectParameters", "esri/symbols/PictureMarkerSymbol", "dojo/domReady!"],
    function(Map, ArcGISTiledMapServiceLayer) {
        map = new Map("venster_Midden_2_Map");
        var customBasemap = new ArcGISTiledMapServiceLayer(
        "http://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1815/MapServer");
        map.addLayer(customBasemap);
        map.centerAndZoom(51.1, 4.3, 0);
    });

Does anyone have a clue on how to get the zoom and center working? Or might it be the case that certain maps simply don't allow such operations?

Answer 1

centerAndZoom is more intended for events, like when a user has chosen a certain city from a list and would like the map to automatically zoom to it. As richj points out , it also requires a point, and a zoom level of zero won't work.

If you don't want any of the Esri basemaps at all, just leave that out when initially creating the map. Slightly modifying this Tiled Map Service sample :

  require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],
    function(Map, Tiled) {
      map = new Map("map", {zoom: 3});

      var tiled = new Tiled("http://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1815/MapServer");
      map.addLayer(tiled);
    }
  );

Then, you will be able to include centerAndZoom as a response to an event (eg after the Tiled layer has been fully loaded from its web source).

  require(["esri/map",
           "esri/layers/ArcGISTiledMapServiceLayer",
           "esri/geometry/Point",
           "esri/SpatialReference",
           "dojo/domReady!"],
    function(Map, Tiled, Point, SpatRef) {
      map = new Map("map", {zoom: 3});

      var tiled = new Tiled("http://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1815/MapServer");
      map.addLayer(tiled);

      var cityCenter = new Point(121000, 495000, new SpatRef({ wkid: 28992 }));
      tiled.on("load",function(evt) {
        map.centerAndZoom(cityCenter, 6);
      });
    });

Ref. Point constructor , centerAndZoom method , and Working with events .

Answer 2

From the relevant API documentation the centreAndZoom method takes a Point as its first argument. Also your zoom factor of zero looks like it might cause a problem.

You might have more luck with a Point and a non-zero zoom scale, like this:

map.centerAndZoom(new Point(51.1, 4.3), 0.5);

The method has a Deferred return type so that you can provide a callback to react when the method call has completed.

Answer 3

Maybe it is esri api bug, for me, it sometime (but not always) failed to move map center at lng, lat with zoom level 18

Here is how I work around:

Recommend:

map.centerAndZoom(new Point(lng, lat), 18);

Alternative: (sometimes, not always, it failed to move the map, maybe ESRI need to fix bug for Javascript api v3.24)

map.centerAt(new Point(lng, lat));
//or
// map.centerAt(new Point(lng, lat, new SpatialReference({wkid: 4326})));
map.setZoom(18);