ArcGIS API for Javascript3.23 loading Baidu map

Introduction

Today at ArcGIS API for JavaScript official website At first glance, the new version [3.23 and 4.6] is updated. Because the previous project needs to use Google maps, nautical charts and other online maps, there was a sudden idea in these two days: sorting out the reference methods and source codes of commonly used online maps, including Baidu map, tianmap, Google map, Gaode map and nautical chart. First of all to explain the baidu map reference.

Method: mainly use tiledmaservicelayer to load slice map, about TiledMapServiceLayer We can go to the official website to learn.

Below is the rendering of Baidu map and remote sensing image.


Here is the code defining Baidu map layer:

define(["dojo/_base/declare", "esri/layers/TiledMapServiceLayer", "esri/geometry/Extent", "esri/SpatialReference", "esri/layers/TileInfo"],
    function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) {
        return declare(TiledMapServiceLayer, {
            // Constructor
            constructor: function (properties) {
                this.spatialReference = new SpatialReference({
                    wkid: 102113
                });

                // The starting display range provided by the layer and the geographical range of the entire layer
                this.fullExtent = new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference);
                this.initialExtent = new Extent(5916776.8, 1877209.3, 19242502.6, 7620381.8, this.spatialReference);
                // Slice information provided by layer
                this.tileInfo = new TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "compressionQuality": 0,
                    "origin": {
                        "x": -20037508.342787,
                        "y": 20037508.342787
                    },
                    "spatialReference": {
                        "wkid": 102113
                    },
                    "lods": [
                        { "level": 0, "resolution": 156543.033928, "scale": 591657527.591555 },
                        { "level": 1, "resolution": 78271.5169639999, "scale": 295828763.795777 },
                        { "level": 2, "resolution": 39135.7584820001, "scale": 147914381.897889 },
                        { "level": 3, "resolution": 19567.8792409999, "scale": 73957190.948944 },
                        { "level": 4, "resolution": 9783.93962049996, "scale": 36978595.474472 },
                        { "level": 5, "resolution": 4891.96981024998, "scale": 18489297.737236 },
                        { "level": 6, "resolution": 2445.98490512499, "scale": 9244648.868618 },
                        { "level": 7, "resolution": 1222.99245256249, "scale": 4622324.434309 },
                        { "level": 8, "resolution": 611.49622628138, "scale": 2311162.217155 },
                        { "level": 9, "resolution": 305.748113140558, "scale": 1155581.108577 },
                        { "level": 10, "resolution": 152.874056570411, "scale": 577790.554289 },
                        { "level": 11, "resolution": 76.4370282850732, "scale": 288895.277144 },
                        { "level": 12, "resolution": 38.2185141425366, "scale": 144447.638572 },
                        { "level": 13, "resolution": 19.1092570712683, "scale": 72223.819286 },
                        { "level": 14, "resolution": 9.55462853563415, "scale": 36111.909643 },
                        { "level": 15, "resolution": 4.77731426794937, "scale": 18055.954822 },
                        { "level": 16, "resolution": 2.38865713397468, "scale": 9027.977411 },
                        { "level": 17, "resolution": 1.19432856685505, "scale": 4513.988705 },
                        { "level": 18, "resolution": 0.597164283559817, "scale": 2256.994353 },
                        { "level": 19, "resolution": 0.298582141647617, "scale": 1128.497176 }
                    ]
                });

                // Set the loaded property of the layer and trigger the onLoad event
                this.loaded = true;
                this.onLoad(this);
            },

            getTileUrl: function (level, row, col) {
                var zoom = level - 1;
                var offsetX = Math.pow(2, zoom);
                var offsetY = offsetX - 1;
                var numX = col - offsetX;
                var numY = (-row) + offsetY;
                zoom = level + 1;
                var num = (col + row) % 8 + 1;
                var url = "http://online1.map.bdimg.com/tile/?qt=tile&x=" + numX + "&y=" + numY + "&z=" + zoom + "&styles=pl";
                return url;
            }
        });
    }
)

Load Baidu map layer code:

<script>
    var map;
    require([
        "esri/map",
        "src/BaiduLayer",
        "dojo/parser",
        "dojo/domReady!"], 
    function(Map, BaiduLayer, parser) {
        parser.parse();
        map = new Map("map", {
            logo: false,
            center: [119.9, 40.7],
            zoom: 4
        });
        //Load Baidu map layer
        var bdlayer = new BaiduLayer();
        map.addLayer(bdlayer);

     });
 </script>

Source code download:
Download link: ArcGIS API for JavaScript 3 loading Baidu map and image
The source code includes Baidu map and image (Annotated) customization files (src/*.js) and loading files (. html). ArcGIS API for JavaScript uses the latest version [3.23].


Other online map related codes will be updated later, please keep your attention.

Tags: Javascript Google Qt

Posted on Thu, 30 Apr 2020 18:52:18 -0700 by nitroxman