问题思路:
隐约知道是 MapView 的一个属性设置,那么我们去看看官方参考文档。
查看官方参考文档
-
使用 MapView 的 ui 属性来添加->见图1
图1
不仅要看属性,而且要看用法,下面有 details 中示例 -> 见图2
图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
});
})
仅供学习~~,原创侵权必究!!
网友评论