Home > Developer > JavaScript
This is a very interesting example, but the example is more complex, you need to look at a lot of apis, I will give the article at the end of the key class and attribute Interpretation.
Also found a very interesting thing: the blog Park seems to have crawlers, my number 4th issued by the blogs,5 in Baidu and Google search page to see reproduced or Copied.
This article logical organization is not very good, want to know how to do zoom animation can be pulled directly to the tail to see the Conclusion.
Of course, This code is more, do not recommend mobile phone to See.
To get to the point,goTo () Animation , the official example is implemented in SCENEVIEW.
As usual, give require the first string array parameter
Require
[
"esri/map",
"esri/views/sceneview",
"dojo/query",
"dojo/on"
"dojo/domready!"
]
function (map,sceneview,query,on)
{
Your code
}
);
In addition to the last familiar map class and Sceneview class , but also more out of the query and on these two, literally can guess is the query and event Related. Keep Looking down.
In order to animate the camera, it is necessary to organize some buttons on the HTML page.
As a result, the body tag in the HTML is organized as Follows:
<Body> <DivID= "optionsdiv"> <ButtonID= "default">Default Flight</Button> <ButtonID= "linearslow">Linear Slow Flight</Button> <ButtonID= "linearfast">Linear Fast Flight</Button> <ButtonID= "expoincrease">Exponentially increasing speed flight</Button> <ButtonID= "fixedduration">Ten seconds flight</Button> <ButtonID= "bounceberlin">Bounce to Berlin</Button> </Div> <DivID= "viewdiv"></Div></Body>
6 buttons: default roaming, slower roaming, faster roaming, faster roaming, 10 second roaming, elastic zoom to Berlin
so, in the second function argument of require, you add an event to these buttons:
funtion (map,sceneview,query,on) {//is still instantiating two objects, map and view varMap =NewMap ({basemap:"osm" }); varView =NewSceneview ({container:"viewdiv", map:map, zoom:4 }); On (dojo.query ("#default"), "click",function(){ }); On (dojo.query ("#linearSlow"), "click",function(){ }); On (dojo.query ("#linearFast"), "click",function(){ }); On (dojo.query ("#expoIncrease"), "click",function(){ }); On (dojo.query ("#fixedDuration"), "click",function(){ }); On (dojo.query ("#bounceBerlin"), "click",function(){ });)function Parameters
Just one on (dojo.query (), function () {}) method can be implemented to add corresponding events for Dom Elements. here, a "click" event is Specified.
About Dojo.query (), Reference blog from-http://blog.csdn.net/dojotoolkit/article/details/6265337
Here we borrow the syntax of css, dojo.query ("#default") so that we can get to the Element.
It is important to note that the query method obtains an array, and if there is only one, it is itself.
A single way to find DOM elements by ID is Dojo.byid ()
We Continue. After you have added an event and a function body after getting the button element defined in the html, it is natural to animate it.
We take the whole function body to see what the similarities and differences are.
On (dojo.query ("#default"),"Click", function () {view.goto (shiftcamera ( -)); }); On (dojo.query ("#linearSlow"),"Click", function () {view.goto (shiftcamera ( -), {speedfactor:0.1, Easing:"Linear" }); }); On (dojo.query ("#linearFast"),"Click", function () {view.goto (shiftcamera ( -), {speedfactor:6, Easing:"Linear" }); }); On (dojo.query ("#expoIncrease"),"Click", function () {view.goto (shiftcamera ( -), {duration:4000, Easing:"In-expo" }); }); On (dojo.query ("#fixedDuration"),"Click", function () {view.goto (shiftcamera ( -), {duration:10000, Maxduration:10000 }); }); //Custom Time function Bodyfunction customeasing (t) {return 1-math.abs (math.sin (-1.7+ T *4.5* MATH.PI)) *Math.pow (0.5, T *Ten); } on (dojo.query ("#bounceBerlin"),"Click", function () {view.goto ({position: {x:13.40, Y:52.52, Z:700000, spatialreference: {wkid:4326}}, heading:0, Tilt:0}, {speedfactor:0.3, easing:customeasing}); });Click event function Body
We can see that there are many things out there. With the default roaming button as the pointcut, the Goto () method using the View object is found, and the parameter is unknown, which appears to be a method with a return Value. View the official API and this example code to learn what the Goto () method and the Shiftcamera () method mean:
GoTo () method
Transfers the view to the given Destination. The parameters can be: geometry or geometry arrays, graphic or graphic arrays, viewpoint objects, camera Objects.
In this example, the camera object (the return value of the Shiftcamera method is a Camera) or object (scaled to Berlin) is Used.
The above parameter is "target", which is the Goal.
There are also some optional parameters, enclosed in {}, as a single object object:
Animate (boolean), speedfactor (number type), duration (numer type), maxduration (number type),easing (string or method Body)
Speedfactor is a speed factor, well understood, the default is 1.
Duration is the duration, and if it does, then Speedfactor will be Overwritten.
Maxduration is the maximum Duration.
Easing is an easing method.
usually, easing must be selected, speedfactor and duration, maxduration three.
Parameters are Optional.
Shiftcamera () method
The code is as Follows:
function shiftcamera (deg) { var camera = view.camera.clone (); + = deg ; return camera;}Given a deg (rotation angle, angle system), The longitude value of the Camera's position plus the deg Value. of course, deg should be the same as the longitude Type.
The position is a spatial point (the points class, inherited from geometry), and longitude is Longitude. AJS4.2 is the default with the Web Mercator or WGS 84 reference System.
In this example, the default roaming is 60 degrees, that is, each press of the button will rotate the view angle by 60 degrees.
Let's take a look at the 2nd-5th roaming Button.
In addition to the camera object (target) returned by the Shiftcamera method, they have one more {}object object (option).
In this case, in addition to the elastic zoom to this button in berlin, the rest is animated by combining the camera object and Object Objects.
We can of course define a camera object directly with {}, just as it is written in the body of the method of elastic scaling to the button in Berlin.
On (dojo.query ("#bounceBerlin"), "click",function() {view.goto ({//this layer of curly braces defines the camera objectposition: {//this layer of curly braces defines the Camera's position propertyx:13.40, Y:52.52, Z:700000, spatialreference: {//This layer is a spatial referencewkid:4326}}, heading:0,//camera.headingtilt:0//camera.tilt }, { //this layer of curly braces is an object similar to the one above .speedfactor:0.3, easing:customeasing}); /this parenthesis ends with a goto range});
The easing parameter can be specified in the object object as a method body (the return value is number). Here customeasing is one such method. (looks slightly complicated)
function customeasing (t) { return 1-math.abs (math.sin ( -1.7 + t * 4.5 * MATH.PI)) * math.pow (0.5, T * 10
);}
(insert a sentence: If in C #, you can not just give a method name on the line, to use the delegate to operate the METHOD)
As for the string value of the easing parameter, you can go to the API query by yourself, I simply list these enumerations:
linear, in-cubic, out-cubic, in-out-cubic, in-expo, out-expo,in-out-expo
You can try it on your own, but the speed is Different. The official recommendation is less than 1s animation with its own definition of the method body, more than 1s with the above enumeration on the Line.
Summarize.
The core of the map Zoom animation is the use of the Goto () method of the View Object.
The GoTo () method is available in both the Mapview class and the Sceneview class, but not in their parent Class View class.
This article will learn about the official API and examples, mainly about the use of the Goto () method Parameters.
Usage: View Object. goTo (target, option);
Can be:{define camera object}+{option parameter} incoming (top 5 BUTTONS)
It can also be: pass directly a camera object +{option parameter}(last button).
The easing in the option parameter is "required" (otherwise there is no animation effect), speedfactor, duration, Maxduration is the third choice.
The camera object can be returned by its own method body, or it can be defined directly with a JS Curly brace.
Changing some of the property values of the camera object, such as latitude and longitude, can be achieved by changing the Perspective.
As for the other, such as geometry, Graphic, viewpoint did not study, reference API can be solved, this article just read the official example to achieve the entry Effect.
ArcGIS API for JavaScript 4.2 Learning notes [6] goTo () map animations
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
