ol提供的地图控件比较常用的包括:鼠标位置、比例尺、鹰眼、图层缩放滑块。
直接通过代码来讲解体会一下会更加直观。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>地图控件</title>
<link href="ol/ol.css" rel="stylesheet" type="text/css" />
<script src="ol/ol.js" type="text/javascript"></script>
<style type="text/css">
html,body{
height: 100%;
margin: 0px !important;
}
#mapCon {
width: 100%;
height: 100%;
position: absolute;
}
/* 鼠标位置盒子的样式 */
#mouse-position {
position: absolute;
bottom: 10px;
right: 20px;
padding: 2px 10px;
/* 需要设置的大一些才能显示在地图上面 */
z-index: 1000;
text-align: center;
background-color: #ffffff66;
border-radius: 5px;
}
/* 鼠标位置信字体样式 */
.custom-mouse-position {
color: rgb(0,0,0);
font-size: 16px;
font-family: "宋体";
}
/****************自定义鹰眼样式 *************/
.ol-custom-overviewmap, .ol-custom-overviewmap.ol-uncollapsible {
bottom: auto;
left: auto;
/* 右侧显示 */
right: 0;
/* 顶部显示 */
top: 0;
}
/* 鹰眼控件展开时控件外框的样式 */
.ol-custom-overviewmap:not(.ol-collapsed) {
border: 1px solid rgb(216, 216, 216);
}
/* 鹰眼控件中地图容器样式 */
.ol-custom-overviewmap .ol-overviewmap-map {
border: none;
width: 270px;
}
/* 鹰眼控件中显示当前窗口中主图区域的边框 */
.ol-custom-overviewmap .ol-overviewmap-box {
border: 2px solid rgb(41, 80, 255);
}
/* 鹰眼控件展开时其控件按钮图标的样式 */
.ol-custom-overviewmap:not(.ol-collapsed) button{
bottom: auto;
left: auto;
right: 1px;
top: 1px;
}
/****************自定义鹰眼样式 *************/
</style>
</head>
<body>
<!-- 地图容器 -->
<div id="mapCon">
<div id="mouse-position"></div>
</div>
<script type="text/javascript">
var key = "4689fc6b9bc0fdc8c48298f751ebfb41";//天地图密钥
//ol.layer.Tile:是一个瓦片图层类,用于显示瓦片资源。
//source是必填项,用于为图层设置来源。
//ol.source.XYZ:
//创建天地图矢量图层
var TiandiMap_vec = new ol.layer.Tile({
title: "天地图矢量图层",
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,
wrapX: false
})
});
//创建天地图矢量注记图层
var TiandiMap_cva = new ol.layer.Tile({
title: "天地图矢量注记图层",
source: new ol.source.XYZ({
url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key,
})
});
//鹰眼控件(OverviewMap),默认样式
// var overviewMapControl = new ol.control.OverviewMap();
//鹰眼控件(OverviewMap),自定义样式的鹰眼控件
var overviewMapControl = new ol.control.OverviewMap({
//鹰眼控件样式
className: 'ol-overviewmap ol-custom-overviewmap',
//鹰眼中加载同坐标系下不同数据源的图层
layers: [TiandiMap_vec, TiandiMap_cva],
//鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码)
collapseLabel: '\u00BB',
//鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码)
label: '\u00AB',
//初始为展开显示方式
collapsed: false,
view: new ol.View({
maxZoom:1,//将最大最小缩放等级设置为一样的,可以避免鹰眼内的地图跟随外部地图缩放。
minZoom: 1,
projection: "EPSG:4326",//这里需要与下面的map对象的view中设置的一致,不然鹰眼内的小地图无法渲染。
}),
});
//实例化Map对象加载地图
var map = new ol.Map({
//地图容器div的ID
target: 'mapCon',
//地图容器中加载的图层
layers: [TiandiMap_vec, TiandiMap_cva],
//地图视图设置
view: new ol.View({
//地图初始中心点(经纬度)
center: [116.3913,39.9071],//北京
//地图初始显示级别
zoom: 2,
projection: "EPSG:4326",//这里改为4326,地理坐标系,这样center可以直接用经纬度设置。
}),
//加载鹰眼控件,鹰眼控件,无法通过map.addControl方法添加,通过map.addControl添加后,鹰眼控件无法正常显示。
controls: ol.control.defaults().extend([overviewMapControl])
});
var view = map.getView();
//实例化 图层缩放滑块(ZoomSlider)控件
//拖动滑块时,地图会议当前地图的中心点进行放大缩小,可以通过 view.getCenter();方法获取当前地图的中心点
console.log(view.getCenter());
var zoomslider = new ol.control.ZoomSlider();
//加载到地图容器中
map.addControl(zoomslider);
//鼠标位置控件(MousePosition)
var mousePositionControl = new ol.control.MousePosition({
//坐标格式,保留4位小数
coordinateFormat: ol.coordinate.createStringXY(4),
//地图投影坐标系,这里选择地理坐标系,即经纬度模式
projection: 'EPSG:4326',
//显示经纬度信息的 div 的css样式名称
className: 'custom-mouse-position',
//显示鼠标位置的div容器
target: document.getElementById('mouse-position'),
//未定义坐标的标记
undefinedHTML: ' '
});
//加载到地图容器中
map.addControl(mousePositionControl);
//比例尺控件(ScaleLine)
var scaleLineControl = new ol.control.ScaleLine({
//设置比例尺单位,degrees、imperial、us、nautical、metric(度量单位)
units: "metric"
});
//加载到地图容器中
map.addControl(scaleLineControl);
</script>
</body>
</html>