ArcGIS For JavaScript API OpenStreetMap Layer (打开街道地图层)

描述:

此示例演示如何添加OpenStreetMap的地图层,使用默认选项。在这个代码中,创建一个新的OpenStreetMapLayer一个添加到地图上。

osmLayer = new esri.layers.OpenStreetMapLayer();
map.addLayer(osmLayer);
有几个可选的构造函数的参数,可以用来定义附加的可见性,透明度和显示级别的值,

引用地址:http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm

在线演示:http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_openstreetmap/index.html

Dojo在线帮助API:http://dojotoolkit.org/api/

ArcGIS For JavaScript API :http://help.arcgis.com/en/webapi/javascript/arcgis/index.html

dojo.require("esri.layers.osm");

esri.layers.OpenStreetMapLayer(options?) 允许你从OpenStreetMap的使用底图。设置tileservers属性来更改您要使用的OpenStreetMap tiles.

 

构造函数描述
esri.layers.OpenStreetMapLayer(options?)创建一个新的 OpenStreetMapLayer 对象

属性:

属性类型描述
copyrightStringThe copyright text.

 

<Object> options可选可选参数列表
选项:
<Number[]> displayLevelsAn array of levels at which to draw.
<String> idID指定的层。如果没有指定,esri.Map指定值。
<Number> opacity初始层的不透明度或透明度。值的范围从0.0到1.0之间,其中0.0是100%透明和1.0没有透明度。默认值是1.0。
<String[]> tileServerstile servers 的数组
<Boolean> visible该层的初始可见性。默认值是true.
参考代码:
osmLayer = new esri.layers.OpenStreetMapLayer();
map.addLayer(osmLayer);

osmLayer = new esri.layers.OpenStreetMapLayer({
    id: "myOSMLayer",
    visible: true,
    opacity: .75,
    displayLevels: [0,1,2]
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />  
    <!--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>OpenStreetMap的默认选项</title>  
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">  
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />  
    <script type="text/javascript">  
      var djConfig = {  
        parseOnLoad: true  
      };  
    </script>  
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>  
    <script type="text/javascript">   
      // 导入包  
      dojo.require("esri.map");  
      dojo.require("esri.layers.osm");  
      var map, osmLayer;  
   
      function init() {  
        //设置的版权文本在右下角 http://www.openstreetmap.org/copyright  
        var copyrightText= '© <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> 贡献者, '  
                    + '<a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';  
  
        dojo.byId('osmCopy').innerHTML = copyrightText;  
          
        var extent = new esri.geometry.Extent({  
            "xmin":-10023722.578230502, // 左下角X坐标  
            "ymin":3498675.6586681586,  // 左下角Y坐标  
            "xmax":-9996969.618330726,  // 右上角X坐标  
            "ymax":3517784.9157394273,  // 右上角Y坐标  
            "spatialReference":{    // 空间参考  
                "wkid":102100  
            }  
        });  
        map = new esri.Map(  
            "map",  // domID  
            {extent:extent,  // 范围  
            logo:false  // 不显示logo  
            }  
        );  
          
        osmLayer = new esri.layers.OpenStreetMapLayer();    // 创建一个OpenStreetMapLayer层  
        map.addLayer(osmLayer);  
  
        var details = "";  
        details = "loaded(加载): " + osmLayer.loaded + "<br />";  
        details += "initialExtent(初始范围): " + dojo.toJson(osmLayer.initialExtent.toJson()) + "<br />";  
        details += "fullExtent(完整范围): " + dojo.toJson(osmLayer.fullExtent.toJson()) + "<br />";  
        details += "spatialReference(空间参考): " + dojo.toJson(osmLayer.spatialReference.toJson())+ "<br />";  
        dojo.byId("info").innerHTML = details;  
      }  
  
      dojo.addOnLoad(init);  
    </script>  
    </head>  
  
    <body class="claro" style="font-size: small; font-family: Arial Unicode MS,Arial,sans-serif;">  
<div id="map" style="position:relative;width:700px; height:500px; border:1px solid #000;">  
      <div id="osmCopy" style="position:absolute; color:black;font-weight:bold;right:10px; bottom:10px; z-Index:999;"></div>  
    </div>  
<div id="info" style="padding:5px; margin:5px; background-color:#eee;"></div>  
</body>  
</html>

效果:

ArcGIS For JavaScript API OpenStreetMap Layer —— 打开街道地图层


未经允许请勿转载:程序喵 » ArcGIS For JavaScript API OpenStreetMap Layer (打开街道地图层)

点  赞 (0) 打  赏
分享到: