You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1164 lines
42 KiB
HTML

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="v5.3.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="../../../css/pintuer-min.css" type="text/css">
<style>
.map {
height: 800px;
width: 100%;
}
</style>
<script language="javascript" src="../../../../common/script/jquery.js" type="text/javascript"></script>
<script language="javascript" src="../../../../common/script/pintuer.js" type="text/javascript"></script>
<script language="javascript" src="../../../../common/script/jquery.bs.js" type="text/javascript"></script>
<script src="v5.3.0/build/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<title>OpenLayers example</title>
<style type="text/css">
#menu {
float: left;
position: absolute;
bottom: 50px;
right: 30px;
z-index: 2000;
}
.checkbox {
left: 20px;
}
/**
* 提示框的样式信息
*/
.tooltip {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 8px;
opacity: 0.7;
white-space: nowrap;
}
.tooltip-measure {
opacity: 1;
font-weight: bold;
}
.tooltip-static {
background-color: #ffffff;
color: black;
border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static:before {
border-top: 6px solid rgba(0, 0, 0, 0.5);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
content: "";
position: absolute;
bottom: -6px;
margin-left: -7px;
left: 50%;
}
.tooltip-static:before {
border-top-color: #ffffff;
}
#scalebar {
float: left;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map border"></div>
<div>
<button onclick="addPoint()" type="button">添加点</button>
<button onclick="addText()" type="button">添加文字</button>
<button onclick="addLine()" type="button">添加轨迹</button>
<button onclick="addInteractions()" type="button">添加多边形</button>
<button onclick="addRegularPolygonTest()" type="button">添加扇形</button>
<button onclick="addEventListener()" type="button">添加聚合</button>
<button onclick="getDist()" type="button">计算距离</button>
<button onclick="addlenght()" type="button">测量</button>
<div>
<div id="menu">
<label>测量类型选择</label>
<select id="type">
<option value="length">长度</option>
<option value="area">面积</option>
</select>
<label class="checkbox label"><input type="checkbox" id="geodesic" />使用大地测量</label>
</div>
</div>
<div id="scalebar"></div>
</div>
<script type="text/javascript">
var key = "d7b1b7243fce9720e4e1ae73e41a47ad";
var drawSource = null;
var draw, snap;
var drawVector = null;
var FancePoints = null;
var popup = null;
//地图创建
drawSource = new ol.source.Vector();
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),//原始地图
validity: false
}),
// new ol.layer.Tile({
// source: new ol.source.XYZ({
// url: "http://localhost:9090/mbtiles/index.jsp?mapindex=vecva&zoom={z}&col={x}&row={y}"
// })
// }),
// new ol.layer.Tile({
// source: new ol.source.XYZ({
// url: "http://localhost:9090/mbtiles/index.jsp?mapindex=cia&zoom={z}&col={x}&row={y}"
// }),
// visible: false
// }),
new ol.layer.Vector({
source: drawSource,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 0.3)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
})
],
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [112.97935279, 28.21347823],
zoom: 15
}),
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
})
});
var pDiv = $("#popup");
if (pDiv.length == 0) {
$("body").append("<div id=\"popup\" class='bg-main' style=\"width:250px;\"></div>");
pDiv = $("#popup");
}
//pDiv.popover('destroy');
popup = new ol.Overlay({
element: pDiv[0],
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -50]
});
map.addOverlay(popup);
//pointermove
map.on('pointermove', function (evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature) {
return feature;
});
if (feature) {
var coordinates = feature.getGeometry().getCoordinates();
popup.setPosition(coordinates);
pDiv.html("sss");
pDiv.show();
} else {
pDiv.hide();
}
});
map.on('singleclick', function (event) {
// map.forEachFeatureAtPixel(event.pixel, feature => {
// 为移动到的feature发送自定义的singleclick消息
//feature.dispatchEvent({type: 'singleclick', event: event});
//});
});
map.on('click', function(evt) {
//debugger
var coordinate = evt.coordinate;
/****************************************************/
//判断当前单击处是否有要素捕获到要素时弹出popup
// feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layerVetor) { return feature; });
// if (feature) { //捕捉到要素
// if (feature.getProperties().features) { //聚合情况下
// if (feature.getProperties().features.length == 1) { //只有一个要素
// // layer.msg("聚合该处有1个要素")
// featuerInfo = feature.getProperties().features[0].values_.attribute;
// pDiv.innerHTML = ''; //清空popup的内容容器
// addFeatrueInfo(featuerInfo); //在popup中加载当前要素的具体信息
// if (popup.getPosition() == undefined) {
// popup.setPosition(coordinate); //设置popup的位置
// }
// } else { //有多个要素
// //layer.msg("多标记聚合!");
// info_popup.setPosition(undefined);
// }
// } else {
// info_popup.setPosition(undefined);
// }
// } else {
// info_popup.setPosition(undefined);
// }
/******************************************/
});
function addPoint() {
let oneP = new ol.Feature({
geometry: new ol.geom.Point([113.005943, 28.219205])
});
//oneP.set("desc", _desc);
oneP.setStyle(new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
color: '#8959A8',
crossOrigin: 'anonymous',
rotation: 45 * (2 * Math.PI) / 360,
src: webHome + '/common/images/arrow/arrow01.png',
scale: 0.8
})), text: new ol.style.Text({
text: 'A',
scale: 1,
fill: new ol.style.Fill({
color: '#000000'
}),
stroke: new ol.style.Stroke({
color: '#FFFF99',
width: 3.5
})
})
}));
// UserFeature["d_" + _data.eqpid] = oneP;
var mapLayers = new ol.layer.Vector({
source: new ol.source.Vector({
features: [oneP]
}),
zindex: 20
});
map.addLayer(mapLayers);
}
function addText() {
let oneP = new ol.Feature({
geometry: new ol.geom.Point([113.006943, 28.219305])
//geometry: new ol.geom.Circle([113.006943, 28.219305], 20 / map.getView().getProjection().getMetersPerUnit())
});
oneP.on('singleclick', function (evt) {
//var coordinate = evt.coordinate;
alert("aa");
//overlay.setPosition(coordinate);
});
//oneP.set("desc", _desc);
oneP.setStyle(new ol.style.Style({
fill: new ol.style.Fill({
color: '#0a3399CC'
}),
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
color: '#8959A8',
crossOrigin: 'anonymous',
rotation: 45 * (2 * Math.PI) / 360,
src: webHome + '/common/images/point/point01.png',
scale: 0.5
})),
text: new ol.style.Text({
text: '1',
//scale: 1.3,
fill: new ol.style.Fill({
color: '#000000'
}),
stroke: new ol.style.Stroke({
color: '#FFFF99',
width: 3.5
})
})
}));
map.addLayer(new ol.layer.Vector({
source: new ol.source.Vector({
features: [oneP]
}),
zindex: 52
}));
}
// 将方向标注放在线段中间
function direction_labeling_02(res, lineStringForl, coordis, vs, styles) {
for (let i = 0; i < vs.length; i++) {
let line = vs[i]['line'];
let start = line[0];
let end = line[1];
let array_coor = [
(start[0] + end[0]) / 2, (start[1] + end[1]) / 2
];
let d = vs[i]['d'];
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(array_coor),
image: new ol.style.Icon({
src: webHome + '/common/images/arrow/arrow_t.png',
scale: 0.5,
rotateWithView: true,
rotation: -d
})
}))
}
}
function calcD(start, end) {
let dx = end[0] - start[0];
let dy = end[1] - start[1];
let rotation = Math.atan2(dy, dx);
console.log("角度" + rotation);
return rotation;
}
function calcLineStringD(coordis) {
let n = coordis.length;
let vs = [];
for (let i = 0; i < n; i++) {
if (i + 1 < n) {
vs.push({
"line": [coordis[i], coordis[i + 1]],
"d": calcD(coordis[i], coordis[i + 1])
})
}
}
return vs;
}
function addLine() {
let oneP = new ol.Feature({
geometry: new ol.geom.LineString([[113.006943, 28.219305], [113.009943, 28.219605], [113.010943, 28.220305]])
});
map.addLayer(new ol.layer.Vector({
source: new ol.source.Vector({
features: [oneP]
}),
zindex: 22
}));
//oneP.set("desc", _desc);
oneP.setStyle(function (resolution) {
var lineStringForl = resolution.getGeometry();
var coordis = lineStringForl.getCoordinates();
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 10
})
})
];
// 计算线段角度
let vs = calcLineStringD(coordis);
// direction_labeling_01(res, lineStringForl, coordis, vs, styles);
direction_labeling_02(100, lineStringForl, coordis, vs, styles);
return styles;
});
}
function clearDraw() {
drawSource.clear();
FancePoints = new Array();
}
function addInteractions() {
draw = new ol.interaction.Draw({
source: drawSource,
type: "Polygon"
});
//map.removeInteraction(draw);
map.addInteraction(draw);
snap = new ol.interaction.Snap({source: drawSource});
map.addInteraction(snap);
draw.on('drawstart',
function (evt) {
drawSource.clear();
}, this);
draw.on('drawend',
function (evt) {
// set sketch
FancePoints = [];
var geom = evt.feature.getGeometry().getCoordinates()[0];
for (var k = 0; k < geom.length; k++) {
FancePoints[FancePoints.length] = {lon: geom[k][0], lat: geom[k][1]};
}
map.removeInteraction(draw);
showFance();
}, this);
}
function showFance() {
var onePF = null;
var _cos = new Array();
for (var i = 0; i < FancePoints.length; i++) {
_cos[_cos.length] = [FancePoints[i].lon, FancePoints[i].lat];
}
onePF = new ol.Feature({
geometry: new ol.geom.Polygon([_cos])
});
if (onePF != null) {
map.addLayer(new ol.layer.Vector({
source: new ol.source.Vector({
features: [onePF]
}
), style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 0.3)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
}),
zindex: 50
}));
}
}
function getDist(){
//let dis = new ol.Sphere(6378137);
//let _d=dis.haversineDistance([113.006943, 28.219305], [113.009943, 28.219605]);
alert(ol.sphere.getDistance([113.006943, 28.219305], [113.009943, 28.219605]));
}
/* ol.geom.Polygon.createRegularPolygonCurve = function(origin, radius, sides,r,angel) {
var rotation = 360 - r;
var angle = Math.PI * ((1/sides) - (1/2));
if(rotation) {
angle += (rotation / 180) * Math.PI;
}
var rotatedAngle, x, y;
var points = [];
for(var i=0; i<sides; ++i) {
var an = i*((360 - rotation)/360);
rotatedAngle = angle + (an * 2 * Math.PI / sides);
x = origin.x + (radius * Math.cos(rotatedAngle));
y = origin.y + (radius * Math.sin(rotatedAngle));
points.push([x, y]);
}
if(rotation!=0){
points.push([origin]);
}
//var ring = new ol.geom.LinearRing(points);
//ring.rotate(parseFloat(r)+90+parseFloat(angel),origin);
return new ol.geom.Polygon([points]);
};
function getRings (center, radius, startAngle, endAngle, pointNum) {
var sin;
var cos;
var x;
var y;
var angle;
var points = new Array();
points.push(center);
for (var i = 0; i <= pointNum; i++) {
angle = startAngle + (endAngle - startAngle) * i / pointNum;
sin = Math.sin(angle * Math.PI / 180);
cos = Math.cos(angle * Math.PI / 180);
x = center[0] + radius * sin;
y = center[1] + radius * cos;
points[i + 1] = [x, y];
}
var point = points;
point.push(center);
return new ol.geom.Polygon([point]);
}
function addRegularPolygon(){
let oneP = new ol.Feature({
geometry: getRings([113.005943, 28.219205],1000,30,180,100)
});
//oneP.set("desc", _desc);
oneP.setStyle(new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 0.3)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
}));
// UserFeature["d_" + _data.eqpid] = oneP;
var mapLayers = new ol.layer.Vector({
source: new ol.source.Vector({
features: [oneP]
}),
zindex: 20
});
map.addLayer(mapLayers);
} */
/**
* 创建扇形
* @param [x,y] center 扇形中心点
* @param number randius 扇形半径 与中心点对应的坐标系单位
* @param number sAngle 扇形起始边与X轴正方向夹角°
* @param number angle 圆心角°(逆时针方向为正)
* @returns {ol.geom.Polygon}
* @constructor
*/
ol.geom.Sector = function (center, randius, sAngle, angle) {
sAngle = (360 - sAngle + 90) % 360;
var points = [];
points.push(center);
var ep = null;
for (var i = 0; i <= angle; ++i) {
var x = center[0] + randius * Math.cos((sAngle + i) * Math.PI / 180);
var y = center[1] + randius * Math.sin((sAngle + i) * Math.PI / 180);
points.push([x, y]);
}
points.push(center);
return new ol.geom.Polygon([points]);
};
/**
* _id:设备ID
* @param [x,y] _point 扇形中心点
* @param number _bj 扇形半径 m
* @param number sAngle 扇形起始边与X轴正方向夹角°
* @param number angle 圆心角°(逆时针方向为正)
* @returns {ol.geom.Polygon}
* @constructor
*/
function addRegularPolygon(_id,_point, _bj, sAngle, angle,_func){
debugger
let oneP = new ol.Feature({
geometry: new ol.geom.Sector(_point,_bj/ map.getView().getProjection().getMetersPerUnit(),sAngle,angle)
});
//oneP.set("desc", _desc);
oneP.setStyle(new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 0.3)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
})
}));
// UserFeature["d_" + _data.eqpid] = oneP;
var mapLayers = new ol.layer.Vector({
source: new ol.source.Vector({
features: [oneP]
}),
zindex: 20
});
map.addLayer(mapLayers);
//map.addLayer(mapLayers);
//MarkList["tp_" + _id] = mapLayers;
//map.removeLayer(MapRadar[_id]);
//MapRadar[_id] = mapLayers;
//if (MapRadarShow) {
//map.addLayer(mapLayers);
//}
}
//备注:起点=设备角度+圆心角/2 40起点现在是写死的
function addRegularPolygonTest(){
addRegularPolygon("tt1pt",[113.006943, 28.219305], 1500, 40, 90);
}
//聚合
var dataSource=[{"lat":113.006943, "lon":28.219305,"userName":"四方坪","monthYear":"ddddd","code":"110","waterUse":"14521"},{"lat":113.006493, "lon":28.209305,"userName":"四方坪","monthYear":"ddddd","code":"110","waterUse":"14521"}];
var features = new Array(dataSource.length);
for (var i = 0; i < dataSource.length; i++) {
// var coordinate = ol.proj.transform([lat[i], lon[i]], 'EPSG:4326', 'EPSG:3857');
// var coordinate = ol.proj.transform([lat[i], lon[i]], 'EPSG:4326', 'EPSG:4326');
var coordinate = [dataSource[i].lat, dataSource[i].lon];
coordinate.map(parseFloat);
// console.log("转换后经纬度:" + coordinate);
var attr = {
userName: dataSource[i].userName,
lat: dataSource[i].lat,
lon: dataSource[i].lon,
address: dataSource[i].monthYear,
code: dataSource[i].code,
phone: dataSource[i].waterUse,
};
features[i] = new ol.Feature({
geometry: new ol.geom.Point(coordinate),
attribute: attr,
});
}
var source = new ol.source.Vector({
features: features,
});
var clusterSource = new ol.source.Cluster({
distance: 40,
source: source,
});
//加载聚合标注的矢量图层
var styleCache = {};
var layerVetor = new ol.layer.Vector({
source: clusterSource,
style: function(feature, resolution) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = [new ol.style.Style({
image:new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
}),
scale:map.getView().getZoom()/20
}),
// text: new ol.style.Text({
// font: '28px Calibri,sans-serif',
// text: size.toString(),
// fill: new ol.style.Fill({
// color: '#000',
// border: 5,
// width: 30
// })
// })
})];
styleCache[size] = style;
}
return style;
}
});
map.addLayer(layerVetor);
// map.getView().on('change:resolution', function () {
// var style = layerVetor.getStyle();
// // 重新设置图标的缩放率基于层级10来做缩放
// // console.log("塔台标注放大缩小尺寸:"+0.2*(this.getZoom()-13))
// // console.log("地图放大缩小尺寸:"+this.getZoom())
// // console.log("地图放大缩小计算值:"+this.getZoom()/18)
// style.getImage().setScale(this.getZoom()/18);
// mapLayers.setStyle(style);
// })
function addEventListener(){
}
/**
* Format length output.
* @param {module:ol/geom/LineString~LineString} line The line.
* @return {string} The formatted length.
*/
//定义矢量数据源
var source = new ol.source.Vector();
//定义矢量图层
var vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0.2)'
}),
stroke: new ol.style.Stroke({
color: '#e21e0a',
width: 2
}),
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
//将矢量图层添加到地图中
map.addLayer(vector);
//添加比例尺控件
var scaleLineControl = new ol.control.ScaleLine({
units: 'metric',
target: 'scalebar',
className: 'ol-scale-line'
});
map.addControl(scaleLineControl);
//实例化鼠标位置控件
var mousePositionControl = new ol.control.MousePosition({
coodrdinateFormat: ol.coordinate.createStringXY(4),//坐标格式
//地图投影坐标系
projection: new ol.proj.Projection({
code: 'EPSG:4326',//投影编码
units: 'degrees',
axisOrientation: 'neu'
}),
//className:'tip',
target: document.getElementById('tip'),//显示鼠标位置信息的目标容器
undefinedHTML: '&nbsp;'//未定义坐标标记
});
//添加鼠标位置控件
map.addControl(mousePositionControl);
//实例化鹰眼控件
var overviewMapControl = new ol.control.OverviewMap({
//在鹰眼中相同坐标系下不通数据源的图层
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
'url': 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
})
})
],
collapseLabel: '\u00BB',
lable: '\u00AB',
collapsed: false,
});
//添加鹰眼
map.addControl(overviewMapControl);
//创建一个WGS84球体对象
//var wgs84Sphere = new ol.Sphere(6378137);
//创建一个当前要绘制的对象
var sketch = new ol.Feature();
//创建一个帮助提示框对象
var helpTooltipElement;
//创建一个帮助提示信息对象
var helpTooltip;
//创建一个测量提示框对象
var measureTooltipElement;
//创建一个测量提示信息对象
var measureTooltip;
//继续绘制多边形的提示信息
var continuePolygonMsg = '单击以继续绘制多边形';
//继续绘制线段的提示信息
var continueLineMsg = '单击以继续绘制直线';
//鼠标移动触发的函数
var pointerMoveHandler = function (evt) {
//Indicates if the map is currently being dragged.
//Only set for POINTERDRAG and POINTERMOVE events. Default is false.
//如果是平移地图则直接结束
if (evt.dragging) {
return;
}
//帮助提示信息
var helpMsg = '单击开始';
if (sketch) {
//获取绘图对象的几何要素
var geom = sketch.getGeometry();
//如果当前绘制的几何要素是多线段,则将绘制提示信息设置为多线段绘制提示信息
if (geom instanceof ol.geom.Polygon) {
helpMsg = continuePolygonMsg;
} else if (geom instanceof ol.geom.LineString) {
helpMsg = continueLineMsg;
}
}
//设置帮助提示要素的内标签为帮助提示信息
helpTooltipElement.innerHTML = helpMsg;
//设置帮助提示信息的位置
helpTooltip.setPosition(evt.coordinate);
//移除帮助提示要素的隐藏样式
$(helpTooltipElement).removeClass('hidden');
};
//触发pointermove事件
map.on('pointermove', pointerMoveHandler);
//当鼠标移除地图视图的时为帮助提示要素添加隐藏样式
$(map.getViewport()).on('mouseout', function () {
$(helpTooltipElement).addClass('hidden');
});
//获取大地测量复选框
var geodesicCheckbox = document.getElementById('geodesic');
//获取类型
var typeSelect = document.getElementById('type');
//定义一个交互式绘图对象
var draw;
//添加交互式绘图对象的函数
function addInteraction() {
// 获取当前选择的绘制类型
var type = typeSelect.value == 'area' ? 'Polygon' : 'LineString';
//创建一个交互式绘图对象
draw = new ol.interaction.Draw({
//绘制的数据源
source: source,
//绘制类型
type: type,
//样式
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0.2)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0,0,0,0.5)',
lineDash: [10, 10],
width: 2
}),
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(0,0,0,0.7)'
}),
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0.2)'
})
})
})
});
//将交互绘图对象添加到地图中
map.addInteraction(draw);
//创建测量提示框
createMeasureTooltip();
//创建帮助提示框
createHelpTooltip();
//定义一个事件监听
var listener;
//定义一个控制鼠标点击次数的变量
var count = 0;
//绘制开始事件
draw.on('drawstart', function (evt) {
//The feature being drawn.
sketch = evt.feature;
//提示框的坐标
var tooltipCoord = evt.coordinate;
//监听几何要素的change事件
//Increases the revision counter and dispatches a 'change' event.
listener = sketch.getGeometry().on('change', function (evt) {
//The event target.
//获取绘制的几何对象
var geom = evt.target;
//定义一个输出对象,用于记录面积和长度
var output;
if (geom instanceof ol.geom.Polygon) {
map.removeEventListener('singleclick');
map.removeEventListener('dblclick');
//输出多边形的面积
output = formatArea(geom);
//获取多变形内部点的坐标
tooltipCoord = geom.getInteriorPoint().getCoordinates();
} else if (geom instanceof ol.geom.LineString) {
//输出多线段的长度
output = formatLength(geom);
//获取多线段的最后一个点的坐标
tooltipCoord = geom.getLastCoordinate();
}
//设置测量提示框的内标签为最终输出结果
measureTooltipElement.innerHTML = output;
//设置测量提示信息的位置坐标
measureTooltip.setPosition(tooltipCoord);
});
//地图单击事件
map.on('singleclick', function (evt) {
//设置测量提示信息的位置坐标,用来确定鼠标点击后测量提示框的位置
measureTooltip.setPosition(evt.coordinate);
//如果是第一次点击,则设置测量提示框的文本内容为起点
if (count == 0) {
measureTooltipElement.innerHTML = "起点";
}
//根据鼠标点击位置生成一个点
var point = new ol.geom.Point(evt.coordinate);
//将该点要素添加到矢量数据源中
source.addFeature(new ol.Feature(point));
//更改测量提示框的样式,使测量提示框可见
measureTooltipElement.className = 'tooltip tooltip-static';
//创建测量提示框
createMeasureTooltip();
//点击次数增加
count++;
});
//地图双击事件
map.on('dblclick', function (evt) {
var point = new ol.geom.Point(evt.coordinate);
source.addFeature(new ol.Feature(point));
});
}, this);
//绘制结束事件
draw.on('drawend', function (evt) {
count = 0;
//设置测量提示框的样式
measureTooltipElement.className = 'tooltip tooltip-static';
//设置偏移量
measureTooltip.setOffset([0, -7]);
//清空绘制要素
sketch = null;
//清空测量提示要素
measureTooltipElement = null;
//创建测量提示框
createMeasureTooltip();
//移除事件监听
ol.Observable.unByKey(listener);
//移除地图单击事件
map.removeEventListener('singleclick');
}, this);
}
//创建帮助提示框
function createHelpTooltip() {
//如果已经存在帮助提示框则移除
if (helpTooltipElement) {
helpTooltipElement.parentNode.removeChild(helpTooltipElement);
}
//创建帮助提示要素的div
helpTooltipElement = document.createElement('div');
//设置帮助提示要素的样式
helpTooltipElement.className = 'tooltip hidden';
//创建一个帮助提示的覆盖标注
helpTooltip = new ol.Overlay({
element: helpTooltipElement,
offset: [15, 0],
positioning: 'center-left'
});
//将帮助提示的覆盖标注添加到地图中
map.addOverlay(helpTooltip);
}
//创建测量提示框
function createMeasureTooltip() {
//创建测量提示框的div
measureTooltipElement = document.createElement('div');
measureTooltipElement.setAttribute('id', 'lengthLabel');
//设置测量提示要素的样式
measureTooltipElement.className = 'tooltip tooltip-measure';
//创建一个测量提示的覆盖标注
measureTooltip = new ol.Overlay({
element: measureTooltipElement,
offset: [0, -15],
positioning: 'bottom-center'
});
//将测量提示的覆盖标注添加到地图中
map.addOverlay(measureTooltip);
}
//测量类型发生改变时触发事件
typeSelect.onchange = function () {
//移除之前的绘制对象
map.removeInteraction(draw);
//重新进行绘制
addInteraction();
};
//格式化测量长度
var formatLength = function (line) {
//定义长度变量
var length;
//如果大地测量复选框被勾选,则计算球面距离
if (geodesicCheckbox.checked) {
//获取坐标串
var coordinates = line.getCoordinates();
//初始长度为0
length = 0;
//获取源数据的坐标系
var sourceProj = map.getView().getProjection();
//进行点的坐标转换
for (var i = 0; i < coordinates.length - 1; i++) {
//第一个点
var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
//第二个点
var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
//获取转换后的球面距离
//Returns the distance from c1 to c2 using the haversine formula.
//length += wgs84Sphere.haversineDistance(c1, c2);
}
} else {
//计算平面距离
length = Math.round(line.getLength() * 100) / 100;
}
//定义输出变量
var output;
//如果长度大于1000则使用km单位否则使用m单位
if (length > 1000) {
output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km'; //换算成KM单位
} else {
output = (Math.round(length * 100) / 100) + ' ' + 'm'; //m为单位
}
return output;
};
//格式化测量面积
var formatArea = function (polygon) {
//定义面积变量
var area;
//如果大地测量复选框被勾选,则计算球面面积
if (geodesicCheckbox.checked) {
//获取初始坐标系
var sourceProj = map.getView().getProjection();
var geom = polygon.clone().transform(sourceProj, 'EPSG:4326');
//获取多边形的坐标系
var coordinates = geom.getLinearRing(0).getCoordinates();
//获取球面面积
//area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
} else {
//获取平面面积
area = polygon.getArea();
}
//定义输出变量
var output;
//当面积大于10000时转换为平方千米否则为平方米
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km<sup>2</sup>';
} else {
output = (Math.round(area * 100) / 100) + ' ' + 'm<sup>2</sup>';
}
return output;
};
//添加交互绘图对象
addInteraction();
// var formatLength = function(line) {
// var length = getLength(line);
// var output;
// if (length > 100) {
// output = (Math.round(length / 1000 * 100) / 100) +
// ' ' + 'km';
// } else {
// output = (Math.round(length * 100) / 100) +
// ' ' + 'm';
// }
// return output;
// };
// var typeSelect = document.getElementById('map');
// /**
// * Let user change the geometry type.
// */
// typeSelect.onchange = function() {
// map.removeInteraction(draw);
// addInteraction();
// };
// function addlenght() {
// draw = new ol.interaction.Draw({
// source: drawSource,
// type: "LineString",
// style: new ol.style.Style({
// fill: new ol.style.Fill({
// color: 'rgba(255, 255, 255, 0.2)'
// }),
// stroke: new ol.style.Stroke({
// color: 'rgba(0, 0, 0, 0.5)',
// lineDash: [10, 10],
// width: 2
// })
// })
// });
// map.addInteraction(draw);
// snap = new ol.interaction.Snap({source: drawSource});
// map.addInteraction(snap);
// var listener;
// draw.on('drawstart',
// function(evt) {
// sketch = evt.feature;
// var tooltipCoord = evt.coordinate;
// listener = sketch.getGeometry().on('change', function(evt) {
// var geom = evt.target;
// var output;
// output = formatLength(geom);
// tooltipCoord = geom.getLastCoordinate();
// measureTooltipElement.innerHTML = output;
// measureTooltip.setPosition(tooltipCoord);
// }, this);
// });
// draw.on('drawend',
// function(evt) {
// measureTooltipElement.className = 'tooltip tooltip-static';
// measureTooltip.setOffset([0, -7]);
// sketch = null;
// measureTooltipElement = null;
// createMeasureTooltip();
// unByKey(listener);
// }, this);
// // draw.on('drawstart',
// // function (evt) {
// // drawSource.clear();
// // }, this);
// // draw.on('drawend',
// // function (evt) {
// // // set sketch
// // FancePoints = [];
// // var geom = evt.feature.getGeometry().getCoordinates()[0];
// // for (var k = 0; k < geom.length; k++) {
// // FancePoints[FancePoints.length] = {lon: geom[k][0], lat: geom[k][1]};
// // }
// // map.removeInteraction(draw);
// // showFance();
// // }, this);
// }
</script>
</body>
</html>