美文网首页
自定义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