文章目录

需求背景
需求分析
效果图
完整代码
注意事项

严格来说并不是基于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() 之后，否则可能会出现只有滑动条的一侧有横条。

基于ArcGIS JS API实现垂直滑动缩放条相关推荐

基于ArcGIS JS API实现的两种距离和面积测量方式
文章目录前言开发思路主要代码效果测试效果图测试页面开发总结参考链接前言在一些地图地图应用中,距离.面积测量属于基础功能.ArcGIS API for JavaScript有单独提供 ...
基于ArcGIS JS API封装dojo微件(以工具条为例)
1.应用场景: 我们知道ArcGIS JS API自带了一些微件(或者说是控件),比如缩放按钮.定位按钮等等.但是有的时候这些微件的样式不太符合项目实际要求,或者是项目上想要把这些组合起来,这时候我们 ...
基于ArcGIS JS API 4.11实现对FeatureLayer的多变量渲染
文章目录需求背景需求分析开发过程效果图注意事项参考链接在线示例需求背景有一个二维数组,里面包含几万个表示高度的值,现在要把这些高度值在地图上展示出来.可以通过小立方体的方式展现,长宽 ...
基于ArcGIS JS API 的点击查询功能
应用场景: 点击地图要素,弹出信息窗,左边显示点击要素的图层树(因为是查询的多个图层),右边显示当前所选要素的所有属性数据,可通过树插件实现动态控制要显示的要素.如果不想把属性表里面的所有属性全部显示 ...
基于three.js 和ArcGIS JS API 建筑物立面动态特效渲染
基于three.js 和ArcGIS JS API 建筑物立面波纹墙动态渲染简介基于ArcGIS JS API 和 three.js 波纹墙扩展类ripplewallRenderer 波纹墙扩展类 ...
使用ArcGIS JS API加载WMTS图层的两种方式
文章目录前言方式一方式二前言某些项目可能多方参与,每一方使用的GIS平台有时会有所不同,这时为了统一各方地图服务,通常会发布OGC标准的WMTS地图服务供各方使用.ArcGIS API fo ...
ArcGIS JS API实现地图场景视频融合
ArcGIS JS API实现地图场景视频融合效果展示实现步骤 1.创建地图场景 2.引入相应模块并创建地图场景 3.获取点坐标 4.生成网格 5.生成图形并添加进场景中总结完整代码效果展示 ...
三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...
03 【ArcGIS JS API + eCharts系列】实现二、三维散点图的绘制
概述上一篇文章中我们介绍了如何使用ArcGIS JS API和eCharts结合,在二维和三维场景下绘制迁徙图.这篇文章我们来介绍下如何在二维和三维场景下绘制散点图,其实散点图跟迁徙图一样,它的绘制 ...

基于ArcGIS JS API实现垂直滑动缩放条