ArcGIS API for javaScript-加载高德地图

最新推荐文章于 2021-07-30 12:59:15 发布

他们叫我老蒋

最新推荐文章于 2021-07-30 12:59:15 发布

阅读量1.7k

点赞数

分类专栏： ArcGIS API for javaScript

本文链接：https://blog.csdn.net/Jan_jiang/article/details/103737012

版权

ArcGIS API for javaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ArcGIS API for javaScript-加载高德地图

准备

下载 arcgis api for javascript4.x 包
链接：https://pan.baidu.com/s/1lTxKmKUSUREvd1WTRDy4xQ
提取码：r9c5
部署服务

把下载包部署到服务器中，比如说tomcat,nginx,IIS…
在下载包library/downloads，有官方教程
找到dojo.js, init.js文件，找到[HOSTNAME_AND_PATH_TO_JSAPI]并修改成你部署的服务目录。
如：
init.js

dojo.js

因为在同一项目下所以使用相对路径

lib 在项目根目录

代码

自定义高德矢量地图图层模块此处GaodeLayer.js

/**
 * 两种方式定义 模块
 * 一 dojo/_base/declare  模式
 * 二 AMD模式
 *  
 */
define(["esri/layers/BaseTileLayer","esri/request","esri/Color"],
    function (BaseTileLayer,esriRequest,Color) {
        return  BaseTileLayer.createSubclass({
                properties: {
                    urlTemplate: null,
                    tint: {
                        value: null,
                        type: Color
                    }
    
                },
                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;
                    return this.urlTemplate
                    .replace("{z}", level)
                    .replace("{x}", col)
                    .replace("{y}", row);
                },
                fetchTile: function(level, row, col) {
                    var url = this.getTileUrl(level, row, col);
                    return esriRequest(
                        url, {
                        responseType: "image",
                        allowImageDataAccess: true
                    })
                    .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));
                }
            })
        
    }
   
)

集成页面代码

<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>infoMessage</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <!--  引入依赖样式 -->
    <link rel="stylesheet" href="/lib/arcgis_js_api/library/4.6/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" href="/lib/arcgis_js_api/library/4.6/esri/css/main.css" />
    <link rel="stylesheet" href="/lib/arcgis_js_api/library/4.6/esri/themes/light/main.css" />

    <script>
        // 配置模板位置   此处GaodeLayer.js放在html同一目录下
       // 通过packages数组进行定义预置AMD模块, name是该模块标识符名称，localtion为模块所在的路径
       // 如果这个模块的路径是在根目录下的子目录 location.pathname.replace(/\/[^/]*$/, '') + '/js'
        var dojoConfig = {
            async: false,
            //  baseUrl: "/",
            // 用于页面加载时立即加载的JS依赖
            // deps: ["dojo/parser"],
            parseOnLoad: true,
            packages: [{
                name: "lib",
                location: '/lib'
            }]
        };
    </script>

    <!-- 初始化ArcGIS init.js文件 -->
    <script src="/lib/arcgis_js_api/library/4.6/init.js"></script>

    <script>
        require([
            "esri/Map",
            "esri/config",
            "esri/Color",
            "esri/views/MapView",
            "lib/GaodeLayer",
            "esri/views/SceneView",
            "dojo/domReady!"],
            function (Map,esriConfig,Color,MapView, GaodeLayer, SceneView) {
                //创建图层对象
                // var GaodeLayer = new GaodeLayer();
                
                esriConfig.request.corsEnabledServers.push("webst01.is.autonavi.com");
               
                let digitallTileLayer = GaodeLayer({
                    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: "高德"
                });
                let satelliteTileLayer = GaodeLayer({
                    urlTemplate: 'http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
                    tint: new Color("#004FBB"),
                    title: "高德"
                });

                let stamenTileLayer = GaodeLayer({
                    urlTemplate: 'http://webst01.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
                    tint: new Color("#004FBB"),
                    title: "高德"
                });


                var map = new Map({
                    layers: [satelliteTileLayer,stamenTileLayer]
                });

                var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    center: [108.62, 36.32],
                    zoom: 4
                });
            });


    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>