ArcGIS for JavaScript之Maps and Views

Maps and Views

创建一个地图模型需要Map和View，Map对象通常都会传给View对象。

有两种View类用来展示视图：MapView（2D视图）和SceneView（3D视图）

创建一个map

需要新建Map和MapView对象。
Map中要声明baseMap
MapView中声明container，map，center，zoom

var map = new Map({  //Map对象map，basemap中可以传入但不限于以下的这些值
    //satellite卫星图, streets-vector街道矢量图, streets-navigation-vector街道导航矢量图,  topo-vector拓扑矢量图
    basemap: "streets" //街道图
});
var view = new MapView({ //MapView对象
    container: "viewDiv",
    map: map,//将map传入，视图中数据的引入
    center: [-118.80543, 34.02700],//MAHOU
    zoom: 5  //倍镜 数值越大放大倍数越大
});

创建Web Map或者Web Scene

web map是2D地图，web scene是3D地图
两者都是JSON结构能够设定map和scene，其中包括底图，图层，图层样式，弹框，图例，标签等等。

WebMap和WebScene通过唯一的id来进行访问和加载

Example: https://www.arcgis.com/home/item.html?id=41281c51f9de45edaf1c8ed44bb10e30

当WebMap和WebScene对象加载完成，所有的设置都被自动的应用在了Map和Scene。举个栗子，底图和图层被设置，图层样式被应用，并且弹框在每一个图层都被定义。

创建一个map从WebMap

const webMap = new WebMap({                        // Define the web map reference
  portalItem: {
    id: "41281c51f9de45edaf1c8ed44bb10e30",
    portal: "https://www.arcgis.com"               // Default: The ArcGIS Online Portal
  }
});

const view = new MapView({
  map: webMap,                                     // Load the web map
  container: "viewDiv"
});

创建一个scene从WebScene

const webScene = new WebScene({                    // Define the web scene reference
  portalItem: {
    id: "579f97b2f3b94d4a8e48a5f140a6639b",
    portal: "https://www.arcgis.com"               // Default: The ArcGIS Online Portal
  }
});

const view = new SceneView({                       // Load the web scene
  map: webScene,
  container: "viewDiv"
});

Views

它是和用户交互的最主要的角色，可以展示图层，弹框，UI组件和声明map应该被展示在哪里
创建一个view
为了让一个地图可见，视图对象需要一个Map对象和一个String类型的id属性，这个属性可以是一个div或者是div的引用。

const mapView = new MapView({          // Create MapView object
  map: myMap,
  container: "mapViewDiv"
});

const sceneView = new SceneView({      // Create SceneView object
  map: myMap,
  container: "sceneViewDiv"
});

设置map的可视部分
view对象中还可以设置其他的属性

const view = new MapView({
  center: [ -112, 38 ],          // 传入经度和纬度进行定位map展示的中心
  zoom: 13                      // zoom是变焦，数值越大，放大倍数越大
});

在3D视图中，用camera属性来进行位置的定义

var view = new SceneView({
  camera: {
    position: [
       -122, // 经度
         38, // 纬度
      50000  // 海拔高度，米
    ],
    heading: 95, // 指定镜头的朝向，也就是指南针的朝向，按角度倾斜
    tilt: 65 // 镜头与地面的倾斜角度
  }
});

view的动画效果

view.goTo({   // go to point with a custom animation duration
  target: {
      center: [ -114, 39 ]
    }, {
      duration: 5000
  });
});

与view交互

给view添加一个弹框，点击显示

view.popup.autoOpenEnabled = false;  // Disable the default popup behavior

view.on("click", function(event) { // Listen for the click event
  view.hitTest(event).then(function (hitTestResults){ // Search for features where the user clicked
    if(hitTestResults.results) {
      view.popup.open({ // open a popup to show some of the results
        location: event.mapPoint,
        title: "Hit Test Results",
        content: hitTestResults.results.length + "Features Found"
      });
    }
  })
});

给view添加UI组件

  var searchWidget = new Search({  //搜索框
    view: view
  });

  // Add the search widget to the top right corner of the view
  view.ui.add(searchWidget, {
    position: "top-right"
  });