<!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();
//加載畫圖
AddDraw();
addInteraction();
})
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
})
});
}
/*增加顯示區域**********************************************************************************/
//設置圖形
var typeSelect = "LineString"//Point 點 LineString 線 Polygon 多邊形 Circle 圓 Square 正方形 Rectangle 長方形
//添加繪圖交互的函數
//var source = new ol.source.Vector({ wrapX: false });
//實例化矢量數據圖層
var drawVector;
function AddDraw() {
drawVector = new ol.layer.Vector({
//數據源
source: layer.getSource(),
//樣式
style: new ol.style.Style({
//樣式填充
fill: new ol.style.Fill({
//填充顏色
color: 'rgba(37,241,239,0.2)'
}),
//筆觸
stroke: new ol.style.Stroke({
//筆觸顏色
color: '#264df6',
//筆觸寬度
width: 2
}),
//圖形樣式，主要適用於點樣式
image: new ol.style.Circle({
//半徑大小
radius: 7,
//填充
fill: new ol.style.Fill({
//填充顏色
color: '#e81818'
})
})
})
});
map.addLayer(drawVector);
}
function addInteraction() {
//設置矢量圖層的數據源為空
drawVector.setSource(null);
//獲取當前選擇的繪圖類型
var value = typeSelect;
//如果當前選擇的繪圖類型不為"None"的話，則進行相應繪圖操作
//如果當前選擇的繪圖類型為"None"的話，則清空矢量數據源
if (value !== 'None') {
//如果當前的矢量數據源為空的話，則重新創建和設置數據源
//因為當你選擇的繪圖類型為"None"時，會清空數據源
if (drawVector.getSource() == null) {
drawVector.setSource(new ol.source.Vector({ wrapX: false }));
}
//geometryFunction變量，用來存儲繪制圖形時的回調函數
//maxPoints變量，用來存儲最大的點數量
var geometryFunction, maxPoints;
//如果當前選擇的繪圖類型是"Square"的話，則將value設置為Circle
//然后調用createRegularPolygon()方法
if (value === 'Square') {
value = 'Circle';
//根據圓來創建一個四邊形
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
}
else if (value === 'Rectangle') {//長方形
//如果當前選擇的繪圖類型是"Square"的話，則將value設置為LineString
value = 'LineString';
//設置最大點數為2
maxPoints = 2;
geometryFunction = function (coordinates, geometry) {
//source.clear();
//如果geometry對象不存在或者為空，則創建
if (!geometry) {
geometry = new ol.geom.Polygon(null);
}
//開始點的坐標
var start = coordinates[0];
//結束點的坐標
var end = coordinates[1];
//根據開始坐標和結束坐標設置繪圖點坐標
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start]
]);
return geometry;
};
}
//將交互繪圖對象賦給draw對象
//初始化交互繪圖對象
var draw = new ol.interaction.Draw({
//圖層數據源
source: drawVector.getSource(),
//繪制類型
type: value,
//回調函數
//Function that is called when a geometry's coordinates are updated
geometryFunction: geometryFunction,
//最大點數
maxPoints: maxPoints
});
//將draw對象添加到map中，然后就可以進行圖形繪制了
map.addInteraction(draw);
draw.setActive(true);
}
//監聽開始事件
draw.on('drawstart', function () {
//alert("111");
drawVector.getSource().clear();
})
//獲取坐標
draw.on('drawend', function (evt) {
//alert("111");
var feature = evt.feature;
var geometry = feature.getGeometry();
//獲取多邊形的坐標
//var coordinate = geometry.getCoordinates();
//獲取圓的坐標
//var coordinate = geometry.getCenter();
var lnglat = [];
//for(var i =0;i<)
var points = [];
//獲取坐標
if (typeSelect == "Circle") {
points = geometry.getCenter();
lnglat = ol.proj.transform(points, 'EPSG:3857', 'EPSG:4326');
//radius = circle.getRadius();
console.log(geometry.getRadius());
console.log(lnglat);
} else {
points = geometry.getCoordinates();
for (var i = 0; i < points.length; i++) {
lnglat.push(ol.proj.transform(points[i], 'EPSG:3857', 'EPSG:4326'));
}
}
console.log(lnglat);
// console.log(geometry.getCoordinates());
})
}
</script>
</body>
</html>
