ArcGIS API for javaScript-加载高德地图

最新推荐文章于 2023-08-23 17:13:43 发布

原创

最新推荐文章于 2023-08-23 17:13:43 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何使用ArcGIS API for JavaScript 4.x加载并自定义高德地图图层，包括下载部署ArcGIS API包、修改配置文件、定义高德地图模块及集成到网页的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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