arcgis js api 4.x 加载高德影像地图

简介

arcgis js api 4.x  是esri 公司推出二三维一体化web gis 开发 api,该 js api 提供强大二三维可视化能力，这里通过typescript 扩展 arcgis js api4.x 实现高德影像地图服务加载。 

扩展类代码

import {
    subclass,
    property
} from "esri/core/accessorSupport/decorators";
import BaseTileLayer from "esri/layers/BaseTileLayer";
import request from "esri/request";
import {
    renderable,
    tsx
} from "esri/widgets/support/widget";

interface GDImageLayerParams extends __esri.LayerProperties {
    urlTemplate: string,
    tint: any
}

@subclass("esri.layers.GDImageLayer")
class GDImageLayer extends BaseTileLayer {
    private _elevation: any = null;
    constructor(params ? : GDImageLayerParams) {
        super(params);
    }

    @property()
    @renderable()
    urlTemplate: string;

    @property()
    @renderable()
    tint: any;


    public getTileUrl(level: any, row: any, col: any): any {
        return this.urlTemplate.replace("{z}", level).replace("{x}",
            col).replace("{y}", row);
    }

    public fetchTile(level: number, row: number, col: number, options: any): Promise < any > {
        const url = this.getTileUrl(level, row, col);
        return request(url, {
                responseType: "image",
                //   allowImageDataAccess: true
            })
            .then(function (response: any) {
                // when esri request resolves successfully
                // get the image from the response
                var image = response.data;
                var width = this.tileInfo.size[0];
                var height = this.tileInfo.size[0];

                // create a canvas with 2D rendering context
                var canvas = document.createElement("canvas");
                var context = canvas.getContext("2d");
                canvas.width = width;
                canvas.height = height;


                // Draw the blended image onto the canvas.
                context.drawImage(image, 0, 0, width, height);

                return canvas;
            }.bind(this));
    };
}
export = GDImageLayer;

扩展类调用

require([
            "esri/Map",
            "esri/layers/TileLayer",
            "esri/layers/FeatureLayer",
            "esri/views/SceneView",
            'esri/views/3d/externalRenderers',
            'js/GDImageLayer',
             "esri/config",
             "esri/Color",
            'esri/geometry/Point',
            'esri/geometry/Polygon',
            'esri/tasks/QueryTask',
            'esri/tasks/support/Query',
            "esri/layers/GraphicsLayer",
            "esri/layers/SceneLayer",
            "esri/Graphic",
            "esri/views/layers/support/FeatureFilter",
            "dojo/domReady!"
        ], function (
            Map,
            TileLayer,
            FeatureLayer,
            SceneView,
            externalRenderers,
            GDImageLayer,
            esriConfig,
            Color,
            Point,
            Polygon,
            QueryTask,
            Query,
            GraphicsLayer,
            SceneLayer,
            Graphic,
            FeatureFilter
        ) {
            var baselayer = new TileLayer({
                url: "http://server.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer",
            });
            var map = new Map();
            map.add(baselayer);

            esriConfig.request.corsEnabledServers.push("webst01.is.autonavi.com");
 
            var stamenTileLayer = new GDImageLayer({
              urlTemplate: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
              tint: new Color("#004FBB"),
              visible: true,
              title: "高德"
            });
            map.add(stamenTileLayer);

            view = new SceneView({
                container: "viewDiv",
                map: map,
                viewingMode: "global"
            });
        });

源码地址

下载