openlayers 1

实例一 第一个地图
每一个openlayers的地图都是ol.Map的对象
openlayers 1_第1张图片
openlayers 1_第2张图片
ol.Overlay用来实现弹出式窗口

 // 创建地图
      new ol.Map({
            // 设置地图图层
            layers: [
              // 创建一个使用Open Street Map地图源的瓦片图层
              new ol.layer.Tile({source: new ol.source.OSM()})
            ],
            // 设置显示地图的视图
            view: new ol.View({
              center: [0, 0],    // 定义地图显示中心于经度0度,纬度0度处
              zoom: 2            // 并且定义地图显示层级为2
            }),
            // 让id为map的div作为地图的容器
            target: 'map'    
        });

创建一个简单地图。
其他代码只是用于设置地图的构造参数。由此可以推测出ol.Map是最主要的地图类,创建地图就需要构造这么一个对象。接下来依次分析每一个参数部分的代码。
参数layers:从名字和具体的值可以看出可以设置多个layer,类似于ps中的图层,多个图层可以叠加,在最上面的会覆盖下面的图层,在上面代码中添加了一个Open Street Map的地图。

  // 设置地图图层
            layers: [
              // 创建一个使用Open Street Map地图源的瓦片图层
              new ol.layer.Tile({source: new ol.source.OSM()})
            ],

参数view:

 // 设置显示地图的视图
            view: new ol.View({
              center: [0, 0],    // 定义地图显示中心于经度0度,纬度0度处
              zoom: 2            // 并且定义地图显示层级为2
            }),``

它为地图定义显示窗口,对应ol.View 类,可以自定义显示地图的显示中心,缩放层级等等。

参数target :

  // 让id为map的div作为地图的容器
            target: 'map' 

指定目标 ,最基本的依赖html 在页面中显示目标。

单击激活地图启用交互

<head>
	<title>单击激活地图启用交互</title>
	<link rel="stylesheet" href="../include/ol.css" type="text/css">
	<script src="../include/ol.js"></script>

</head>

<body>
	<div tabindex="2" id="map" class="map"></div>
	<!-- //使用tabindex使地图容器处于失去焦点状态 -->
	<div>
			中新网客户端北京730日电(记者 上官云)30日,“长安十二时辰仙灯”登上热搜。在热门剧《长安十二时辰》中,一座高大的“仙灯”吸引了许多观众的视线,许多观众感叹其造型精致。
			
	</div>
	<script>

		var map = new ol.Map({
			interactions: ol.interaction.defaults({
				onFocusOnly: true
			}),
			layers: [
				new ol.layer.Tile({
					source: new ol.source.OSM()
				})
			],
			target: 'map',
			view: new ol.View({
				center: [0, 0],
				zoom: 2
			})
		});


		map.on('moveend',function(){
			console.log(map.getView().getZoom())
		})

	</script>
</body>

外部按钮切换地图容器

<button id="teleport">切换</button>
	<div id="map1" class="map"></div>
	<div id="map2" class="map"></div>


	<script>
	
		var map = new ol.Map({
			layers: [
				new ol.layer.Tile({
					source: new ol.source.OSM()
				})
			],
			view: new ol.View({
				center: [0, 0],
				zoom: 2
			})
		});

		// map.setTarget('map1');
		map.setTarget('map1');
		
		var teleportButton = document.getElementById('teleport');
		teleportButton.addEventListener('click', function () {
			var target = map.getTarget() === 'map1' ? 'map2' : 'map1';
			//切换1和2 
			map.setTarget(target);
		});
		
	</script>

你可能感兴趣的:(openlayers 1)