zoukankan      html  css  js  c++  java
  • ArcGIS API for JavaScript 入门教程[5] 再讲数据——Map类之底图与高程

    【回顾】前4篇交代了JsAPI的背景、资源如何获取,简介了数据与视图分离的概念与实现,剖析了页面的大骨架。

    这篇开始,讲Map类。

    转载注明出处,博客园/CSDN/B站/知乎:秋意正寒

    目录:https://www.cnblogs.com/onsummer/p/9080204.html

    1. Map类的属性与方法

    Map类继承自Accessor,有子类WebMap , WebScene。

    这玩意儿是什么?通俗说,Map就是一张地图,它属于数据部分,需要用视图展示它。

    视图,在jsAPI中,就是View,它负责把Map描绘出来,用WebGL的手段。

    那么,Map类如何组织数据呢?用图层。对,图层,Layer!(至于Layer那是后话了,我们先谈Map数据的组织)

    所以,你看到的很多Map类的方法,都是控制图层的。

    属性 方法
    • ground:高程,Ground类型
    • basemap:底图,Basemap类型
    • allLayers:全部平面图层,Collection类型
    • layers:全部可操作图层,Coolection类型
    • add():添加一个图层,可指定图层位置
    • addMany():添加多个图层,可指定位置
    • findLayerById():根据ID寻找图层
    • remove():移除指定图层
    • removeAll():移除全部图层
    • removeMany():移除多个图层
    • reorder():对某个图层进行重排序(id变换)

     

     

     

     

     

     

     

    方法都很简单,自行查阅官方API就知道怎么写了,我重点讲一下属性,尤其是ground属性、basemap属性。

    有人说为什么不讲layers和allLayers?图层固然是Map的组成,但是这里是说Map,数据的承载体——Layer,还要等到下篇再说。

    2. 属性:basemap详解

    这个词直译是基础地图,我通俗地翻译为底图。就是最底下的图,像桌布一样。

    2.1 Basemap类

    本质上,basemap还是图层。

    basemap是Basemap类型的,Basemap类型的对象是如何创建的呢?

    当然还是由服务器上的各种数据服务创建的,查阅Basemap的构造器,其实basemap就是一堆堆的“layer”组成的。

    如果需要自定义底图,可以深入研究研究Basemap类如何实例化。

    2.2 预置basemap

    如果对自定义底图没什么功夫,其实可以直接用官方给的预置图层,只需将basemap属性赋予几个预置的字符串即可。

    例如:

    var map = new Map(
        {
            basemap: "streets",
            ground: "world-elevation"
        }
    );

    basemap就指定为街道图了(打开好像是OpenStreetMap)

    官方预置了十几种底图,有兴趣可以去看看。

    3. 属性:ground详解

    这单词直译是地面,形象翻译为高程。与底图一样,允许你使用字符串的方式,使用官方给的预置世界高程信息。

    如果有更精确的或者符合自己坐标系需要的高程信息,这可能就需要通过实例化Ground对象来赋值了。

    实际上,Ground类,也是由图层构成的。

    它是由服务器上的高程影像服务组成的,前端这边叫高程图层——ElevationLayer类。

    例如:

    var worldElevation = ElevationLayer({
      url: "//elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
    });
    var customElevation = ElevationLayer({
      url: "http://my.server.com/arcgis/rest/service/MyElevationService/ImageServer"
    });
    var map = new Map({
      basemap: "topo",
      ground: new Ground({
       layers: [ worldElevation, customElevation ]
      })
    });

    4. 总结

    实际上,Map就是个图层容器,只不过官方对各种图层的功能进行了分类。

    底图做底,高程作高度信息,还有其他的图层,展示各种地理信息,构成了三层式体系。

    下一节,我就简单说说“其他的图层”,有哪些,怎么创建,这可能要提及服务端了。

     

    plus:要断更比较长的时间,暂时把这个写上,见谅。

  • 相关阅读:
    关于js计算非等宽字体宽度的方法
    [NodeJs系列]聊一聊BOM
    Vue.js路由管理器 Vue Router
    vue 实践技巧合集
    微任务、宏任务与Event-Loop
    事件循环(EventLoop)的学习总结
    Cookie、Session和LocalStorage
    MySQL 树形结构 根据指定节点 获取其所在全路径节点序列
    MySQL 树形结构 根据指定节点 获取其所有父节点序列
    MySQL 创建函数报错 This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled (you *might* want to use the less safe log_bin_trust_function_creators
  • 原文地址:https://www.cnblogs.com/onsummer/p/9091052.html
Copyright © 2011-2022 走看看