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
转载于:https://www.cnblogs.com/telwanggs/p/7122584.html
arcgis api for js共享干货系列之二自定义Navigation控件样式风格相关推荐
- arcgis api for js共享干货系列之一自写算法实现地图量算工具
众所周知,使用arcgis api for js实现地图的量算工具功能,无非是调用arcgisserver的Geometry服务(http://localhost:6080/arcgis/rest/s ...
- arcgis api for js入门开发系列三地图工具栏(含源代码)
上一篇实现了demo的地图加载展示,在上篇实现的基础上,新增了地图工具栏以及通用地图控件功能,比如地图框选缩放.地图漫游.清空.量算工具.地图导航控件.地图比例尺控件.地图鹰眼图等等,总共分为5个部分 ...
- 深入学习SAP UI5框架代码系列之二:UI5 控件的渲染器
这是Jerry 2020年的第79篇文章,也是汪子熙公众号总共第261篇原创文章. 系列目录 (0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) UI5 module懒加载机制 (2) ...
- arcgis api for js入门开发系列十八风向流动图
本篇主要讲述的是利用arcgis api实现风向流动图,效果图如下: 实现思路: 在esri提供的开源githunb基础上进行修改的:https://github.com/gishome/wind-j ...
- arcgis api for js入门开发系列十七在线地图(天地图、百度地图、高德地图)
本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源,简单封装一个底图切换控件js,在线地图包括:天地图.高德地图以及百度地图,效果图如下: 实现思路: 1.简单的底图切换控件map.L ...
- arcgis api for js入门开发系列十二地图打印(GP服务)
上一篇实现了demo的地图统计图,本篇新增地图打印,截图如下: (1)地图打印实现的思路如下:首先在创建好地图打印GP模型,设置好模型的参数:其次是验证模型运行模型:然后是发布地图打印的GP服务:最后 ...
- 天津政府应急系统之GIS一张图(arcgis api for flex)讲解(四)地图导航控件模块...
config.xml文件的配置如下: <widget left="10" top="50" config="widgets/Navigation ...
- WP8.1学习系列(第二十五章)——控件样式
XAML 框架提供许多自定义应用外观的方法.通过样式可以设置控件属性,并重复使用这些设置,以便保持多个控件具有一致的外观. 路线图: 本主题与其他主题有何关联?请参阅: 使用 C# 或 Visua ...
- arcgis api for js入门开发系列六地图分屏对比(含源代码)
上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...
最新文章
- 通向未来:物联网+人工智能将成为人类的进化方向
- Java:假设车库有3个车位(可以通过boolean[]数组来表示车库)可以停车,写一个程序模拟多个用户开车离开,停车入库的效果。注意:车位有车时不能停车。
- html5手机签名,html5手写签名
- vue 水平居中_小心!你弹琴的坐姿暴露了你演奏的水平!
- bash的算术运算和条件测试语句
- 深入理解函数中分配内存的问题
- matlab dbns实现,matlab实现贝叶斯网络
- 浏览器html中加入word,web网页中加载word
- 磁带机技术的应用解析
- mysql通配符大全_MySQL模糊查询用法大全(正则、通配符、内置函数等)
- 微信公众号迁移、公证办理流程
- 点云学习笔记16——pcl点云可视化
- Android Activity生命周期以及LoCat的使用
- Android平台挖矿木马研究报告
- 0day安全:软件漏洞分析技术(第2版)pdf
- iOS Memory 内存详解
- 【数据集转换】VOC数据集转COCO数据集·代码实现+操作步骤
- DHCP服务的配置与使用
- SAP EPIC 电子支付集成配置
- 《上古5》置业 周详诀巧风向标
热门文章
- ElasticSearch中doc values和fielddata
- GroupMetadataManager分析
- Apache和Nginx防盗链
- access的papersize命令_[access报表]报表中使用自定义纸张,及设置自定义纸张大小
- Vivado MMCM IP核接口信号介绍
- (27)呼吸灯verilog与VHDL编码(学无止境)
- linux编译测试代码,rtc在linux上的测试代码
- python怎么打开笔记本无线网络开关_如何轻松搞定 笔记本搜不到WIFI信号问题
- 12000.PAC19XX电源监测芯片
- VS Code调试C代码