<!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>
<script src="point.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
} .map {
width: 100%;
height: 100%;
background: #f6f6f4;
}
</style>
</head> <body>
<div id="map" class="map" data-id="11"></div>
<script type="text/javascript"> $(function () { InitMap(); AddPolygon();
}) var map; var layer = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 0, 0, 0.3)'
}),
stroke: new ol.style.Stroke({
color: 'blue',
width: 2
}),
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
}); //地图初始化
function InitMap() {
map = new ol.Map({
layers: [new ol.layer.Vector({
source: new ol.source.Vector(),
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;
}
}
}), layer],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([120.277, 36.330]),
minZoom: 1,
zoom: 16
})
});
} /*显示并编辑区域**********************************************************************************/
function AddPolygon() {
var coordinates = [[
ol.proj.fromLonLat([120.26829957962033, 36.32791869064661]),
ol.proj.fromLonLat([120.27445793151853, 36.330650012922234]),
ol.proj.fromLonLat([120.2671408653259, 36.33063272637348]),
ol.proj.fromLonLat([120.26829957962033, 36.32791869064661])
]] var plygon = new ol.geom.Polygon(coordinates)
//多边形要素类
var feature = new ol.Feature({
geometry: plygon
}); layer.getSource().addFeature(feature); //标注，当使用多边形时，自动计算中心坐标？
//标注，如果使用文字标注，图形将会被文字覆盖
var featureText = new ol.Feature({
geometry: plygon,
name: "标注1"
}); featureText.setStyle(new ol.style.Style({
//文本样式
text: new ol.style.Text({
//对齐方式
textAlign: 'center',
//文本基线
textBaseline: 'middle',
//字体样式
font: 'normal 14px 微软雅黑',
//文本内容
text: featureText.get('name')
})
})) layer.getSource().addFeature(featureText); //清除
//layer.getSource().clear(); var points = [[
ol.proj.fromLonLat([120.27681827545163, 36.33236136226455]),
ol.proj.fromLonLat([120.28038024902342, 36.33141061727086]),
ol.proj.fromLonLat([120.27681827545163, 36.33001040806349]),
ol.proj.fromLonLat([120.27681827545163, 36.33236136226455])
]] var plygon2 = new ol.geom.Polygon(points)
//多边形要素类
var feature2 = new ol.Feature({
geometry: plygon2
}); layer.getSource().addFeature(feature2); //标注，当使用多边形时，自动计算中心坐标？
//标注，如果使用文字标注，图形将会被文字覆盖
var featureText2 = new ol.Feature({
geometry: plygon2,
name: "标注2"
}); featureText2.setStyle(new ol.style.Style({
//文本样式
text: new ol.style.Text({
//对齐方式
textAlign: 'center',
//文本基线
textBaseline: 'middle',
//字体样式
font: 'normal 14px 微软雅黑',
//文本内容
text: featureText2.get('name')
})
})) layer.getSource().addFeature(featureText2);
} </script>
</body> </html>