首页 > 嗟来之食 > arcgis api for js共享干货系列之二自定义Navigation控件样式风格 – gis之家 –
2016
09-18

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

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};

具体的Navigation控件类下载:control.js样式css下载:mapcss

最后编辑:
作者:
这个作者貌似有点懒,什么都没有留下。

留下一个回复