ArcGIS for Javascript (一)

ArcGIS for Javascript

开始接触JS的一个记录：
IDE:WebStorm

---

Overview

• 设置中心点以及刻度

const view = new MapView({
  center: [ -122, 38 ],
  scale: 12345678
});

• 设置比例及属性

view = new MapView();
view.center = [ -122, 38 ];
view.scale = 12345678;

• 监听属性变化

// watch handler: the callback fires each time the title of the map's basemap changes
var handle = map.watch('basemap.title', function(newValue, oldValue, property, object) {
   
  console.log("New value: ", newValue,
              "<br>Old value: ", oldValue,          
              "<br>Watched property: ", property,   
              "<br>Watched object: ", object);
});

• Autocasting
  直接将函数的构造参数传递属性
• 3D support
  使用WebGL显示地图和场景应用

const view = new SceneView({
  container: "viewDiv",
  map: map,
  scale: 500000,
  center: [-101.17, 21.78]
});

使用 Camera内部类构造函数

var view = new SceneView({
  container: "viewDiv",
  map: map,
  camera: {
    position: [7.654, 45.919, 5184],
    tilt: 80
  }
});

2D或者3D适用

var viewpoint = new Viewpoint({
  targetGeometry: new Point({
    x: 4.4856,
    y: 48.3908
  }),
  scale: 2000
});

• 三维符号学（ 3D symbology）
• Web GIS 集成
• 创建可视化数据地图

Get the API

• CDN(content delivery network)

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

Benefits to working with :

--CDN是地理分布的Web服务器的集合，它有效地传递内容；
--服务器负载均衡并监视；
--只需修改应用程序中的脚本标记即可指向新版本，不需要重新安装API.

• npm(a JavaScript package manager)
  注册类型说明：

extension   MIME/type               Description
----------------------------------------------------------
.ttf    application/octet-stream        True Type Fonts
.wasm   application/wasm                WebAssembly
.woff   application/font-woff           Web Open Font Format
.woff2  application/font-woff2          WOFF File Format 2.0
.wsv    application/octet-stream        Supports SceneView's stars visualization

• 版本支持
  

API

- Properties

//Getting properties
var basemapTitle = null;
if (map.basemap) {
  basemapTitle = map.basemap.title;
}
//or get()
var basemapTitle = map.get("basemap.title");

//Setting properties
 view.center = [ -100, 40 ];
 view.zoom = 6;
 map.basemap = 'oceans';
 //or set()
 var viewProperties = {
  center: [ -100, 40 ],
  zoom: 6
};
view.set(viewProperties);

//Watching properties
var map = new Map({basemap: 'streets'});
var handle = map.watch('basemap.title', function(newValue, oldValue, property, object) {
  console.log("New value: ", newValue, 
              "<br>Old value: ", oldValue,  
              "<br>Watched property: ", property, 
              "<br>Watched object: ", object);   
});
//If the user changes the basemap to the following:
map.basemap = "topo";
//The console will log the followings based on the watch handler:
New value: Topographic
Old value: Streets
Watched property: basemap.title
Watched object: 

- Promise

//.then()
someAsyncFunction().then(callback, errback);
//回调和回退
someAsyncFunction().then(function(resolvedVal){
   
  console.log(resolvedVal);  
}, function(error){
   
  console.error(error); 
});


//Example: GeometryService.project()
require([
  "esri/tasks/GeometryService",
  "esri/tasks/support/ProjectParameters", ...
  ], function(GeometryService, ProjectParameters, ... ) {

    var gs = new GeometryService( "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer" );
    var params = new ProjectParameters({
      geometries: [points],
      outSR: outSR,
      transformation = transformation
    });
    gs.project(params).then(function(projectedGeoms){
   
      console.log("projected points: ", projectedGeoms);
    }, function(error){
   
      console.error(error);
    });
});


//Example: geometryEngineAsync.geodesicBuffer()
 var bufferLayer = new GraphicsLayer();
  gs.project(params).then(bufferPoints)           
    .then(addGraphicsToBufferLayer)
    .then(calculateAreas)      
    .then(sumArea)
    .catch(function(error){
    
      console.error('One of the promises in the chain was rejected! Message: ', error);
    });
 function bufferPoints(points) {
   
    return geometryEngine.geodesicBuffer(points, 1000, 'feet');
  }
function addGraphicsToBufferLayer