westdc-zf1/application/default/views/scripts/data/landuse-compare.phtml

<?php
$this->headTitle($this->config->title->site);
$this->headTitle('土地利用图');
$this->headTitle()->setSeparator(' - ');
$this->headLink()->appendStylesheet('/css/map.css');
$this->headScript()->appendFile('http://openlayers.org/en/v3.1.1/build/ol.js');
$this->headScript()->appendFile('/js/lib/openlayers/ol-layerswitcher.js');
$this->nav[] = array('link'=>"/data/landuse",'title'=>'三江源多期土地利用图');
?>
<?= $this->render('breadcrumbs.phtml') ?>
<div class="container">
	<div class="row mapsync">
		<div class="span6">
			<div id="mapl" class="map"></div>
		</div>
		<div class="span6">
			<div id="mapr" class="map"></div>
		</div>
	</div>
</div>
<script type="text/javascript">


	var projection = ol.proj.get('EPSG:3857');
	var projectionExtent = projection.getExtent();
	var size = ol.extent.getWidth(projectionExtent) / 256;
	var resolutions = new Array(19);
	var matrixIds = new Array(19);
	var mapExtentQH = [89.3, 31.8, 102.3, 36.3];

	var res = 156543.03392804096153584694438047;
	for (var z = 1; z <= 19; z++) {
		res /= 2.0;
		matrixIds[z - 1] = z;
		resolutions[z - 1] = res;
	}

	var mapL = new ol.Map({
		layers: [
			new ol.layer.Group({
				'title': '基础层',
				layers: [
					new ol.layer.Tile({
						title: '地图',
						type: 'base',
						extent: projectionExtent,
						source: new ol.source.WMTS({

							url: 'http://t0.tianditu.com/vec_w/wmts',
							layer: 'vec',
							matrixSet: 'w',
							format: 'tiles',
							projection: projection,
							tileGrid: new ol.tilegrid.WMTS({
								origin: ol.extent.getTopLeft(projectionExtent),
								resolutions: resolutions,
								matrixIds: matrixIds
							}),
							style: 'default'
						})
					})
				]
			}),

			new ol.layer.Group({
				title: '年份',
				layers: [

					new ol.layer.Tile({
						title: '2013年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2013/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2012年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,

							url: 'http://tile.sanjiangyuan.org.cn/landuse2012/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2011年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2011/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2010年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2010/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2009年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2009/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2008年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2008/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2007年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2007/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2006年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2006/{z}/{x}/{y}.png'
						})
					}),
					new ol.layer.Tile({
						title: '2005年',
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2005/{z}/{x}/{y}.png'
						})
					})
				]
			}),
			new ol.layer.Group({
				title: '城市',
				layers: [
					new ol.layer.Tile({
						title: '城市名称',
						visible: false,
						extent: projectionExtent,
						source: new ol.source.WMTS({

							url: 'http://t0.tianditu.com/cva_w/wmts',
							layer: 'cva',
							matrixSet: 'w',
							format: 'tiles',
							projection: projection,
							tileGrid: new ol.tilegrid.WMTS({
								origin: ol.extent.getTopLeft(projectionExtent),
								resolutions: resolutions,
								matrixIds: matrixIds
							}),
							style: 'default'
						})
					})
				]
			}),			
		],

		target: 'mapl',

		view: new ol.View({
			center: ol.proj.transform([97.3, 33.4], 'EPSG:4326', 'EPSG:3857'),
			zoom: 9
		}),

		controls: ol.control.defaults().extend([
			new ol.control.Zoom()
		])
	})


	var mapR = new ol.Map({
		layers: [
			new ol.layer.Group({
				'title': '基础层',
				layers: [
					new ol.layer.Tile({
						title: '地图',
						type: 'base',
						extent: projectionExtent,
						source: new ol.source.WMTS({

							url: 'http://t0.tianditu.com/vec_w/wmts',
							layer: 'vec',
							matrixSet: 'w',
							format: 'tiles',
							projection: projection,
							tileGrid: new ol.tilegrid.WMTS({
								origin: ol.extent.getTopLeft(projectionExtent),
								resolutions: resolutions,
								matrixIds: matrixIds
							}),
							style: 'default'
						})
					})
				]
			}),

			new ol.layer.Group({
				title: '年份',
				layers: [

					new ol.layer.Tile({
						title: '2013年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2013/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2012年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2012/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2011年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2011/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2010年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2010/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2009年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2009/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2008年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2008/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2007年',
						visible: false,
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2007/{z}/{x}/{y}.png'
						})
					}),

					new ol.layer.Tile({
						title: '2006年',
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2006/{z}/{x}/{y}.png'
						})
					}),
					new ol.layer.Tile({
						title: '2005年',
						visible: false,						
						opacity: 0.6,
						source: new ol.source.XYZ({
							extent: mapExtentQH,
							url: 'http://tile.sanjiangyuan.org.cn/landuse2005/{z}/{x}/{y}.png'
						})
					}),
				]
			}),
			new ol.layer.Group({
				title: '城市',
				layers: [
					new ol.layer.Tile({
						title: '城市名称',
						visible: false,
						extent: projectionExtent,
						source: new ol.source.WMTS({

							url: 'http://t0.tianditu.com/cva_w/wmts',
							layer: 'cva',
							matrixSet: 'w',
							format: 'tiles',
							projection: projection,
							tileGrid: new ol.tilegrid.WMTS({
								origin: ol.extent.getTopLeft(projectionExtent),
								resolutions: resolutions,
								matrixIds: matrixIds
							}),
							style: 'default'
						})
					})
				]
			}),
			
		],

		target: 'mapr',

		view: new ol.View({
			center: ol.proj.transform([97.3, 33.4], 'EPSG:4326', 'EPSG:3857'),
			zoom: 9
		})

	})
	
	mapR.bindTo('view', mapL);

	$(document).ready(function () {
		var layerSwitcher = new ol.control.LayerSwitcher({
			tipLabel: 'layer'
		});
		var layerSwitcherR = new ol.control.LayerSwitcher({
			tipLabel: 'layers'
		});
		mapL.addControl(layerSwitcher);
		mapR.addControl(layerSwitcherR);

		//mapL.getView().bindTo('center', mapR.getView());
	});

</script>