arcgis api for js共享干货系列之二自定义Navigation控件样式风格
Posted GIS之家
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了arcgis api for js共享干货系列之二自定义Navigation控件样式风格相关的知识,希望对你有一定的参考价值。
arcgis api for js默认的Navigation控件样式风格如下图:
这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢;自己自定义一个NavigationControl控件类,最终实现的效果如下图:
思路如下:其实就是在网上参照天地图或者谷歌地图的Navigation风格样式,下载它们的图片模版,然后自己创建div来实现图片的缩放平移、全图、左右上下平移等等地图导航功能;
Navigation图片目录如下:
调用函数:
//显示地图导航条 showSlider: function (fullExtent, config) { config.targetId = this.mapDivId; var toolBar = new DCIMapNavigationToolbar(config); var _map = this.esriMap; /* 地图上移 */ toolBar.onMoveUp = function () { _map.panUp(); }; /* 地图下移 */ toolBar.onMoveDown = function () { _map.panDown(); }; /* 地图左移 */ toolBar.onMoveLeft = function () { _map.panLeft(); }; /* 地图右移 */ toolBar.onMoveRight = function () { _map.panRight(); }; /* 地图全图 */ toolBar.onFullMap = function () { _map.setExtent(fullExtent); }; /* 地图放大 */ toolBar.onZoomIn = function () { _map.setLevel(toolBar.getValue()); }; /* 地图缩小 */ toolBar.onZoomOut = function () { _map.setLevel(toolBar.getValue()); }; /* 滑动条滑动结束 */ toolBar.onSliderEnd = function () { _map.setLevel(toolBar.getValue()); }; /* 地图级别标记-街道 */ toolBar.onMark_Street = function () { _map.setLevel(config.marksShow.streetLevel); }; /* 地图级别标记-城市 */ toolBar.onMark_City = function () { _map.setLevel(config.marksShow.cityLevel); }; /* 地图级别标记-省级 */ toolBar.onMark_Province = function () { _map.setLevel(config.marksShow.provinceLevel); }; /* 地图级别标记-国家 */ toolBar.onMark_Country = function () { _map.setLevel(config.marksShow.countryLevel); }; toolBar.create(); dojo.connect(_map, "onZoomEnd", zoomEnd); function zoomEnd(extent, zoomFactor, anchor, level) { toolBar.setValue(level); } return toolBar; },
参数 fullExtent, config分别代表地图的全图范围以及地图配置参数,DCIMapNavigationToolbar是自定义的Navigation控件类
config具体值:
具体的Navigation控件类下载:control.js
样式css下载:mapcss
以上是关于arcgis api for js共享干货系列之二自定义Navigation控件样式风格的主要内容,如果未能解决你的问题,请参考以下文章
arcgis api for js入门开发系列十六迁徙流动图
arcgis api for js入门开发系列十九图层在线编辑
arcgis api for js入门开发系列二不同地图服务展示(含源代码)
arcgis api for js入门开发系列十七在线地图(天地图百度地图高德地图)