Fc4042c116154fd7a9b98b6393bfe4e4
arcgis api 3.x for js 共享干货系列之二自定义 Navigation 控件样式风格(附源码下载)

0.内容概览

  1. 自定义 Navigation 控件样式风格
  2. 源码下载 ## 1.内容讲解 arcgis api 3.x 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};

2.源码分享

分享一下本篇自定义 Navigation 控件样式风格的demo源码:源码demo下载
下载提取码:reec

© 著作权归作者所有
这个作品真棒,我要支持一下!
专栏简介: WebGIS开发者@GIS之家,一直混迹GIS行业,关注WebGIS开发方向,在本专栏中,分享WebG...
0条评论
top Created with Sketch.