ArcGIS API for JavaScript实现加载必应地图

最新推荐文章于 2020-12-24 17:28:12 发布

请输入您的昵称____

最新推荐文章于 2020-12-24 17:28:12 发布

阅读量1k

点赞数

分类专栏： GIS 文章标签： html JavaScript BingMap dojo ArcGIS

GIS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用ArcGIS API for JavaScript集成Bing Maps图层，展示基础地图和道路信息，并通过按钮实现在不同类型的Bing Maps图层间切换。

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

加载最简单的基础地图和道路信息

（本例来自ArcGIS官方：加载必应地图）

如何将Bing地图的图层添加到地图、如何使用按钮在不同类型的地图之间切换

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>VE Tile Layer</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">

    <script>dojoConfig = { parseOnLoad: true };</script>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.virtualearth.VETiledLayer");// bing地图tiled层,在2.0中,bing地图是一个Key
      dojo.require("dijit.form.Button");
      //加载各个dojo包
      var veTileLayer;

      function init() {
        var map = new esri.Map("map");
        //Creates the Virtual Earth layer to add to the map
        //Example for adding a Bing Maps key
        veTileLayer = new esri.virtualearth.VETiledLayer({
          bingMapsKey: '你的必应地图密钥',
          mapStyle: esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL//这句会显示bing地图的logo
        });
        map.addLayer(veTileLayer);
      }
      dojo.ready(init);
    </script>

  </head>
  <body class="claro">
    <div style="position:relative;">
      <div id="map" style="width:1024px; height:512px; border:1px solid #000;">
      <div style="position:absolute; left:650px; top:10px; z-Index:999;">
        <button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL);">Aerial</button>
        <button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_AERIAL_WITH_LABELS)">Aerial with labels</button>
        <button data-dojo-type="dijit.form.Button" onClick="veTileLayer.setMapStyle(esri.virtualearth.VETiledLayer.MAP_STYLE_ROAD)">Roads</button>
      </div>
      </div>
    </div>
  </body>
</html>

申请Bing地图的密钥：必应地图