將Google底圖添加到ArcGIS Javascript API

Question

請查看以下代碼的正確性。 我正在嘗試在基於ArcGIS Javascript API 3.8構建的Web地圖中顯示Google底圖（混合）。 我有一個Google Maps API密鑰，此示例已刪除。 到目前為止，我已經在這里查看了文檔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

我使用以下腳本在我的ArcGIS應用程序中包含Google地圖。 有一些錯誤（使用Chrome時的街景視圖），但整體而言效果很好。 要解決Chrome中的問題，請查看Google Basemaps div的z-index。

Google Maps Layer for ArcGIS JavaScript API

Answer 2

遺憾的是，agsjs小部件無法通過ArcGIS Javascript API 3.3版。 此外，街景將不再有效。 您不能再抓住街景小人控制並將他傳播到esri的地圖圖層之上以便使用他。 當谷歌視覺刷新不再是一個選項時，這是停止工作。

Answer 3

您可以使用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