<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lib/OpenLayers/ol.js"></script>
<script src="olStyle/Light.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.map {
width: 100%;
height: 100%;
background: #f6f6f4;
}
.ol-scale-line {
/* 比例尺背景顏色 */
background: rgba(0, 60, 136, .7);
}
.ol-scale-line-inner {
/* 比例尺邊框樣式 */
border: 1px solid #eee;
border-top: none;
/* 比例尺文字大小 */
font-size: 10px;
/* 比例尺文字顏色 */
color: #eee;
/* 比例尺寬高為動態計算，若需要固定寬度，將最大最小寬度設置為相同即可 */
min-width: 100px;
max-width: 100px;
}
</style>
</head>
<body>
<div id="map" class="map" data-id="11"></div>
<script type="text/javascript">
var map;
$(function () {
InitMap();
AddScaleLint();
})
var layer;
//地圖初始化
function InitMap() {
//初始化地圖
layer = new ol.layer.Vector({
source: new ol.source.Vector(),
overlaps: false,
wrapX: false
}),
style: function (feature, resolution) {
switch (feature.get('layer')) {
case 'poi':
poiStyle.getText().setText(feature.get('name'));
return poiStyle;
case 'boundary': return boundaryStyle;
case 'lawn': return lawnStyle;
case 'road':
roadStyle.getText().setText(feature.get('name'));
return (resolution < 2) ? roadStyle : null;
case 'building':
return buildingStyle(feature, resolution);
case 'other':
otherStyle.getText().setText(feature.get('name'));
return otherStyle;
default: return null;
}
}
});
map = new ol.Map({
layers: [layer],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([120.277, 36.330]),
minZoom: 1,
zoom: 16
})
});
}
/*增加比例尺**********************************************************************************/
//添加比例尺
function AddScaleLint() {
var scaleLineControl = new ol.control.ScaleLine({
Units: 'metric',//單位有5種：degrees imperial us nautical metric
});
map.addControl(scaleLineControl);
}
</script>
</body>
</html>
