日存档: 2017年6月7日

用input-radio选择性切换不同品牌的地图

作者: 日期: 2017年6月7日 没有评论

        先看index.html文件的代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <script src="js/jquery1.8.3.min.js" type="text/javascript"></script>
    <!-- <script src="js/ol.js" type="text/javascript"></script> -->
    <script src="js/ol-debug.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>Map Test</h2>
    <div id="map">
        <nav id="layers">
            <ul>
                <li><input type="radio" name="layer" value="mapquest"/>MapQuest OSM</li>
                <li><input type="radio" name="layer" value="bingmaps"/>Bing Maps</li>
                <li><input type="radio" name="layer" value="esri"/>ESRI Maps</li>
                <li><input type="radio" name="layer" value="stamen"/>Stamen</li>
            </ul>
        </nav>
</div>
  </body>
</html>

        在ul标签中加入mapquest bingmaps esri stamen.与index.html相应的CSS代码：

.map {
    position:absolute;
    height: 600px;
    width: 100%;
    border: 1px red solid; 
  }
#layers {
	position:absolute;
	z-index:2;
	background-color:rgba(0,60,136,0.7);
	color:#fff;
	padding:8x 12px;
	font-size:12px;
	right:25px;
	top:5px;
        border-radius:8px;	 
  }
#layers > ul{
	list-style:none;
}
#layers > ul > li{
	padding: 2px 15px 1px 2px;
	margin-left:-25px;
}

        给#layers中的li标签加载'change'事件：

	$("#layers input[type=radio]").live('change',function(){
		var layer = $(this).val();
		map.getLayers().getArray().forEach(function(e){
			var name = e.get('name');
			e.setVisible(name == layer);
		});		
	})

        如果从OSM切换到bingmaps，则需要申请一个调用bingmaps的key，bingmaps key的申请地址：://www.bingmapsportal.com，同样切换到baidumaps或googlemaps等等都需要相应的key。 

	var mapquest = new ol.layer.Tile({
		source: new ol.source.OSM(),
		visible:true,
		name:'mapquest'	
	});	
	var bingmaps = new ol.layer.Tile({
		source: new ol.source.BingMaps({
			key:'AmqG5Tq1jbzjo1jTHyUyYqtAwfVf1OotyTiZaCU-AmDskeVi56TTKJ010u9g4j7O',
			imagerySet:'AerialWithLabels'
		}),
		visible:false,
		name:'bingmaps'	
	});

        看效果地址(由于另外两幅地图没有申请key，所以暂时不可见)：地图切换

用OpenLayers实例化一幅地图

作者: 日期: 2017年6月7日 没有评论

        openlayers是一个非常大而复杂，强大和灵活的JS框架。
        在OpenLayers一个主要的概念就是Map，Map可以包含一些图层，这些图层可以是矢量的也可以使栅格的。
        每个图层的数据源可以是图片，也可以是kml文件等。当然Map也包含一些控件，主要是交互所用的，比如 平移 缩放，要素的选择等等。
        现在我们开始学习OpenLayers的使用。
        1.创建一个简单的电子地图应用。
        你要创建一个电子地图应用，首先要创建一个地图。本教程将引导你创建一个简单的电子地图应用。
        当然一些必要的基础知识是需要的，比如 HTML，CSS ，Javascript 等是要学习的，OpenLayers是主要是通过HTML和Javascript编写的，所以我们得有一个编辑器。
        这里我们使用EditPlus ，当然你可以选择更好的一些编辑器，他们会高亮显示语法和自动提示功能。
        2.我们首先下载openlayers的源码，下载地址：://github.com/openlayers/openlayers/releases/download/v4.1.1/v4.1.1-dist.zip，解压里面的内容。
        3.下面创建一个 空的index.html文件。

        写入如下代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/ol.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">
<script src="js/jquery1.8.3.min.js" type="text/javascript"></script>
    <!-- <script src="js/ol.js" type="text/javascript"></script> -->
<script src="js/ol-debug.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>Map Test</h2>
    <div id="map"></div>
  </body>
</html>

        4.在index.html目录下创建一个css和js文件夹，分别放入ol.css、ol.js和ol-debug.js和jquery.js,在css目录中另外创建main.css以及在js文件下创建main.js。用文本编辑器分别打开main.css和main.js，在main.css写入：

.map {
	position:absolute;
    height: 600px;
    width: 100%;
	border: 1px red solid; 
  }

        以及在main.js中写入:

$(function(){	 
	var view = new ol.View({
		center: ol.proj.fromLonLat([114.42, 30.52]),
		zoom: 9,
		maxZoom:18,
		minzoom:2
	});	
	
	var mapquest = new ol.layer.Tile({
		source: new ol.source.OSM(),
		visible:true,
		name:'mapquest'	
	});		
	var map = new ol.Map({
			target: 'map',
			controls:ol.control.defaults().extend([
				new ol.control.ScaleLine(),
				new ol.control.ZoomSlider()
			]),
			layers: [mapquest],
			view: view
		  });		  	  		  
})

        5.用浏览器打开index.html，就可以看到刚才创建的地图了。