• 11 地图添加OSM图层


    此示例主要是介绍通过默认的实例化方式来添加一个OpenStreetMap图层,如下图所示:

    具体实现方式如下:

    1 实现此功能的主要组件是“esri/layers/OpenStreetMapLayer”,所以在开始时要引入相关的组件,如下:

    require([
    
    "esri/map",
    
    "esri/layers/OpenStreetMapLayer",
    
    "dojo/domReady!"
    
    ], function (Map, OpenStreetMapLayer){
    
    });

    2 然后实例化一个空白底图,空白底图的意思就是我们在实例化Map时只指定初始化中心和初始化级别,其余的底图之类等都不指定,如下:

    map = new Map("esri-map-container", {
    
    center: [104.072331,30.66303],
    
    zoom: 11
    
    });

    3 然后实例化一个OpenStreetMap,将其添加到底图上面,如下所示:

    openStreetMapLayer = new OpenStreetMapLayer();
    
    map.addLayer(openStreetMapLayer);

    4 至此呢,我们就完成了将OSM的图层加载到了ArcGIS的底图上面。完整的代码如下所示:

    <!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>OpenStreetMap</title>
    
    <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
    
    <style>
    
    html, body, #esri-map-container {
    
    padding: 0px;
    
    margin: 0px;
    
    height: 100%;
    
    }
    
    </style>
    
    <script src="https://js.arcgis.com/3.25/"></script>
    
    <script>
    
    require([
    
    "esri/map",
    
    "esri/layers/OpenStreetMapLayer",
    
    "dojo/domReady!"
    
    ], function (Map, OpenStreetMapLayer){
    
    
    
    var map, openStreetMapLayer;
    
    
    map = new Map("esri-map-container", {
    
    center: [104.072331,30.66303],
    
    zoom: 11
    
    });
    
    openStreetMapLayer = new OpenStreetMapLayer();
    
    map.addLayer(openStreetMapLayer);
    
    });
    
    </script>
    
    </head>
    
    <body>
    
    <div id="esri-map-container"></div>
    
    </body>
    
    </html>

    X北辰北的博客,想看更多内容,请移步我的个人博客:http://www.xbeichenbei.com/
  • 相关阅读:
    mongodb
    python中读取文件的read、readline、readlines方法区别
    uva 129 Krypton Factor
    hdu 4734
    hdu 5182 PM2.5
    hdu 5179 beautiful number
    hdu 5178 pairs
    hdu 5176 The Experience of Love
    hdu 5175 Misaki's Kiss again
    hdu 5174 Ferries Wheel
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794673.html
Copyright © 2020-2023  润新知