严格来说并不是基于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>
注意事项
- 地图必须为切片地图，因为要用到地图的缩放级别，动态服务图层是没有缩放级别的，否则 map.getLevel() 得到的值是-1；
- 必须等地图加载完成后，再开始创建缩放条，若地图未加载完成这时的 map.getLevel() 获得的值也是-1，因此要借一个监听事件 map.on(“load”,callback) ;
-
因为用到的是dojo的微件，必须得引入样式文件tundra.css,否则看不到滑动条应有的效果;
-
slider的 startup() 方法要放到 verticalRule.startup() 之后，否则可能会出现只有滑动条的一侧有横条。
