當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
基于ArcGIS JS API实现垂直滑动缩放条
生活随笔
收集整理的這篇文章主要介紹了
基于ArcGIS JS API实现垂直滑动缩放条
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 需求背景
- 需求分析
- 效果圖
- 完整代碼
- 注意事項
嚴格來說并不是基于ArcGIS JS API,應該是基于Dojo的dijit里面的VerticalSlider和VerticalRule,但是由于ArcGIS JS API把Dojo的一些東西都包括了…這段是廢話。
需求背景
我想要一個類似魚骨的可以控制地圖縮放的縮放條，就這么簡單，百度地圖你見過吧，跟那個差不多，應該很好做吧，啥時候給我？
需求分析
不就是一個類似魚骨的縮放條嗎，老子給你做。像這種東西是不可能自己寫的，有現成的VertivalSlider可以充當魚中間的骨頭，還有現成的VerticalRule可以充當兩側的魚刺。那我只要把他倆的一些屬性和地圖縮放相關的東西聯系在一起就完事了。
效果圖
完整代碼
<!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>Map</title><link rel="stylesheet" href="https://js.arcgis.com/3.27/dijit/themes/tundra/tundra.css"><link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css"><script src="https://js.arcgis.com/3.27/"></script><style>html,body {height: 100%;width: 100%;padding: 0;margin: 0;}#map {height: 100%;width: 100%;}</style><script>var map, slider;require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","dijit/form/VerticalSlider","dijit/form/VerticalRule","dojo/dom-construct","dojo/domReady!"], function (Map, ArcGISTiledMapServiceLayer, VerticalSlider, VerticalRule, domConstruct) {map = new Map("map", {basemap: 'topo',//切片地圖center: [-116.093, 34.218],zoom: 7,slider: false});map.on("load", mapHandler);//地圖加載完成function mapHandler() {var sliderDiv = domConstruct.create("div", null, map.root);var leftRuleDiv = domConstruct.create("div", null, sliderDiv);var rightRuleDiv = domConstruct.create("div", null, sliderDiv);slider = new VerticalSlider({name: "mapSlider",value: map.getLevel(),minimum: map.getMinZoom(),maximum: map.getMaxZoom(),discreteValues: map.getMaxZoom() + 1,intermediateChanges: true,//拖動滑塊時是否立即觸發onChange()style: "position:relative;top:30px;left:30px;height:200px;z-index:99;",onChange: function (value) { map.setLevel(value); }}, sliderDiv);new VerticalRule({count: map.getMaxZoom() + 1,container: "leftDecoration",style: "width:4px;"}, leftRuleDiv).startup();new VerticalRule({count: map.getMaxZoom() + 1,container: "rightDecoration",style: "width:4px;"}, rightRuleDiv).startup();slider.startup();//注意啟動順序}map.on("zoom-end", (obj) => slider ? slider.setValue(obj.level) : 0);//地圖縮放時同樣slider值也改變});</script> </head><body><div id="map"></div> </body></html>注意事項
因為用到的是dojo的微件，必須得引入樣式文件tundra.css,否則看不到滑動條應有的效果;
slider的 startup() 方法要放到 verticalRule.startup() 之后，否則可能會出現只有滑動條的一側有橫條。
總結
以上是生活随笔為你收集整理的基于ArcGIS JS API实现垂直滑动缩放条的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于ArcGIS JS API中的map
- 下一篇： 基于ArcGIS API for Jav