您的位置：首页 > 运维架构

OpenLayers开发：简单示例

2015-07-14 14:59 363 查看

HTML布局

首先在开发环境中新建一个HTML静态页面（也可是JSP、ASPX等动态页面）。

定义用于页面布局的CSS文件，并链接到HTML页面中。

添加用于显示地图的div窗口，注意将该div的id设置为”map”。

<!DOCTYPE html>
<html>
<head>
<title>Map Test</title>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"href="css/pageLayout.css" type="text/css"/>
<scripttype="text/javascript"src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript"src="OpenLayers-2.13.1/OpenLayers.js"></script>
</head>
<body>
<divid="map"></div>
</body>
</html>

JS快速开发

（1）新建JavaScript文件mapservice.js，引用到HTML页面中。

<scripttype="text/javascript" src="js/mapservice.js"></script>
（2）在新建的JavaScript文件编写地图初始化函数mapInit，添加代码。

//定义地图全局变量
var map = null;
//定义图层全局变量
var china = null, china_p = null;

//地图初始化函数
function mapInit() {
//提供WMS服务的URL
varwmsurl = "http://map.chinalbs.org/beyonserver/gwc/service/wms";
//定义地图选项
varmapOptions = {
//地图分辨率（以下以度为单位），定义了地图缩放层级
resolutions: [0.703125, 0.3515625,0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625,0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4,1.71661376953125E-4,
8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5,5.364418029785156E-6, 2.682209014892578E-6],
//空间参考，以EPSG代码表示，“EPSG:4326”代表WGS-84地理坐标系
projection: new OpenLayers.Projection('EPSG:4326'),
//地图范围
maxExtent: newOpenLayers.Bounds(-180.0, -90.0, 180.0, 90.0),
//可以在以下语句中添加控件
controls: []
};
// 使用指定的文档元素创建map实例对象，这里的"map"就是页面中DIV元素的ID
map= new OpenLayers.Map("map", mapOptions);

//定义"中国"图层，访问指定的WMSURL，图层或图层组的名字为china，图片格式为png8
china = new OpenLayers.Layer.WMS(
"中国",wmsurl,
{
layers: 'china',
format: 'image/png8'
},
{
buffer: 1,
displayOutsideMaxExtent: true,
//设置该图层的显示级别
//maxResolution: 0.703125,
//将该图层设置为基础图层，每个地图窗口中有且仅有一个基础图层
isBaseLayer: true
}
);

//定义"中国注记"图层，图层名字为b0100p014，图片格式为png8
china_p = new OpenLayers.Layer.WMS(
"中国注记",wmsurl,
{
LAYERS: 'beyondb:b0100p014',
STYLES: '',
format: 'image/png8',
tiled: true
},
{
buffer: 1,
displayOutsideMaxExtent: true,
isBaseLayer: false,
transitionEffect: "none"
//minResolution: 0.00274658203125
}
);

//向map对象中添加以上定义的图层
map.addLayers([china,china_p]);
//设置地图中心和缩放级别
map.setCenter(new OpenLayers.LonLat(116.39,39.91), 8);
}
（3）要得到良好的用户体验，还需向地图中增加控件。

//增加Navigation导航控件，可以随鼠标拖动、滑轮滚动操作地图
map.addControl(newOpenLayers.Control.Navigation());
//增加比例尺控件，用于在地图上显示比例尺
map.addControl(newOpenLayers.Control.ScaleLine());
//增加MousePosition控件，用于实时显示鼠标所在位置坐标
map.addControl(newOpenLayers.Control.MousePosition());
//增加图层列表控件，用于控制图层显示与隐藏
map.addControl(newOpenLayers.Control.LayerSwitcher());
//增加缩放平移工具条，用于控制地图缩放平移
map.addControl(newOpenLayers.Control.PanZoomBar());
//增加KeyboardDefaults控件，可以通过键盘的部分按键操作地图
map.addControl(newOpenLayers.Control.KeyboardDefaults());

（4）添加jQueryready事件方法。

$(document).ready(function() {
//地图初始化
mapInit();
});

至此，一个简单的地图窗口已经搭建完成。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航