arcgis api for js共享干货系列之二自定义Navigation控件样式风格

自定义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具体值:

/* --------------------------------地图初始信息配置-------------------------------- */  
function DCIMapConfig() { }  
DCIMapConfig.mapInitParams = {  
    fullExtent: {//全图范围  
        xmin: 370108.658079872,  
        ymin: 2500959.4242701,  
        xmax: 461986.148263811,  
        ymax: 2550949.3398943  
    },  
    extent: {//初始化范围  
        xmin: 395735.547992658,  
        ymin: 2507003.85390929,  
        xmax: 439075.764838622,  
        ymax: 2548492.68036878  
    },  
    spatialReference: {  
        wkid: 2435  
    },  
    lods: [  
        { "level": 0, "resolution": 76.4371798535264, "scale": 288895.85 },  
        { "level": 1, "resolution": 38.2185912496825, "scale": 144447.93 },  
        { "level": 2, "resolution": 19.1092943019219, "scale": 72223.96 },  
        { "level": 3, "resolution": 9.55464715096097, "scale": 36111.98 },  
        { "level": 4, "resolution": 4.77732357548048, "scale": 18055.99 },  
        { "level": 5, "resolution": 2.38866311065955, "scale": 9028 }  
    ]  
}  
  
/*导航条配置参数*/  
DCIMapConfig.sliderConfig = {  
    targetId: "mapDiv",  
    minValue: 0,     //1  
    maxValue: 5,    //20  
    startValue: 0,  //12  
    toolbarCss: ["toolBar", "toolBar_button", "toolBar_slider", "toolBar_mark"],  
    marksShow: {  
        countryLevel: null,  
        provinceLevel: null,  
        cityLevel: null,  
        streetLevel: null  
    }  
};  
  
/*地图调用,type为地图类型,0为wmts,1为mapserver切片*/  
DCIMapConfig.eagle =  { Url: "http://localhost/TileService/SDMap", labelUrl: "", type: 0 };  
DCIMapConfig.vecMap = { Url: "http://localhost/TileService/SDMap", labelUrl: "", type: 0 };  
DCIMapConfig.imgMap = { Url: "http://172.26.99.180:6080/arcgis/rest/services/XZQJ/MapServer", LabelUrl: "", type: 1 };  
DCIMapConfig.terMap = { Url: "http://172.26.99.161/TileService/Raster2008", LabelUrl: "http://172.26.99.161/TileService/ZTMapRasterLable", type: 0};

arcgis api for js3.x入门开发系列列表

  1. arcgis api离线部署
  2. 不同地图服务展示
  3. 地图工具栏
  4. 地图查询
  5. 地图态势标绘
  6. 地图分屏对比
  7. 图层控制
  8. 聚合效果
  9. 热力图效果
  10. 叠加SHP图层
  11. 地图统计图
  12. 地图打印(GP服务)
  13. 地图最短路径分析
  14. 最近设施点路径分析
  15. 台风轨迹
  16. 迁徙流动图
  17. 在线地图(天地图、百度地图、高德地图)
  18. 风向流动图
  19. 图层在线编辑
  20. 打印地图的那些事
  21. 气泡窗口信息动态配置模板

干货:

  1. 自写算法实现地图量算工具
  2. 自定义Navigation控件样式风格
  3. 热力图优化篇-不依赖地图服务
  4. 实现克里金插值渲染图–不依赖GP服务
  5. echarts开源js库实现地图统计图分析