上一篇实现了demo的地图加载展示,在上篇实现的基础上,新增了地图工具栏以及通用地图控件功能,比如地图框选缩放、地图漫游、清空、量算工具、地图导航控件、地图比例尺控件、地图鹰眼图等等,总共分为5个部分,截图如下:

1.工具栏,在map.html页面引入工具栏实现需要的js文件

    <script type="text/javascript" src="js/main/map.map2dPanel.js"></script>

然后在map.js文件中地图初始化函数load2DMap进行工具栏的js调用

    //显示地图工具栏DCI.map2dTool.InitTool(map);

map2dPanel.js实现了地图工具栏所有的功能,谈谈实现核心部分功能的代码:

(1)拉框放大:这个实现比较简单,利用拉框的矩形范围,直接设置地图的范围为拉框的范围即可

   $("#zoomIn").click(function () {//地图拉框放大map.setMapCursor("url('" + getRootPath() + "Content/images/index/cursor/zoomout.cur'),auto");//设置地图鼠标形状DCI.map2dTool.drawtool.activate(esri.toolbars.Draw.EXTENT);//利用api的画工具draw来画矩形,获取矩形范围DCI.map2dTool.drawExtent(null, function (geometry) {//draw工具画完的回调函数DCI.map2dTool.zoomOutByExtent(geometry);//获取回调函数的geometry(extent)范围});});

drawExtent: function (symbol, onDrawEnd) {
                  DCI.map2dTool.onDrawEnd = onDrawEnd;
      },

//根据拉框范围放大zoomInByExtent: function (geometry) {DCI.map2dTool.map.setExtent(geometry.getExtent());//根据extent来进行地图缩放}

(2)拉框缩小:这个跟拉框放大的原理是类似的,也是首先获取拉框的的矩形范围,但是不同的是,获取矩形范围之后跟地图当前的范围按一定的比例进行计算,构造一个新的范围extent,然后再进行地图的缩放

    $("#zoomOut").click(function () {map.setMapCursor("url('" + getRootPath() + "Content/images/index/cursor/zoomin.cur'),auto");DCI.map2dTool.drawtool.activate(esri.toolbars.Draw.EXTENT);DCI.map2dTool.drawExtent(null, function (geometry) {DCI.map2dTool.zoomInByExtent(geometry);});});drawExtent: function (symbol, onDrawEnd) {DCI.map2dTool.onDrawEnd = onDrawEnd;},//根据拉框范围缩小zoomOutByExtent: function (geometry) {if (geometry.xmin != geometry.xmax && geometry.ymin != geometry.ymax) {//画矩形的范围没超出地图当前范围var currExtent = DCI.map2dTool.map.extent;//获取地图的当前范围var currWidth = Math.abs(currExtent.xmin - currExtent.xmax);//计算当前地图范围的宽度var boxWidth = Math.abs(geometry.xmin - geometry.xmax);//计算拉框矩形的范围宽度var widthFactor = currWidth / boxWidth;//计算两者的宽度的比率var currHeight = Math.abs(currExtent.ymin - currExtent.ymax);//计算当前地图范围的高度var boxHeight = Math.abs(geometry.ymin - geometry.ymax);//计算拉框矩形的范围高度var heightFactor = currHeight / boxHeight;//计算两者的高度比率if (widthFactor >= heightFactor) {currExtent = currExtent.expand(widthFactor);} else {currExtent = currExtent.expand(heightFactor);}DCI.map2dTool.map.setExtent(currExtent);} else {//超出地图当前范围时候,直接地图缩小一级if (parseInt(DCI.map2dTool.map.getLevel()) > 0) {DCI.map2dTool.map.setLevel(parseInt(DCI.map2dTool.map.getLevel()) - 1);}}}

(3)量算工具,这个部分详细的参照:arcgis api for js共享干货系列之一自写算法实现地图量算工具

2.Navigation控件,这个部分详细的参照:arcgis api for js共享干货系列之二自定义Navigation控件样式风格

3.地图比例尺控件,这个实现比较简单,直接调用api封装好的Scalebar

    //加载比例尺var scalebar = new esri.dijit.Scalebar({map: map,//地图对象attachTo: "bottom-left",//控件的位置,左下角scalebarStyle: "ruler",//line 比例尺样式类型scalebarUnit: "metric"//显示地图的单位,这里是km});

其他的具体属性请参照api:https://developers.arcgis.com/javascript/3/jsapi/scalebar-amd.html

4.地图显示坐标,这个实现利用地图移动onMouseMove以及拖拽onMouseDrag事件,通过监听事件动态获取地图当前的鼠标坐标值

    //加载地图显示坐标
    showCoordinates(map);/*** 显示地图坐标
*/
function showCoordinates(map) {var coordinatesDiv = document.getElementById("map_coordinates");//js通过id获取divif (coordinatesDiv) {//div存在就显示coordinatesDiv.style.display = "block";}else {//不存在情况下,动态创建指定id的divvar _divID_coordinates = "map_coordinates";//div的idcoordinatesDiv = document.createElement("div");//动态创建divcoordinatesDiv.id = _divID_coordinates;//idcoordinatesDiv.className = "map-coordinates";//div的css样式coordinatesDiv.innerHTML = "";//默认div填充为空document.getElementById("map").appendChild(coordinatesDiv);//动态创建的div放在地图map容器div里面dojo.connect(map, "onMouseMove", showCoords);//监听地图的移动事件dojo.connect(map, "onMouseDrag", showCoords);function showCoords(evt) {evt = evt ? evt : (window.event ? window.event : null);var mp = evt.mapPoint;//获取鼠标当前位置的地图坐标值coordinatesDiv.innerHTML = "<span id='cd_label' style='font-size:13px;text-align:center;font-family:微软雅黑;'>" + "横坐标:" + mp.x.toFixed(3) + "&nbsp;纵坐标:" + mp.y.toFixed(3) + "</span>";}}
}

5.地图鹰眼控件,这个实现比较简单,直接调用api封装好的OverviewMap

    //加载鹰眼var overviewMapDijit = new esri.dijit.OverviewMap({map: map,attachTo: "bottom-right",color: " #D84E13",opacity: .40});

其他的具体属性请参照api:https://developers.arcgis.com/javascript/3/jsapi/overviewmap-amd.html

最后,提供源代码下载:http://pan.baidu.com/s/1c2yvl8c

arcgis api for js入门开发系列三地图工具栏(含源代码)相关推荐

  1. arcgis api for js入门开发系列六地图分屏对比(含源代码)

    上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...

  2. arcgis api for js入门开发系列十八风向流动图

    本篇主要讲述的是利用arcgis api实现风向流动图,效果图如下: 实现思路: 在esri提供的开源githunb基础上进行修改的:https://github.com/gishome/wind-j ...

  3. arcgis api for js入门开发系列十七在线地图(天地图、百度地图、高德地图)

    本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源,简单封装一个底图切换控件js,在线地图包括:天地图.高德地图以及百度地图,效果图如下: 实现思路: 1.简单的底图切换控件map.L ...

  4. arcgis api for js入门开发系列十二地图打印(GP服务)

    上一篇实现了demo的地图统计图,本篇新增地图打印,截图如下: (1)地图打印实现的思路如下:首先在创建好地图打印GP模型,设置好模型的参数:其次是验证模型运行模型:然后是发布地图打印的GP服务:最后 ...

  5. openlayers4 入门开发系列之地图工具栏篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  6. leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...

  7. arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. arcgis api 3.x for js 入门开发系列五地图态势标绘(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. openlayers入门开发系列之地图工具栏篇

    本篇的重点内容是利用openlayers实现地图工具栏功能,包括地图缩放.移动.地图量算.地图打印.清空.全屏.鹰眼.比例尺.地图坐标显示等,效果图如下: 部分核心代码如下: 地图缩放 地图移动 地图 ...

最新文章

  1. 中文文本挖掘预处理流程总结
  2. 在一个gradle 的maven property 里添加多个URL
  3. JSON调试找不到 net.sf.ezmorph.Morpher问题解决
  4. mysql sock golang_golang thrift 总结一下网络上的一些坑
  5. python 投资组合_重新设计投资组合的好处
  6. c# 获取word表格中的内容_Java 获取、删除Word文本框中的表格
  7. vlc源码分析(四) 调用libts接收TS流
  8. AJAX在VS2005下的基本使用第一篇
  9. 软件测试,何去何从?想安逸不可能!软饭得硬吃...我整理的超全学习指南【值得每个测试一看】
  10. 地砖中间高四边低_客厅棚顶有黑镜在风水里讲怎么样 装修中橱柜里的白色色块用哪个做,怎么施工...
  11. ubuntu14.04安装QQ
  12. 7 爬虫 CrawlSpider类 增量式爬虫 分布式爬虫 生产者消费者模式
  13. 【机器学习】数据增强(Data Augmentation)
  14. 互联网赚钱:一个抖音小项目,分析下,人人都能做
  15. 卖家盒子提示服务器正在维护,户户通提示位置信息改变的解决办法
  16. 同为双摄像头,华为P9到底比iPhone 7 plus差在哪里?
  17. [Alpha] Scrum Meeting 5 - TEAM LESS ERROR
  18. 利用Python制作第一人称射击小游戏 含源代码
  19. 市场调研-全球与中国化妆品级乙基己基甘油市场现状及未来发展趋势
  20. Python简单实现表白藏头诗

热门文章

  1. 完美代替IIS的网络盒子NetBox
  2. Java正则表达式(一)、抓取网页email地址实例
  3. 数据库授权与收回 4.13数据库课程
  4. [转]免费电话网专用免费平台
  5. 炉石服务器在维护吗,炉石传说:深夜服务器疑“再次崩溃”!这次还会有“补偿”吗?...
  6. PCA(explained_variance_ratio_与explained_variance_)
  7. 熟练成就创造——MathWorks全球副总裁Richard Rovner、产品市场经理赵志宏专访
  8. php 数组转二进制,php转16进制_php 十六进制转化为二进制的代码
  9. 关于查看不了ip地址的问题解决
  10. 【阿里云ACE成长记】一线开发如何成长为总监