arcgis加载高德

矢量地图带注记:https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
矢量地图不带注记:http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}&scl=1&ltype=3
影像不带注记:http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
道路带注记:http://webst0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8

道路不带注记:http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8&ltype=11

矢量带注记http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}

getTileUrl()、fetchTile()getTileUrl()主要是根据请求级别、行列号生成url;fetchTile()主要是发送动态的url请求并得到返回的地图切片,也可以根据需求进行合并图像

require([
“esri/Map”,
“esri/views/MapView”,
“esri/layers/VectorTileLayer”,
“esri/config”,
“esri/layers/BaseTileLayer”,
“esri/request”,
“esri/Color”
], function(Map, MapView, VectorTileLayer, esriConfig,BaseTileLayer,esriRequest,Color) {
	var TintLayer = BaseTileLayer.createSubclass({
                        properties: {
                            urlTemplate: null,
                            tint: {
                                value: null,
                                type: Color
                            }
                        },
                
                        // generate the tile url for a given level, row and column
                        getTileUrl: function(level, row, col) {
                        return this.urlTemplate.replace("{z}", level).replace("{x}",
                            col).replace("{y}", row);
                        },
                
                        // This method fetches tiles for the specified level and size.
                        // Override this method to process the data returned from the server.
                        fetchTile: function(level, row, col) {
                
                        // call getTileUrl() method to construct the URL to tiles
                        // for a given level, row and col provided by the LayerView
                        var url = this.getTileUrl(level, row, col);
                
                        // request for tiles based on the generated url
                        // set allowImageDataAccess to true to allow
                        // cross-domain access to create WebGL textures for 3D.
                        return esriRequest(url, {
                            responseType: "image",
                            allowImageDataAccess: true
                            })
                            .then(function(response) {
                            // 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));
                        }
                    });
                                
// Add stamen url to the list of servers known to support CORS specification.
                    esriConfig.request.corsEnabledServers.push("webst01.is.autonavi.com");

	var digitallTileLayer = new TintLayer({
		urlTemplate: 'http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
		tint: new Color("#004FBB"),
		title: "高德影像注记"
	  });

	 var stamenTileLayer = new TintLayer({
		urlTemplate: "http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
		tint: new Color("#004FBB"),
		title: "高德影像地图"
	  });  

	 var stamenTileLayer1 = new TintLayer({
		urlTemplate: "http://webst01.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",
		tint: new Color("#004FBB"),
		title: "高德电子地图"
	  });
	
	let map = new Map({
         layers: [stamenTileLayer,digitallTileLayer,stamenTileLayer1]
     });
	let view = new MapView({
							container:'mymap',
							map:map,
							center:[116.3972282409668,39.90960456049752],
							zoom:12
     });
// 图层控制控件
    var layerList = new LayerList({
                        view: view,
    });
    view.ui.add(layerList, "top-right")
});

ps:https://blog.csdn.net/u013869554/article/details/107635450 https://blog.csdn.net/zhengjie0722/article/details/81780860

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值