美文网首页
自定义UI - arcgis api for js

自定义UI - arcgis api for js

作者: jeneen1129 | 来源:发表于2021-05-25 09:10 被阅读0次

    问题思路:
    隐约知道是 MapView 的一个属性设置,那么我们去看看官方参考文档。

    查看官方参考文档

    • 使用 MapView 的 ui 属性来添加->见图1
      不仅要看属性,而且要看用法,下面有 details 中示例 -> 见图2

      图1
      图2
    • 详细查看 defaultUI 的方法和属性,在4.0 以后的版本中才可以使用,需要添加引用


    • 利用 add 方法,详细使用方法有如下,可以直接 string 或者 array 来添加 components,英文实在不想看或者看不懂,就直接看相关代码示例了,见图4


      图3
      图4

    html 引入,并且自定义UI

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
        <!-- arcgis -->
        <link rel="stylesheet" href="xxxx/arcgis/arcgis_js_api/library/4.15/esri/css/main.css">
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
            html, body {
                height: 100%;
                width: 100%;
            }
    
            #map {
                height: 100%;
            }
    
            #ui {
                background-color: white;
                padding: 20px 50px;
            }
        </style>
    </head>
    
    <body>
    <div id="map" class="container"></div>
    <div id="ui">
        <p>test</p>
    </div>
    </body>
    <script src="xxxx/jquery-2.0.3.min.js"></script>
    <script src="xxxx/arcgis/arcgis_js_api/library/4.15/init.js"></script>
    </html>
    

    js

    require(["esri/tasks/Locator", "esri/Map",
          "esri/views/MapView",
          "esri/views/ui/DefaultUI",
          "esri/geometry/SpatialReference",
          "esri/Graphic",
          "esri/layers/GraphicsLayer",
          "esri/layers/FeatureLayer",
          "dojo/domReady!"
    ], function (Locator, Map, MapView, DefaultUI, SpatialReference,
             Graphic, GraphicsLayer, FeatureLayer) {
            _this.map = new Map({
                basemap: "hybrid"
            });
            _this.view = new MapView({
                container: "map",
                center: [107.561493, 33.10955], // longitude, latitude
                map: _this.map,
                zoom: 4
           });
           // 自定义UI
            _this.view.ui.add('ui', {
                 position: "bottom-left",
                 index: 2
            });
    })
    

    仅供学习~~,原创侵权必究!!

    相关文章

      网友评论

          本文标题:自定义UI - arcgis api for js

          本文链接:https://www.haomeiwen.com/subject/bzcxsltx.html