2014-01-19 63 views
1

请检查以下代码的正确性。我正尝试在基于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,但我仍然卡住。将Google底图添加到ArcGIS Javascript API

<!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> 

回答

2

我使用以下脚本将Google地图添加到我的ArcGIS应用中。有一些错误(使用Chrome浏览器时会出现街景),但总体来说效果不错。在Chrome中修复Google Basemaps div的z-index问题。

Google Maps Layer for ArcGIS JavaScript API

1

不幸的是,agsjs小部件不过去的ArcGIS的JavaScript API,3.3版本。 此外,街景将不再起作用。你不能再抓住pegman控制,并将他传播到esri的地图层以上,以便使用他。当谷歌视觉刷新不再是一个选项时,这停止工作。

相关问题