废话少说，咱们这节直接学习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()})
],
view: view,
target: 'map2'
});
</script>
</body>
</html>
运行后的效果如下图所示：
大家可以发现我在拖动地图1的时候。地图2也会跟着拖动，代码的关键部分是map1和map2使用了同一个View，所以可以做到地图的联动。这也是因为OpenLayers 3采用了MVC模型，V对应的就是View。比较容易控制视图的显示。下面我们再实现一个单页面多地图中地图交换的功能，即：让地图不断的变换位置，下面首先来看一下代码：
<!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>
<input type="button" onClick="swapMap();" value="调换地图" />
<script>
// 创建第一个地图
var map1 = new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
center: [0, 0],
zoom: 2
}),
target: 'map1'
});
// 创建第二个地图
var map2 = new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
center: [0, 0],
zoom: 2
}),
target: 'map2'
});
function swapMap() {
// 改变两个地图的容器
map1.setTarget('map2');
map2.setTarget('map1');
}
</script>
</body>
</html>
然后看一下运行后的效果如下图：
当我们点击调换地图时，两个地图就会动态的交换位置，这里面主要用到的方法就是map的setTarget方法指定HTML中的Dom元素！关于单页面多地图的一些开发我们就先到这儿，下面进行另外一个功能的开发！
2、地图的上下左右移动及定位功能，还是直接上源代码如下图：
<!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 id="map" style="width: 100%, height: 400px"></div>
<div id="navigate-container">
<input type="button" onClick="moveToLeft();" value="左移" />
<input type="button" onClick="moveToRight();" value="右移" />
<input type="button" onClick="moveToUp();" value="上移" />
<input type="button" onClick="moveToDown();" value="下移" />
<input type="button" onClick="moveToChengDu();" value="移到青岛" />
<input type="button" onClick="zoomIn();" value="放大" />
<input type="button" onClick="zoomOut();" value="缩小" />
</div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 设置青岛为地图中心，此处进行坐标转换， 把EPSG:4326的坐标，转换为EPSG:3857坐标，因为ol默认使用的是EPSG:3857坐标
center: ol.proj.transform([120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
}),
target: 'map'
});
// 向左移动地图
function moveToLeft() {
var view = map.getView();
var mapCenter = view.getCenter();
// 让地图中心的x值增加，即可使得地图向左移动，增加的值根据效果可自由设定
mapCenter[0] += 50000;
view.setCenter(mapCenter);
map.render();
}
// 向右移动地图
function moveToRight() {
var view = map.getView();
var mapCenter = view.getCenter();
// 让地图中心的x值减少，即可使得地图向右移动，减少的值根据效果可自由设定
mapCenter[0] -= 50000;
view.setCenter(mapCenter);
map.render();
}
// 向上移动地图
function moveToUp() {
var view = map.getView();
var mapCenter = view.getCenter();
// 让地图中心的y值减少，即可使得地图向上移动，减少的值根据效果可自由设定
mapCenter[1] -= 50000;
view.setCenter(mapCenter);
map.render();
}
// 向下移动地图
function moveToDown() {
var view = map.getView();
var mapCenter = view.getCenter();
// 让地图中心的y值增加，即可使得地图向下移动，增加的值根据效果可自由设定
mapCenter[1] += 50000;
view.setCenter(mapCenter);
map.render();
}
// 移动到青岛
function moveToChengDu() {
var view = map.getView();
// 设置地图中心为青岛的坐标，即可让地图移动到青岛
view.setCenter(ol.proj.transform([120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'));
map.render();
}
// 放大地图
function zoomIn() {
var view = map.getView();
// 让地图的zoom增加1，从而实现地图放大
view.setZoom(view.getZoom() + 1);
}
// 缩小地图
function zoomOut() {
var view = map.getView();
// 让地图的zoom减小1，从而实现地图缩小
view.setZoom(view.getZoom() - 1);
}
</script>
</body>
</html>
然后运行代码看一下效果图如下：
这里我们以青岛为中心点进行了一些功能的开发，经过测试均没有问题！上面代码部分已经有了详细的注释，所以代码我就不一一讲解了，这里注意一下我们进行了坐标转换，使用了ol.proj.transform这个方法，下面我们来看一下这个方法：
我们使用的时候是这样使用的：
view.setCenter(ol.proj.transform([120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'));
我们来看一下这几个参数：它的第一个参数是ol.Coordinate类型的坐标，后面两个参数依次是当前坐标所用的坐标系，及转换后的坐标所用的坐标系，4326是WGS84坐标系，3857是OpenLayers所使用的Web墨卡托投影坐标系。ol.proj.transform([120.374798,36.07316], 'EPSG:4326', 'EPSG:3857')就能把EPSG:4326的坐标[120.374798,36.07316]转换为EPSG:3857的坐标。这个地图功能我们就学习到这儿，下面进行下一个功能的学习。
3、限制地图范围，直接上代码如下图：
<!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 id="map" style="width: 100%"></div>
<script>
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 设置地图中心范围
extent: [120.33944,36.049352, 120.442925,36.126585],
// 设置青岛为地图中心
center: [120.374798,36.07316],
projection: 'EPSG:4326',
zoom: 10
}),
target: 'map'
});
</script>
</body>
</html>
看一下运行后的效果图如下：
效果是出来了，但是如果对上面的地图进行缩小，然后再看地图，是否发现范围[120.33944,36.049352, 120.442925,36.126585]外的区域也显示出来了，而这并不是我们期望看到的。这时请注意仔细看extent参数的说明，这个范围指的是地图中心的限制范围，而不是整个地图显示的范围。那遇到这个问题该怎么办？我们发现，当我们地图放大后，这个问题并不那么明显，地图放大的越大，固定窗口显示的实际地理范围越小。一个简单的办法就是限制地图不能无限缩小，具体允许缩小到哪一级，可通过实际缩小地图到刚好填满整个窗口(id为map的div)来确定。所以我们现在来做限制地图缩放级别的功能！
4、限制地图缩放级别，直接上代码如下图：
<!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 id="map" style="width: 100%"></div>
<script>
new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 设置成都为地图中心
center: [120.374,36.073],
projection: 'EPSG:4326',
zoom: 10,
// 限制地图缩放最大级别为14，最小级别为10
minZoom: 10,
maxZoom: 14
}),
target: 'map'
});
</script>
</body>
</html>
代码运行后的效果如下图：
大家可以试试我们的地图会在放大或者缩小到一定的层级以后就不能继续放大或者缩小了。除了使用minZoom和maxZoom之外，还可以使用minResolution和maxResolution，其具体原理和使用，在分辨率章节会有介绍。对于开发者而言，建议使用minZoom和maxZoom，简单直接。有些时候我们还会需要会有一些地图查找和标注的业务，比如查看青岛市市南区。而这时，地图所在区域可能是北京，我们需要能够让地图直接定位到市南区，并且最大化完全地显示这块区域。下面就将开发这个功能。
5、自适配区域，直接上代码：
<!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 id="map" style="width: 100%"></div>
<input type="button" value="显示青岛" onclick="fitToQingdao();" />
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({source: new ol.source.OSM()})
],
view: new ol.View({
// 设置北京为地图中心
center: [116.403598,39.917553],
projection: 'EPSG:4326',
zoom: 10
}),
target: 'map'
});
function fitToQingdao() {
// 让地图最大化完全地显示市南区区域[120.33944,36.049352, 120.442925,36.126585]
map.getView().fit([120.33944,36.049352, 120.442925,36.126585], map.getSize());
}
</script>
</body>
</html>
下面看一下代码的运行效果如下图：
首先我们定位在北京天安门：
点击显示青岛按钮：
证明我们做的非常成功！
关于地图的基本功能的开发我们就到这儿了，关于OpenLayers的初级阶段的开发就到这儿了，接下来我们将正式进入OpenLayers中级阶段的开发，大家加油！做更好的WebGISer！
6396
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
