zoukankan      html  css  js  c++  java
  • 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/
  • 相关阅读:
    websphere、weblogic上JConsole的配置
    JMX连接WebSphere和WebLogic
    通过JMX监控管理weblogic的运行
    Manage, Administrate and Monitor GlassFish v3 from Java code usingAMX & JMX
    Harbor 简要安装说明
    VCSA 添加新管理用户的方法
    Oracle 修改参数
    CentOS8 设置开机自动登录账户的方法
    MYSQL使用mydumper备份恢复操作简介
    浅析网站上设置的广告位不显示问题:如何避免Adblock广告拦截
  • 原文地址:https://www.cnblogs.com/xuqw/p/11794673.html
Copyright © 2011-2022 走看看