Can you please take a look at this demo and let me know how I can add smooth animation or Pan function to move to the destination?
As you can see I am trying to re-center the map center by
map.centerAt(new Point(-78.542, 37.61, new SpatialReference({wkid: 4326})));
on a click event but this is jumping the map to the destination.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://js.arcgis.com/3.23/"></script>
<script>
var map;
require(["esri/map", "esri/geometry/Point","esri/SpatialReference","dojo/domReady!"], function(Map, Point, SpatialReference) {
map = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
$(".btn").on("click", function(){
map.centerAt(new Point(-78.542, 37.61, new SpatialReference({wkid: 4326})));
});
});
</script>
</head>
<body>
<button type="button" class="btn btn-default">Go There</button>
<div id="map"></div>
</body>
</html>
-
there is the esri.config.defaults.map.panDuration config ,( set in milisecond) but for further distance between your point and the centered point , the annimation doesn't work ..Bourbia Brahim– Bourbia Brahim2018年01月04日 21:52:38 +00:00Commented Jan 4, 2018 at 21:52
2 Answers 2
I noticed that the map has an "optimizePanAnimation" constructor option that can be set to false to help with panning within the same zoom level.
Here's a link to the documentation. Search the page for "optimizePanAnimation", it's kind of hidden in there.
https://developers.arcgis.com/javascript/3/jsapi/map-amd.html
I've been playing around with that property and the esriConfig settings as well.
esriConfig.defaults.map.panDuration = 10000;
esriConfig.defaults.map.panRate = 1;
esriConfig.defaults.map.zoomDuration = 10000;
esriConfig.defaults.map.zoomRate = 1;
Here's another thread that touches on the same question.
Here's a working codepen that illustrates the idea:
https://codepen.io/Cofad/pen/vYNaOdw
It's not working perfectly yet. I'm having issues with the tiles not loading quickly enough, but it's a step in the right direction.
If you are able to use the 4.x JavaScript API, then there are some good options in the "GoTo" function of MapView and SceneView classes.
Here's a simple demo of the options for SceneView: https://jsfiddle.net/gavinr/tdrp5jg9/