? ? ? ?有時候項目里涉及到地圖操作功能時，我們總是希望將這些功能都集成到一個工具條上去，這樣用戶操作起來更加方便，界面看起來的話也更加整潔。

效果圖如下：

主要代碼：

布局文件Toolbar.html:

<ul class = "horizontal-toolbar"><li><img src="assets/icons/pan.png" title="平移"></li><li><img src="assets/icons/zoom_in.png" title="放大"></li><li><img src="assets/icons/zoom_out.png" title="縮小"></li><li><img src="assets/icons/default.png" title="默認視圖"></li><li><img src="assets/icons/distance.png" title="測量距離"></li><li><img src="assets/icons/area.png" title="測量面積"></li><li><img src="assets/icons/clear.png" title="清除圖層"></li><li><img src="assets/icons/layers.png" title="圖層控制"></li><li class="no-border"><img src="assets/icons/legend.png" title="圖例"></li> </ul>

樣式表Toolbar.css:

ul,li{padding: 0;margin: 0;list-style: none; }/*工具欄樣式*/ .vertical-toolbar{/*豎向*/position: absolute;top: 10px;right: 10px;height: 389px; width: 42px;overflow: hidden;background-color: #fff;border-radius: 8px;-moz-box-shadow: 6px 6px 5px #cccccc; -webkit-box-shadow:6px 6px 5px #cccccc; box-shadow: 6px 6px 5px #cccccc; } .vertical-toolbar>li{box-sizing: content-box;height: 40px;width: 26px;margin: 0 auto;border-bottom: 2px solid #f5f5f5;cursor: pointer;position: relative;float: none; } .vertical-toolbar>li.no-border{border: 0; } .horizontal-toolbar>li>img,.vertical-toolbar>li>img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);width: auto; }.horizontal-toolbar{/*橫向*/position: absolute;top: 20px;right: 10px;height: 42px;width: 421px;overflow: hidden;background-color: #fff;border-radius: 8px;-moz-box-shadow: -6px 6px 5px #cccccc; -webkit-box-shadow:-6px 6px 5px #cccccc; box-shadow: -6px 6px 5px #cccccc; } .horizontal-toolbar>li{float: left;position: relative;height: 26px;width: 41px;border-right: 2px solid #f5f5f5;margin: 8px 0 0 0;cursor: pointer; } .horizontal-toolbar>li.no-border{border: 0;width: 40px; }

?

總結

以上是生活随笔為你收集整理的自定义ArcGIS JavaScript 工具条样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。