arcgis javascript api4.x以basetilelayer方式加载天地图web墨卡托（wkid：3857）坐标系

news2024/10/6 8:22:34

需求：

效果图：

代码：

提示：

2个文件放同一个文件夹下

MyCustomTileLayer.js

define(['exports', "esri/layers/BaseTileLayer","esri/request"], function (
    exports,
    BaseTileLayer,
    esriRequest
  ) {
    const MyCustomTileLayer = BaseTileLayer.createSubclass({
            // properties of the custom tile layer
            properties: {
              urlTemplate: null,
            },
  
          // override getTileUrl()
          // generate the tile url for a given level, row and column
          getTileUrl: function (level, row, col) {
            return this.urlTemplate.replace("{level}", level).replace("{col}", col).replace("{row}", 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, options) {
  
            // 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
            // the signal option ensures that obsolete requests are aborted
            return esriRequest(url, {
              responseType: "image",
              //signal: options && options.signal
               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;
  
                // Apply the tint color provided by
                // by the application to the canvas
                if (this.tint) {
                  // Get a CSS color string in rgba form
                  // representing the tint Color instance.
                  context.fillStyle = this.tint.toCss();
                  context.fillRect(0, 0, width, height);
  
                  // Applies "difference" blending operation between canvas
                  // and steman tiles. Difference blending operation subtracts
                  // the bottom layer (canvas) from the top layer (tiles) or the
                  // other way round to always get a positive value.
                  context.globalCompositeOperation = "difference";
                }
  
                // Draw the blended image onto the canvas.
                context.drawImage(image, 0, 0, width, height);
  
                return canvas;
              }.bind(this));
          }
  
        });
  
  return MyCustomTileLayer;
  })

loadtdt3857.html

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
        <title>（墨卡托）天地图加载</title>
        <style>
            html,
            body,
            #viewDiv {
                width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            }
        </style>
    
        <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/css/main.css" />
        <script src="https://js.arcgis.com/4.23/init.js"></script>
        <script>
            require(["esri/Map",
                "esri/views/MapView",
                "esri/layers/GraphicsLayer",
                "esri/Graphic",
                "esri/PopupTemplate",
                "esri/widgets/Popup",
                "esri/layers/MapImageLayer",
                "esri/widgets/Legend",
                "esri/layers/WebTileLayer",
                "esri/layers/WMTSLayer",
                "esri/widgets/BasemapGallery/support/LocalBasemapsSource",
                "esri/widgets/BasemapGallery",
                "esri/Basemap",
                "esri/layers/FeatureLayer",
                "esri/geometry/Extent",
                "esri/geometry/SpatialReference",
                'esri/config','esri/layers/support/TileInfo',
                "./MyCustomTileLayer.js",
                "esri/layers/TileLayer",
            ], function(
                Map,
                MapView,
                GraphicsLayer,
                Graphic,
                PopupTemplate,
                Popup,
                MapImageLayer,
                Legend,
                WebTileLayer,
                WMTSLayer,
                LocalBasemapsSource,
                BasemapGallery,
                Basemap,
                FeatureLayer,
                Extent,
                SpatialReference,
                esriConfig,
                TileInfo,
                MyCustomTileLayer,
                TileLayer
            ) {
                var key = "天地图key"
                key = "6a92e00bdfafade25568c053a5ba6de4"
                // http://t0.tianditu.com/img_w/esri/wmts  可代替  http://t0.tianditu.gov.cn/img_w/wmts  效果一致
　　　　　　　　 var tiledLayer = new MyCustomTileLayer({
                    urlTemplate: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
                        key,
                    id: '影像',
                    listMode: 'hide' //这个属性设置是为了在layerlist不显示出来
                });
                var tiledLayer_poi = new MyCustomTileLayer({
                    urlTemplate: "http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
                        key,
                    id: '影像标记',
                    listMode: 'hide'
                });
                var tiledLayer1 = new MyCustomTileLayer({
                    urlTemplate: "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
                        key,
                    id: '矢量',
                    visible: false,
                    listMode: 'hide'
                });
                var tiledLayer_poi1 = new MyCustomTileLayer({
                    urlTemplate: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
                        key,
                    id: '矢量标记',
                    visible: false,
                    listMode: 'hide'
                });
                

                var basemap = new Basemap({
                    baseLayers: [tiledLayer, tiledLayer_poi, tiledLayer1, tiledLayer_poi1],
                })
                var map = new Map({
                    basemap: basemap
                });


                var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    spatialReference: {
                        wkid: 3857  //102100
                    },
                    center: [114.3115879,30.5943680], //113.27434372047993,22.722786885699826
                    linked: false,
                    zoom:7,
                });
                


            });
        </script>
    </head>

    <body class="calcite">
        <div id="viewDiv"></div>
    </body>
</html>