WebGis全面解析:地理信息系统:| 8月更文挑战

地理信息系统| 8月更文挑战

这是我参与8月更文挑战的第四天，活动详情查看：8月更文挑战

Arcgis API加载各种底图/图层

1. 加载arcgis在线地图

require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
    const Map = new Map({
      basemap: "streets-vector"//在线底图类型
    });
    const view = new MapView({
      map: Map,
      container: "viewDiv"
    });
  });

basemap官网给出的种类很多，大家可以按照需求选择自己需要的底图：

2. 加载arcgis server发布地图(WMS)

require(["esri/layers/MapImageLayer"], function(MapImageLayer){
    let layer = new MapImageLayer({
      url: "https://server.arcgisonline.com/arcgis/rest/services/Census/MapServer"
    });
    map.add(layer);  
  });

3. 加载高德，百度，google在线地图 通过扩展BaseTileLayer来自定义高德地图图层GaodeLayer模块。 我们主要设置两部分：getTileUrl()、fetchTile() 。getTileUrl()主要是根据请求级别、行列号生成url；fetchTile()主要是发送动态的url请求并得到返回的地图切片，也可以根据需求进行合并图像。GaodeLayer.js相关代码如下：

define(["dojo/_base/declare", "esri/layers/BaseTileLayer", "esri/request"],
    function(declare, BaseTileLayer, esriRequest) {
        return BaseTileLayer.createSubclass({
            properties: {
                urlTemplate: null,
            },
            getTileUrl: function(level, row, col) {
                return url = 'http://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level;
            },
            fetchTile: function(level, row, col) {
                var url = this.getTileUrl(level, row, col);
                return esriRequest(url, {
                        responseType: "image"
                    })
                    .then(function(response) {

                        var image = response.data;
                        var width = this.tileInfo.size[0];
                        var height = this.tileInfo.size[0];

                        var canvas = document.createElement("canvas");
                        var context = canvas.getContext("2d");
                        canvas.width = width;
                        canvas.height = height;

                        context.drawImage(image, 0, 0, width, height);

                        return canvas;
                    }.bind(this));
            }
        });
    }
)

加载我们自定义的模块之前，需要先配置路径。（在vue里建议把该文件放到线上，直接类似arcgisAPI本地部署，引入模块进来即可）

var dojoConfig = {
    parseOnLoad: true,
    packages: [{
        name: "src",
        location: location.pathname.replace(/\/[^/]+$/, "")+"/src"
    }]
};

加载模块，并添加到map:

require([
    "esri/Map",
    "src/GaodeLayer",
    "esri/views/MapView",
    "dojo/domReady!"], 
    function (Map,GaodeLayer,SceneView) {
    var GaodeLayer = new GaodeLayer();
    var map = new Map({
         layers: [GaodeLayer]
    });
    var view = new MapView({
         container: "view",
         map: map,
         center: [116, 39],
         zoom: 4
     });
});

4. 加载天地图（影像，矢量，标注，按照需求加载即可）

require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/WebTileLayer",
        "dojo/domReady!"
    ],
    function(Map, MapView, WebTileLayer) {
        var ImageLayer = new WebTileLayer({ //影像
            urlTemplate: "http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=38ddcb151f91faed0aea56fc321914a4",
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        });

        var vectorLayer = new WebTileLayer({ //矢量
            urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=38ddcb151f91faed0aea56fc321914a4",
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        });

        var AnnoLayer = new WebTileLayer({ //标注
            urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=38ddcb151f91faed0aea56fc321914a4",
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        });
        var map = new Map({
            layers: [vectorLayer, AnnoLayer]
        });
        var view = new MapView({
            container: "view",
            map: map,
            center: [116, 39],
            zoom: 4
        });
    });

5. 加载geoserver发布地图

require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/WFSLayer",
        "dojo/domReady!"
    ],
    function(Map, MapView, WFSLayer) {
        const layer = new WFSLayer({
            url: "https://giswebservices.massgis.state.ma.us/geoserver/wfs", //geoserver地址
            name: "GISDATA.CENSUS1990BLOCKGROUPS_POLY" //对应的图层名称
        })
        var map = new Map({
            layers: [layer]
        });
        var view = new MapView({
            container: "view",
            map: map,
            center: [116, 39],
            zoom: 4
        });
    });

6. 加载标准OGC服务（OGC标准前面有提过）地图（与加载geoserver图层类似）

require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/OGCFeatureLayer",
        "dojo/domReady!"
    ],
    function(Map, MapView, OGCFeatureLayer) {
        const layer = new OGCFeatureLayer({
            url: "https://vtp2.geo-solutions.it/geoserver/ogc/features", //服务地址
            collectionId: "ne:countries50m" //对应的图层名称
        })
        var map = new Map({
            layers: [layer]
        });
        var view = new MapView({
            container: "view",
            map: map,
            center: [116, 39],
            zoom: 4
        });
    });

感谢观看，有问题的小伙伴可以在评论区留言，欢迎技术讨论