Collide
0%

功能:底图切换

发表于 分类于

添加一个底图切换控件，能在海图、地图、卫星图之间切换。

上效果

本文使用了leaflet、chinaProvider、css3，以下内容是我做的过程、思路。

  • 位置

    关键就是div之间的位置，最外层容器container 采用了相对于浏览器窗口的fixed 绝对定位，其它div、img、p标签均使用了基于父元素的absolute绝对定位。位置之前关系的html代码如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div class="layerContainer" >    //最外层容器
    	<div class="layerGround" >   //白色背景
    	</div>
    	<div class="layerBox">  //包含三个图的box
    		<a  class="layerMap1">  //一个图
    			<img src=""  />
    			<p >海图</p>  //图右下角的文字
    		</a>
    		<a  class="layerMap2">
    			<img src=""  />
    			<p >地图</p>
    		</a>
    		<a  class="layerMap3">
    			<img src=""  />
    			<p >卫星图</p>
    		</a>
    	</div>
    </div>

    这里并不是直接写css类看效果的，因为我感觉那样太麻烦了，直接修改标签的style，调试直至满足要求，然后复制到css类中，再在标签中加上类即可。

    长这样…（黄色的是body背景颜色，为什么颜色是黄色请随意。）

  • 动画

    接下来就是加上动画，本文用的css3

    当鼠标进入时进行左移和透明度的改变

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    @-webkit-keyframes opshow    //改变透明度，这里支持Safari 和 Chrome 其他的也可以搜到
    	{
    	from {
    		opacity: 0;
    	}

    	to {
    		opacity: 0.7;
    	}
    }

    @-webkit-keyframes map2ComeOut  //左移并改变透明度
    	{
    	0% {
    		right: 15%;
    		opacity: 0.5;
    	}

    	100% {
    		right: 33%;
    		opacity: 1;
    	}
    }

    鼠标进入时触发的动画效果

    1
    2
    3
    4
    5
    6
    .layerContainer:hover .layerGround {   //鼠标进入最外层容器时，白色背景类触发效果
    	-moz-animation: opshow 0.5s ;
    	-webkit-animation: opshow 0.5s ;
    	-o-animation: opshow 0.5s ;
    	animation-fill-mode: forwards;  //forwards让其停在最后状态
    }

    移开时返回的动画效果直接加在类里

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .layerGround {  //白色背景
    	background-color: whitesmoke;
    	height: 100%;
    	width: 100%;
    	position: absolute;
    	opacity: 0;
    	z-index: 1020;
    	animation: ophide 0.5s forwards;  //此处ophide即为调用动画的方法   
    }

    动画效果完成

  • 事件

    在html的img标签中添加href="javascript:void(0);" onclick="mapobject.changeLayer('海图')"

    mapobject为js中定义的对象，changeLayer为方法。传入由单引号括起来的参数。


    关于地图，这里使用leaflet，先定义个管理地图的对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var createMapObject = function() {
    	var mapObject = new L.Map('map', {
    		center: new L.latLng(constants.DEFAULTY, constants.DEFAULTX),  //初始中心经纬度
    		zoom: 6,
    		crs: L.CRS.EPSG3857,   //坐标参考系
    		zoomControl: false,
    		closePopupOnClick: false,
    		attributionControl: false,//去除右下角leaflet标志
    	});
    	return mapObject;
    }

    随后加载地图，可用链接可用chinaProvider

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var haituLayer = new L.tileLayer(constants.CHAT_URL, {  //海图，这里的CHAT_URL为海图底图的链接，为公司自带，就不放出来了
    	maxZoom: 15,
    	minZoom: 2,
    	continuousWorld: true,
    	id: 'streets'
    });	
    //也可用chinaProvider加载底图，这个在网上能搜到
    var normalm0 = L.tileLayer.chinaProvider('HaiTu.Normal.Map', {
    	noWrap: true,
    	maxZoom: 15,
    	minZoom: 2
    });
    //将其放进临时变量中，后续处理移除或添加图层操作
    var TEMP_SAVE_OBJECT = {
    	mapLayers: new Object()
    }
    TEMP_SAVE_OBJECT.mapLayers["haitu"] = haituLayer;  //key：haitu

    随后在js中定义方法处理图层切换（也时img标签点击时跳转到的方法）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function changeLayer(name) {  
    	try {
    		if (TEMP_SAVE_OBJECT.mapLayers) {  //如果存在图层
    			var layers = TEMP_SAVE_OBJECT.mapLayers;  //TEMP_SAVE_OBJECT为存储图层的临时对象
    			for (var key in layers) {
    				global_map.removeLayer(layers[key]);  //移开所有图层，var global_map=createMapObject();
    			}
    		}
    		if (name == "海图") {
    			global_map.addLayer(TEMP_SAVE_OBJECT.mapLayers["haitu"]);  //添加图层
    		} else if (name == "地图") {
    			global_map.addLayer(TEMP_SAVE_OBJECT.mapLayers["ditu"]);
    		} else if (name == "卫星图") {
    			global_map.addLayer(TEMP_SAVE_OBJECT.mapLayers["weixingtu"]);
    		}
    	} catch (e) {}
    }

    大功告成。


  • 其它

    其实leaflet是自带切换图层的控件的，而除了加载底图，完成切换底图操作只需引入两行代码，甚至连样式都不用你设计（因为它已经设计好了。）

    1
    2
    3
    4
    L.control.layers(baseLayers).addTo(global_map);  //baseLayers为图层集
    global_map.on('baselayerchange', function (e) {
    	//alert("基图层改变了！");
    })

    至于为什么不用它，放张图

​

丑的不行...