废话少说,咱们这节直接学习OpenLayers地图相关功能开发的demo。主要的地图功能包括:单页面多地图的相关功能开发、地图的上下左右移动及定位功能开发、限制地图范围开发、限制地图缩放层级开发和地图的自适配区域开发。
1、单页面多地图的开发,直接上代码如下:
<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>地图功能实现</title>
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>
<body>
<div style="width: 100%;height: 100%;">
<p>地图1</p>
<div id="map1" style="width: 50%"></div>
<p>地图2</p>
<div id="map2" style="width: 50%"></div>
</div>
<script>
// 创建第一个地图
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
center: [0, 0],
zoom: 2
}),
target: 'map1'
});
// 创建第二个地图
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
center: [0, 0],
zoom: 2
}),
target: 'map2'
});
</script>
</body>
</html>
然后运行以下,看一下效果图!
我们的一个页面就出现了两个地图,这个功能后期我们可以在做一些地图的分屏对比时用到!并且大家可以看到我们操纵一个地图时,另外一个地图是不会改变的。但是如果我们需要地图联动应该怎么办呢?别着急,我们有办法。代码如下:
<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>地图功能实现</title>
<link href="css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>
<body>
<div style="width: 100%;height: 100%;">
<p>地图1</p>
<div id="map1" style="width: 50%"></div>
<p>地图2</p>
<div id="map2" style="width: 50%"></div>
</div>
<script>
// 创建一个视图
var view = new ol.View({
center: [0, 0],
zoom: 2
});
// 创建第一个地图
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: view,
target: 'map1'
});
// 创建第二个地图
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],