将Google底图添加到ArcGIS Javascript API

Question

Please review the code below for correctness. 请查看以下代码的正确性。 I am trying to display a Google basemap (hybrid) in a web map built on the ArcGIS Javascript API 3.8. 我正在尝试在基于ArcGIS Javascript API 3.8构建的Web地图中显示Google底图（混合）。 I have a Google Maps API key, which was removed for this example. 我有一个Google Maps API密钥，此示例已删除。 So far, I have reviewed the documentation here http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/1.05/docs/googlemapslayer/examples.html , but I am still stuck. 到目前为止，我已经在这里查看了文档http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/1.05/docs/googlemapslayer/examples.html ，但我仍然卡住了。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
    <title></title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css" />
    <link rel="stylesheet" href="css/layout.css"/> 

    <script>
    var djConfig = {
              parseOnLoad: true,
              packages: [{
                "name": "agsjs",
                "location": 'https://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/2.04/xbuild/agsjs' // for xdomain load
              }]
            };
   </script>

    <script src="http://maps.google.com/maps?file=api&amp;v=3&amp;key=" type="text/javascript"></script>
    <script src="http://js.arcgis.com/3.8/"></script>

    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("agsjs.layers.GoogleMapsLayer");
      dojo.require("dijit.layout.TabContainer");
      dojo.require("esri.dijit.Legend");

      var map, googleLayer;

      function init() {
        map = new esri.Map("map", {
          center: [-82.65862, 29.820309],
          zoom: 16
        });

        googleLayer = new agsjs.layers.GoogleMapsLayer({
                id: 'google',
                apiOptions: {
                  v: '3'
                },
        });

        map.addLayer(googleLayer);

      }

      dojo.ready(init);

  </script>
  </head>

  <body class="claro">
    <div id="mainWindow" 
         data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline', gutters:false" 
         style="width:100%; height:100%;">

      <div id="header" 
           data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
        Tool
      </div>
      <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
        <div data-dojo-type="dijit.layout.TabContainer">
          <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend', selected:true">
            <div id="legendDiv"></div>
          </div>

          <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Identified Issues'" ></div>
      </div>

      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>

      <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'"></div>

    </div>
  </body>

</html>

Answer 1

I used the following script(s) for including Google Maps in my ArcGIS app. 我使用以下脚本在我的ArcGIS应用程序中包含Google地图。 There are a few bugs (streetview when using Chrome) but overall it works well. 有一些错误（使用Chrome时的街景视图），但整体而言效果很好。 To fix the issue in Chrome the z-index of the Google Basemaps div. 要解决Chrome中的问题，请查看Google Basemaps div的z-index。

Google Maps Layer for ArcGIS JavaScript API Google Maps Layer for ArcGIS JavaScript API

Answer 2

Unfortunately, the agsjs widget does not work past the ArcGIS Javascript api, version 3.3. 遗憾的是，agsjs小部件无法通过ArcGIS Javascript API 3.3版。 Also, street view will no longer work. 此外，街景将不再有效。 You can no longer grab the pegman control and propogate him to a level above esri's map layers in order to use him. 您不能再抓住街景小人控制并将他传播到esri的地图图层之上以便使用他。 When the Google visual refresh was no longer an option is when this stopped working. 当谷歌视觉刷新不再是一个选项时，这是停止工作。

Answer 3

You can use WebTiledLayer to create any custom tiled layer 您可以使用WebTiledLayer创建任何自定义平铺图层

  googleHybrid = new esri.layers.WebTiledLayer( "http://mt${subDomain}.google.com/vt/lyrs=s,h&hl=fa&gl=fa&x=${col}&y=${row}&z=${level}&s=png", { "id": "googleHybrid", "subDomains": ["0", "1", "2", "3"], copyright: "Google, 2017" });

将Google底图添加到ArcGIS Javascript API

问题描述

3 个解决方案

解决方案1
2 2014-02-19 23:23:40

解决方案2
1 2014-06-18 21:06:03

解决方案3
0 2018-06-07 12:52:59

将Google底图添加到ArcGIS Javascript API

问题描述

3 个解决方案

解决方案1 2 2014-02-19 23:23:40

解决方案2 1 2014-06-18 21:06:03

解决方案3 0 2018-06-07 12:52:59

解决方案1
2 2014-02-19 23:23:40

解决方案2
1 2014-06-18 21:06:03

解决方案3
0 2018-06-07 12:52:59