ArcGIS 加载谷歌地图

最新推荐文章于 2025-07-10 07:13:55 发布

原创最新推荐文章于 2025-07-10 07:13:55 发布 · 1w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ArcGIS 加载地图

本文介绍如何使用ArcGIS API for JavaScript创建一个2D地图视图，并通过自定义Google矢量图层增强地图显示效果。文章详细展示了如何设置地图的基本属性，如基底地图、视图中心坐标和缩放级别，以及如何加载并使用自定义图层。

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

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the intro-mapview sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html
  -->
<title>Intro to MapView - Create a 2D map - 4.9</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="http://211.154.196.253:4080/arcgis/4.4/esri/css/main.css">
  <script src="http://211.154.196.253:4080/arcgis/4.4/init.js"></script>

  <script>
  var map;
    require([
      "esri/Map",
      "esri/Ground",
      "esri/views/MapView",
      "esri/layers/BaseTileLayer",
      "esri/layers/ElevationLayer",
      "dojo/domReady!"
    ], function(Map, Ground, MapView, BaseTileLayer, ElevationLayer) {
        var gl = initGoogleLayerClass()
      
      var map = new Map({
        basemap: "topo"
      });
      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 7,
        center: [115.738167,39.365399] // longitude, latitude
      });
      var mapBaseLayer = new gl({
                urlTemplate: "http://www.google.cn/maps/vt/lyrs=m@226000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil",
                title: "GoogleVectorMap"
            });
       map.add(mapBaseLayer, 0);

    });
    function initGoogleLayerClass() {
        var gl = null;
        require([
            "esri/config",
            "esri/request",
            "esri/layers/BaseTileLayer"
        ], function (esriConfig, esriRequest, BaseTileLayer) {
            gl = BaseTileLayer.createSubclass({
                properties: {
                    urlTemplate: null
                },
                getTileUrl: function (level, row, col) {
                    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));
                }
            });
            //增加跨域配置
            esriConfig.request.corsEnabledServers.push("http://www.google.cn/");
        });
        return gl;
    }
   
  </script>
</head>

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