|
|
|
|
|
//var TDT_API_KEY = "d7b1b7243fce9720e4e1ae73e41a47ad";//天地图库-----梁浩申请的key
|
|
|
|
|
|
var TDT_API_KEY = "489fa3b53cd351877dcf69e9ed899a04";//天地图库-----陈震申请的key
|
|
|
|
|
|
//var TDT_API_KEY = "a4f4b6000cb9d1bf148bb77452000f30";//天地图库-----力研天地图申请的key
|
|
|
|
|
|
var map = null;
|
|
|
|
|
|
var drawSource = null;
|
|
|
|
|
|
var draw, snap;
|
|
|
|
|
|
var MAP_DIV = "map";
|
|
|
|
|
|
var MapIndex = 0;//街道图
|
|
|
|
|
|
var PopupOverlay = null;
|
|
|
|
|
|
var selectTargetType = "";
|
|
|
|
|
|
var selectShipType = "";
|
|
|
|
|
|
var MapIcon = {
|
|
|
|
|
|
arrow_buoy: webHome + "/common/images/arrow/arrow_buoy.png",//20220303增加浮标图片
|
|
|
|
|
|
arrow_def: webHome + "/common/images/arrow/arrow01.png"
|
|
|
|
|
|
, arrow_b: webHome + "/common/images/arrow/arrow_b.png"
|
|
|
|
|
|
// , arrow_r: webHome + "/common/images/arrow/arrow_r.png"//报警
|
|
|
|
|
|
// , arrow_y: webHome + "/common/images/arrow/arrow_y.png"//融合
|
|
|
|
|
|
, arrow_r:'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">'+
|
|
|
|
|
|
'<polygon fill="#FF0000" stroke="#000000" points="25,2 18,14 18,41 20.4,48 29.6,48 32,41 32,14 "/></svg>'//报警
|
|
|
|
|
|
, arrow_y:'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">'+
|
|
|
|
|
|
'<polygon fill="#DFDF20" stroke="#000000" points="25,2 18,14 18,41 20.4,48 29.6,48 32,41 32,14 "/></svg>'//融合
|
|
|
|
|
|
, arrow_b2: webHome + "/common/images/arrow/arrow_b2.png"
|
|
|
|
|
|
, arrow_g: webHome + "/common/images/arrow/arrow_g.png"
|
|
|
|
|
|
, point01: webHome + "/common/images/point/point01.png"
|
|
|
|
|
|
, point02: webHome + "/common/images/point/point02.png"
|
|
|
|
|
|
, point03: webHome + "/common/images/point/point03.png"
|
|
|
|
|
|
, people01: webHome + "/common/images/point/p01.png"
|
|
|
|
|
|
, ship01: webHome + "/common/images/point/ship_b.png"
|
|
|
|
|
|
, ship02: webHome + "/common/images/arrow/arrow01.png"
|
|
|
|
|
|
, map_def: webHome + "/common/images/point/map.png"
|
|
|
|
|
|
, arrow_ld: webHome + "/common/images/arrow/arrow_ld.png"//雷达目标图片 暂时没用上
|
|
|
|
|
|
, arrow_rh: webHome + "/common/images/arrow/arrow_rh.png"//融合目标图片 暂时没用上
|
|
|
|
|
|
// , arrow_ais: webHome + "/common/images/arrow/arrow_ais.png"//ais目标图片
|
|
|
|
|
|
// , arrow_radar: webHome + "/common/images/arrow/arrow_radar.png"//雷达目标图片
|
|
|
|
|
|
, arrow_ais:'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">'+
|
|
|
|
|
|
'<polygon fill="#1AFA29" stroke="#000000" points="25,2 18,14 18,41 20.4,48 29.6,48 32,41 32,14 "/></svg>'//ais目标图片
|
|
|
|
|
|
, arrow_radar:'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">'+
|
|
|
|
|
|
'<polygon fill="#1AFA29" stroke="#000000" points="25,2 18,14 18,41 20.4,48 29.6,48 32,41 32,14 "/></svg>'//雷达目标图片
|
|
|
|
|
|
, arrow_jt: webHome + "/common/images/arrow/arrow_jt.png"//雷达目标图片
|
|
|
|
|
|
};
|
|
|
|
|
|
var BDMap = null;
|
|
|
|
|
|
var MarkList = {};
|
|
|
|
|
|
var MapFence = {};
|
|
|
|
|
|
var MapTarget = {};
|
|
|
|
|
|
var MapTrack = [];
|
|
|
|
|
|
var MapRadar = {};
|
|
|
|
|
|
var MapRadarShow = false;
|
|
|
|
|
|
var MapFenceShow = false;
|
|
|
|
|
|
var MapDevice = {};
|
|
|
|
|
|
var MapObject = {};
|
|
|
|
|
|
var DeviceMap = {};
|
|
|
|
|
|
var TargetMap = {};
|
|
|
|
|
|
var MapType = "";
|
|
|
|
|
|
var MapShow = [0, 1];
|
|
|
|
|
|
//var MapShow = [0, 1];
|
|
|
|
|
|
var MapCallBack = "";
|
|
|
|
|
|
|
|
|
|
|
|
var MapSectorShow = false;
|
|
|
|
|
|
var MapSector = {};//定义扇形数组
|
|
|
|
|
|
|
|
|
|
|
|
var MapLineLenghtShow = false;//测距
|
|
|
|
|
|
|
|
|
|
|
|
var MapTrack_yc = [];//预测位置
|
|
|
|
|
|
|
|
|
|
|
|
function MapIni(_div, _zoom, _click) {
|
|
|
|
|
|
_div = (_div == null ? MAP_DIV : _div);
|
|
|
|
|
|
drawSource = new ol.source.Vector();
|
|
|
|
|
|
map = new ol.Map({
|
|
|
|
|
|
//cvecva,ia,llcia,llcva,llimg
|
|
|
|
|
|
layers: [
|
|
|
|
|
|
/* //本机
|
|
|
|
|
|
new ol.layer.Tile({
|
|
|
|
|
|
source: new ol.source.XYZ({
|
|
|
|
|
|
url: "http://192.168.1.235:9090/mbtiles/index.jsp?mapindex=vecva&zoom={z}&col={x}&row={y}"
|
|
|
|
|
|
})
|
|
|
|
|
|
}),
|
|
|
|
|
|
new ol.layer.Tile({
|
|
|
|
|
|
source: new ol.source.XYZ({
|
|
|
|
|
|
url: "http://192.168.1.235:9090/mbtiles/index.jsp?mapindex=cia&zoom={z}&col={x}&row={y}"
|
|
|
|
|
|
}),
|
|
|
|
|
|
visible: false
|
|
|
|
|
|
}), */
|
|
|
|
|
|
|
|
|
|
|
|
// //局域网---服务器
|
|
|
|
|
|
// new ol.layer.Tile({
|
|
|
|
|
|
// source: new ol.source.XYZ({
|
|
|
|
|
|
// url: "http://192.168.2.235:9090/mbtiles/index.jsp?mapindex=vecva&zoom={z}&col={x}&row={y}"
|
|
|
|
|
|
// //url: "http://9090.haoqi100.top/mbtiles/index.jsp?mapindex=vecva&zoom={z}&col={x}&row={y}"
|
|
|
|
|
|
// })
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// new ol.layer.Tile({
|
|
|
|
|
|
// source: new ol.source.XYZ({
|
|
|
|
|
|
// url: "http://192.168.2.235:9090/mbtiles/index.jsp?mapindex=cia&zoom={z}&col={x}&row={y}"
|
|
|
|
|
|
// //url: "http://9090.haoqi100.top/mbtiles/index.jsp?mapindex=cia&zoom={z}&col={x}&row={y}"
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// visible: false
|
|
|
|
|
|
// }),
|
|
|
|
|
|
|
|
|
|
|
|
// new ol.layer.Tile({
|
|
|
|
|
|
// source: new ol.source.OSM(),//原始地图
|
|
|
|
|
|
// validity: false
|
|
|
|
|
|
// }),
|
|
|
|
|
|
|
|
|
|
|
|
// // // //局域网---岳阳服务器
|
|
|
|
|
|
// new ol.layer.Tile({
|
|
|
|
|
|
// source: new ol.source.XYZ({
|
|
|
|
|
|
// url: window.location.origin.split(":")[0]+":"+window.location.origin.split(":")[1]+":8085/xyz/vector/{z}/{x}/{y}.png"
|
|
|
|
|
|
// //url: "http://192.168.2.235:8085/xyz/vector/{z}/{x}/{y}.png"// 矢量图层
|
|
|
|
|
|
// //url: "http://9090.haoqi100.top/mbtiles/index.jsp?mapindex=vecva&zoom={z}&col={x}&row={y}"
|
|
|
|
|
|
// })
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// new ol.layer.Tile({
|
|
|
|
|
|
// source: new ol.source.XYZ({
|
|
|
|
|
|
// url: "http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDT_API_KEY//天地图
|
|
|
|
|
|
// //url: "http://192.168.2.235:8085/xyz/mark/{z}/{x}/{y}.png"// 标注图层
|
|
|
|
|
|
// //url: "http://9090.haoqi100.top/mbtiles/index.jsp?mapindex=cia&zoom={z}&col={x}&row={y}"
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// visible: false
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// // new ol.layer.Tile({
|
|
|
|
|
|
// // source: new ol.source.XYZ({
|
|
|
|
|
|
// // url: "http://192.168.2.235:9090/xyz/satellite/{z}/{x}/{y}.png"//影像图层
|
|
|
|
|
|
// // //url: "http://9090.haoqi100.top/mbtiles/index.jsp?mapindex=cia&zoom={z}&col={x}&row={y}"
|
|
|
|
|
|
// // }),
|
|
|
|
|
|
// // visible: false
|
|
|
|
|
|
// // }),
|
|
|
|
|
|
// new ol.layer.Tile({
|
|
|
|
|
|
// source: new ol.source.XYZ({
|
|
|
|
|
|
// //url: "http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDT_API_KEY//天地图
|
|
|
|
|
|
// url: window.location.origin.split(":")[0]+":"+window.location.origin.split(":")[1]+":8085/xyz/mark/{z}/{x}/{y}.png"// 标注图层
|
|
|
|
|
|
// //url: "http://192.168.2.235:8085/xyz/mark/{z}/{x}/{y}.png"// 标注图层
|
|
|
|
|
|
// //url: "http://9090.haoqi100.top/mbtiles/index.jsp?mapindex=cia&zoom={z}&col={x}&row={y}"
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// //visible: false
|
|
|
|
|
|
// }),
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//本地
|
|
|
|
|
|
new ol.layer.Tile({
|
|
|
|
|
|
source: new ol.source.XYZ({
|
|
|
|
|
|
url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + TDT_API_KEY//天地图
|
|
|
|
|
|
})
|
|
|
|
|
|
}),
|
|
|
|
|
|
new ol.layer.Tile({
|
|
|
|
|
|
source: new ol.source.XYZ({
|
|
|
|
|
|
url: "http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + TDT_API_KEY//天地图
|
|
|
|
|
|
}),
|
|
|
|
|
|
visible: false
|
|
|
|
|
|
}),
|
|
|
|
|
|
new ol.layer.Tile({
|
|
|
|
|
|
source: new ol.source.XYZ({
|
|
|
|
|
|
url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + TDT_API_KEY//天地图
|
|
|
|
|
|
})
|
|
|
|
|
|
}),
|
|
|
|
|
|
|
|
|
|
|
|
// new ol.layer.Tile({
|
|
|
|
|
|
// source: new ol.source.XYZ({
|
|
|
|
|
|
// url: "http://localhost:8080/MapDownload/vec_w/{z}/{x}/{y}.png"//天地图
|
|
|
|
|
|
// })
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// new ol.layer.Tile({
|
|
|
|
|
|
// source: new ol.source.XYZ({
|
|
|
|
|
|
// url: "http://localhost:8080/MapDownload/img_w/{z}/{x}/{y}.png"//天地图
|
|
|
|
|
|
// }), visible: false
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// new ol.layer.Tile({
|
|
|
|
|
|
// source: new ol.source.XYZ({
|
|
|
|
|
|
// url: "http://localhost:8080/MapDownload/cva_w/{z}/{x}/{y}.png"//天地图
|
|
|
|
|
|
// })
|
|
|
|
|
|
// })
|
|
|
|
|
|
],
|
|
|
|
|
|
target: _div,
|
|
|
|
|
|
view: new ol.View({
|
|
|
|
|
|
projection: 'EPSG:4326',
|
|
|
|
|
|
center: [p.MapCenter[0], p.MapCenter[1]],
|
|
|
|
|
|
zoom: (_zoom != null&&_zoom != "" )? parseInt(_zoom) : 14,
|
|
|
|
|
|
maxZoom: 17
|
|
|
|
|
|
})
|
|
|
|
|
|
});
|
|
|
|
|
|
PopupOverlay = new ol.Overlay({
|
|
|
|
|
|
//设置弹出框的容器
|
|
|
|
|
|
element: $("#popup")[0],
|
|
|
|
|
|
//是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
|
|
|
|
|
|
autoPan: true,
|
|
|
|
|
|
autoPanAnimation: {
|
|
|
|
|
|
duration: 250
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
map.on('pointermove', function (evt) {
|
|
|
|
|
|
var feature = map.forEachFeatureAtPixel(evt.pixel,
|
|
|
|
|
|
function (feature) {
|
|
|
|
|
|
return feature;
|
|
|
|
|
|
});
|
|
|
|
|
|
if (feature) {
|
|
|
|
|
|
feature.dispatchEvent({type: 'pointermove', event: evt});
|
|
|
|
|
|
} else {
|
|
|
|
|
|
//pDiv.hide();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
map.on('singleclick', function (event) {
|
|
|
|
|
|
let isFeature = false;
|
|
|
|
|
|
map.removeOverlay(PopupOverlay);
|
|
|
|
|
|
let feature = map.forEachFeatureAtPixel(event.pixel,
|
|
|
|
|
|
function (feature) {
|
|
|
|
|
|
return feature;
|
|
|
|
|
|
});
|
|
|
|
|
|
if (feature) {
|
|
|
|
|
|
feature.dispatchEvent({type: 'singleclick', event: event});
|
|
|
|
|
|
isFeature = true;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
//pDiv.hide();
|
|
|
|
|
|
}
|
|
|
|
|
|
//map.forEachFeatureAtPixel(event.pixel, feature => {
|
|
|
|
|
|
//为移动到的feature发送自定义的singleclick消息
|
|
|
|
|
|
//isFeature = true;
|
|
|
|
|
|
//feature.dispatchEvent({type: 'singleclick', event: event});
|
|
|
|
|
|
//});
|
|
|
|
|
|
if (!isFeature && _click != null) {
|
|
|
|
|
|
_click();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
map.on("contextmenu", function(event){//新增 鼠标右键点击事件20210625
|
|
|
|
|
|
//debugger
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
rightclickPoint(event.coordinate[0],event.coordinate[1]);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function changeMapType() {
|
|
|
|
|
|
if (MapIndex == 0) {
|
|
|
|
|
|
//切换到影像图
|
|
|
|
|
|
map.getLayers().item(MapShow[MapIndex]).setVisible(false);
|
|
|
|
|
|
MapIndex = 1;
|
|
|
|
|
|
map.getLayers().item(MapShow[MapIndex]).setVisible(true);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
//切换到街道图
|
|
|
|
|
|
map.getLayers().item(MapShow[MapIndex]).setVisible(false);
|
|
|
|
|
|
MapIndex = 0;
|
|
|
|
|
|
map.getLayers().item(MapShow[MapIndex]).setVisible(true);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function toMapCenter(_zoom) {
|
|
|
|
|
|
if (p.MapCenter != null && p.MapCenter.length == 2) {
|
|
|
|
|
|
map.getView().setCenter([p.MapCenter[0], p.MapCenter[1]]);
|
|
|
|
|
|
map.getView().setZoom(_zoom != null ? _zoom : 10);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function toMapCenterByPoint(_point, _zoom) {
|
|
|
|
|
|
if (_point != null && _point.length == 2) {
|
|
|
|
|
|
map.getView().setCenter([_point[0], _point[1]]);
|
|
|
|
|
|
map.getView().setZoom(_zoom != null ? _zoom : 11);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//标注
|
|
|
|
|
|
function addOverlay(_id, _point, _fun) {
|
|
|
|
|
|
let oneP = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.Point(_point)
|
|
|
|
|
|
});
|
|
|
|
|
|
if (_fun != null) {
|
|
|
|
|
|
oneP.on('singleclick', function (evt) {
|
|
|
|
|
|
_fun(evt.coordinate);
|
|
|
|
|
|
//overlay.setPosition(coordinate);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
//oneP.set("desc", _desc);
|
|
|
|
|
|
oneP.setStyle(new ol.style.Style({
|
|
|
|
|
|
image: new ol.style.Icon(({
|
|
|
|
|
|
color: '#8959A8',
|
|
|
|
|
|
crossOrigin: 'anonymous',
|
|
|
|
|
|
rotation: 45 * (2 * Math.PI) / 360,
|
|
|
|
|
|
src: MapIcon.map_def,
|
|
|
|
|
|
scale: 0.8
|
|
|
|
|
|
//scale:1/Math.pow(map.getView().getZoom(), 1/5)//设置图标随层级缩放大小比例 另外一种写法：map.getView().getZoom() / 10
|
|
|
|
|
|
}))
|
|
|
|
|
|
}));
|
|
|
|
|
|
// UserFeature["d_" + _data.eqpid] = oneP;
|
|
|
|
|
|
let mapLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [oneP]
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: MarkList.length
|
|
|
|
|
|
});
|
|
|
|
|
|
map.addLayer(mapLayers);
|
|
|
|
|
|
MarkList["l_" + _id] = mapLayers;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//塔台标注
|
|
|
|
|
|
function addDevice(_id, _point, _img, _text, _angle, _fun) {
|
|
|
|
|
|
let oneP = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.Point(_point)
|
|
|
|
|
|
});
|
|
|
|
|
|
if (_fun != null) {
|
|
|
|
|
|
oneP.on('singleclick', function (evt) {
|
|
|
|
|
|
_fun(evt.coordinate);
|
|
|
|
|
|
//overlay.setPosition(coordinate);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
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: _angle * (2 * Math.PI) / 360,//设置角度
|
|
|
|
|
|
src: _img,//图标
|
|
|
|
|
|
scale: map.getView().getZoom()/22
|
|
|
|
|
|
//scale:1/Math.pow(map.getView().getZoom(), 1/5)//设置图标随层级缩放大小比例 另外一种写法：map.getView().getZoom() / 10
|
|
|
|
|
|
})),
|
|
|
|
|
|
// text: new ol.style.Text({
|
|
|
|
|
|
// text: "" + _text,
|
|
|
|
|
|
// //scale:1/Math.pow(map.getView().getZoom(), 1/10),//设置文字缩放大小
|
|
|
|
|
|
// //scale:map.getView().getZoom() /16,
|
|
|
|
|
|
// //rotation: _angle * (2 * Math.PI) / 360,
|
|
|
|
|
|
// //scale: 1.3,
|
|
|
|
|
|
// fill: new ol.style.Fill({
|
|
|
|
|
|
// color: '#000000'
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// stroke: new ol.style.Stroke({
|
|
|
|
|
|
// color: '#FFFF99',
|
|
|
|
|
|
// width: 3.5
|
|
|
|
|
|
// })
|
|
|
|
|
|
// })
|
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
let mapLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [oneP]
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: MarkList.length + 1
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
if(map!= null){
|
|
|
|
|
|
console.log("进入地图上绑定设备："+getTimeStrfomart(new Date()))
|
|
|
|
|
|
map.addLayer(mapLayers);
|
|
|
|
|
|
MarkList["d_" + _id] = mapLayers;
|
|
|
|
|
|
MapDevice[_id] = mapLayers;
|
|
|
|
|
|
}
|
|
|
|
|
|
map.getView().on('change:resolution', function () {
|
|
|
|
|
|
var style = oneP.getStyle();
|
|
|
|
|
|
// 重新设置图标的缩放率，基于层级10来做缩放
|
|
|
|
|
|
// console.log("塔台标注放大缩小尺寸："+0.2*(this.getZoom()-13))
|
|
|
|
|
|
// console.log("地图放大缩小尺寸："+this.getZoom())
|
|
|
|
|
|
// console.log("地图放大缩小计算值："+this.getZoom()/22)
|
|
|
|
|
|
style.getImage().setScale(this.getZoom()/22);
|
|
|
|
|
|
oneP.setStyle(style);
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
//时间转换-------给调试用
|
|
|
|
|
|
function getTimeStrfomart(_dateObj, _showSend) {
|
|
|
|
|
|
let _timeStr = "";
|
|
|
|
|
|
try {
|
|
|
|
|
|
if (_dateObj != null) {
|
|
|
|
|
|
|
|
|
|
|
|
var month = _dateObj.getMonth() + 1 < 10 ? "0" + (_dateObj.getMonth() + 1) : _dateObj.getMonth() + 1;
|
|
|
|
|
|
var date = _dateObj.getDate() < 10 ? "0" + _dateObj.getDate() : _dateObj.getDate();
|
|
|
|
|
|
_timeStr += (" " + _dateObj.getFullYear() + "-" + month + "-" +date + " ");
|
|
|
|
|
|
_timeStr += (pad(_dateObj.getHours(), 2) + ":" + pad(_dateObj.getMinutes(), 2) + ":" + pad(_dateObj.getSeconds(), 2));
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (e) {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
return _timeStr;
|
|
|
|
|
|
}
|
|
|
|
|
|
//暂时废弃 20211105
|
|
|
|
|
|
function addTarget_old(_id, _point, _img, _angle, _text, _clickfun, _moveFun) {
|
|
|
|
|
|
let oneP = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.Point(_point)
|
|
|
|
|
|
});
|
|
|
|
|
|
if (_clickfun != null) {
|
|
|
|
|
|
oneP.on('singleclick', function (evt) {
|
|
|
|
|
|
_clickfun(_id, evt.coordinate);
|
|
|
|
|
|
//overlay.setPosition(coordinate);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
if (_moveFun != null) {
|
|
|
|
|
|
oneP.on('pointermove', function (evt) {
|
|
|
|
|
|
_moveFun(_id, evt.coordinate);
|
|
|
|
|
|
//overlay.setPosition(coordinate);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
//oneP.set("desc", _desc);
|
|
|
|
|
|
oneP.setStyle(new ol.style.Style({
|
|
|
|
|
|
image: new ol.style.Icon(({
|
|
|
|
|
|
// color: '#8959A8',//此处颜色设置影响到了其他图标颜色显示 暂时去掉20210805 江边测试 增加雷达 ais 图标分别显示
|
|
|
|
|
|
// crossOrigin: 'anonymous',
|
|
|
|
|
|
rotation: _angle * (2 * Math.PI) / 360,
|
|
|
|
|
|
src: _img,
|
|
|
|
|
|
scale: 0.8
|
|
|
|
|
|
//scale:1/Math.pow(map.getView().getZoom(), 1/5)//设置图标随层级缩放大小比例 另外一种写法：map.getView().getZoom() / 10
|
|
|
|
|
|
})), text: new ol.style.Text({
|
|
|
|
|
|
text: "" + _text,
|
|
|
|
|
|
//scale:1/Math.pow(map.getView().getZoom(), 1/10),//设置文字缩放大小
|
|
|
|
|
|
scale: 1,
|
|
|
|
|
|
fill: new ol.style.Fill({
|
|
|
|
|
|
color: '#000000'
|
|
|
|
|
|
}),
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
color: '#FFFF99',
|
|
|
|
|
|
width: 2.5
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
}));
|
|
|
|
|
|
// UserFeature["d_" + _data.eqpid] = oneP;
|
|
|
|
|
|
let mapLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [oneP]
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: MapTarget.length + 101
|
|
|
|
|
|
});
|
|
|
|
|
|
let _sflg = false;
|
|
|
|
|
|
if (((selectTargetType != "" && TargetMap[_id].targetSource == selectTargetType) || selectTargetType == "")
|
|
|
|
|
|
&& ((selectShipType != "" && TargetMap[_id].shipType == selectShipType) || selectShipType == "")) {
|
|
|
|
|
|
_sflg = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (_sflg) {
|
|
|
|
|
|
map.addLayer(mapLayers);
|
|
|
|
|
|
}
|
|
|
|
|
|
MarkList["t_" + _id] = mapLayers;
|
|
|
|
|
|
MapTarget[_id] = mapLayers;
|
|
|
|
|
|
}
|
|
|
|
|
|
function addTarget(_id, _point, _img, _angle, _text, _clickfun, _moveFun) {
|
|
|
|
|
|
let oneP = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.Point(_point)
|
|
|
|
|
|
});
|
|
|
|
|
|
if (_clickfun != null) {
|
|
|
|
|
|
oneP.on('singleclick', function (evt) {
|
|
|
|
|
|
_clickfun(_id, evt.coordinate);
|
|
|
|
|
|
//overlay.setPosition(coordinate);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
if (_moveFun != null) {
|
|
|
|
|
|
oneP.on('pointermove', function (evt) {
|
|
|
|
|
|
_moveFun(_id, evt.coordinate);
|
|
|
|
|
|
//overlay.setPosition(coordinate);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
//增加图标与文字间线条20220112
|
|
|
|
|
|
var styles = [];
|
|
|
|
|
|
var line =createLineStyle(_angle);
|
|
|
|
|
|
var textStyleA =createTextStyleA(_angle,_img);
|
|
|
|
|
|
var textStyleB =createTextStyleB(_text,_angle);
|
|
|
|
|
|
styles.push(textStyleA);
|
|
|
|
|
|
styles.push(line);
|
|
|
|
|
|
styles.push(textStyleB);
|
|
|
|
|
|
// oneP.setStyle(new ol.style.Style({
|
|
|
|
|
|
// image: new ol.style.Icon(({
|
|
|
|
|
|
// // color: '#8959A8',//此处颜色设置影响到了其他图标颜色显示 暂时去掉20210805 江边测试 增加雷达 ais 图标分别显示
|
|
|
|
|
|
// // crossOrigin: 'anonymous',
|
|
|
|
|
|
// rotation: _angle * (2 * Math.PI) / 360,
|
|
|
|
|
|
// src: _img,
|
|
|
|
|
|
// scale: map.getView().getZoom()/18
|
|
|
|
|
|
// //scale: 0.8
|
|
|
|
|
|
// //scale:1/Math.pow(map.getView().getZoom(), 1/5)//设置图标随层级缩放大小比例 另外一种写法：map.getView().getZoom() / 10
|
|
|
|
|
|
// })), text: new ol.style.Text({
|
|
|
|
|
|
// text: "" + _text,
|
|
|
|
|
|
// //scale:1/Math.pow(map.getView().getZoom(), 1/10),//设置文字缩放大小
|
|
|
|
|
|
// //scale: 1,
|
|
|
|
|
|
// scale: map.getView().getZoom()/18,
|
|
|
|
|
|
// fill: new ol.style.Fill({
|
|
|
|
|
|
// color: '#000000'
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// font: 'normal 12px 微软雅黑',
|
|
|
|
|
|
// stroke: new ol.style.Stroke({
|
|
|
|
|
|
// color: '#FFFF99',
|
|
|
|
|
|
// width: 2.5
|
|
|
|
|
|
// })
|
|
|
|
|
|
// })
|
|
|
|
|
|
// }));
|
|
|
|
|
|
// UserFeature["d_" + _data.eqpid] = oneP;
|
|
|
|
|
|
let mapLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [oneP]
|
|
|
|
|
|
}),
|
|
|
|
|
|
style: styles,
|
|
|
|
|
|
zindex: MapTarget.length + 101
|
|
|
|
|
|
});
|
|
|
|
|
|
let _sflg = false;
|
|
|
|
|
|
if (((selectTargetType != "" && TargetMap[_id].targetSource == selectTargetType) || selectTargetType == "")
|
|
|
|
|
|
&& ((selectShipType != "" && TargetMap[_id].shipType == selectShipType) || selectShipType == "")) {
|
|
|
|
|
|
_sflg = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (_sflg) {
|
|
|
|
|
|
map.addLayer(mapLayers);
|
|
|
|
|
|
}
|
|
|
|
|
|
MarkList["t_" + _id] = mapLayers;
|
|
|
|
|
|
MapTarget[_id] = mapLayers;
|
|
|
|
|
|
|
|
|
|
|
|
map.getView().on('change:resolution', function () {
|
|
|
|
|
|
var style = mapLayers.getStyle();
|
|
|
|
|
|
// 重新设置图标的缩放率，基于层级10来做缩放
|
|
|
|
|
|
// console.log("塔台标注放大缩小尺寸："+0.2*(this.getZoom()-13))
|
|
|
|
|
|
// console.log("地图放大缩小尺寸："+this.getZoom())
|
|
|
|
|
|
// console.log("地图放大缩小计算值："+this.getZoom()/18)
|
|
|
|
|
|
style[0].getImage().setScale(this.getZoom()/18);
|
|
|
|
|
|
style[1].getImage().setScale(this.getZoom()/18);
|
|
|
|
|
|
style[2].getText().setScale(this.getZoom()/18);
|
|
|
|
|
|
mapLayers.setStyle(style);
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
//目标方法 20211105增加_points参数 该参数是位置预测数组
|
|
|
|
|
|
function addTargetshow(_id, _point, _img, _angle, _text, _clickfun, _moveFun,_points){
|
|
|
|
|
|
//画线
|
|
|
|
|
|
let oneP = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.Point(_point)
|
|
|
|
|
|
});
|
|
|
|
|
|
let onePs = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.LineString(_points)
|
|
|
|
|
|
});
|
|
|
|
|
|
if (_clickfun != null) {
|
|
|
|
|
|
oneP.on('singleclick', function (evt) {
|
|
|
|
|
|
_clickfun(_id, evt.coordinate);
|
|
|
|
|
|
//overlay.setPosition(coordinate);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
if (_moveFun != null) {
|
|
|
|
|
|
oneP.on('pointermove', function (evt) {
|
|
|
|
|
|
_moveFun(_id, evt.coordinate);
|
|
|
|
|
|
//overlay.setPosition(coordinate);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
var styles = [];
|
|
|
|
|
|
//oneP.set("desc", _desc);
|
|
|
|
|
|
var line =createLineStyle(_angle);
|
|
|
|
|
|
var textStyleA =createTextStyleA(_angle,_img);
|
|
|
|
|
|
var textStyleB =createTextStyleB(_text,_angle);
|
|
|
|
|
|
styles.push(textStyleA);
|
|
|
|
|
|
styles.push(line);
|
|
|
|
|
|
styles.push(textStyleB);
|
|
|
|
|
|
// oneP.setStyle(new ol.style.Style({
|
|
|
|
|
|
// image: new ol.style.Icon(({
|
|
|
|
|
|
// // color: '#8959A8',//此处颜色设置影响到了其他图标颜色显示 暂时去掉20210805 江边测试 增加雷达 ais 图标分别显示
|
|
|
|
|
|
// // crossOrigin: 'anonymous',
|
|
|
|
|
|
// rotation: _angle * (2 * Math.PI) / 360,
|
|
|
|
|
|
// src: _img,
|
|
|
|
|
|
// scale: map.getView().getZoom()/18
|
|
|
|
|
|
// //scale:1/Math.pow(map.getView().getZoom(), 1/5)//设置图标随层级缩放大小比例 另外一种写法：map.getView().getZoom() / 10
|
|
|
|
|
|
// })),
|
|
|
|
|
|
// text: new ol.style.Text({
|
|
|
|
|
|
// text: "" + _text,
|
|
|
|
|
|
// //scale:1/Math.pow(map.getView().getZoom(), 1/10),//设置文字缩放大小
|
|
|
|
|
|
// scale: map.getView().getZoom()/18,
|
|
|
|
|
|
// textAlign: "right", //对齐方式
|
|
|
|
|
|
// textBaseline: "middle", //文本基线
|
|
|
|
|
|
// fill: new ol.style.Fill({
|
|
|
|
|
|
// color: '#fff'
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// //placement:"line",
|
|
|
|
|
|
// //文字样式
|
|
|
|
|
|
// //font: 'normal 12px 微软雅黑',
|
|
|
|
|
|
// stroke: new ol.style.Stroke({
|
|
|
|
|
|
// //color: '#444F60',
|
|
|
|
|
|
// color: 'rgba(0,0,255,0.7)',//#EBF2FE
|
|
|
|
|
|
// width: 12.5,
|
|
|
|
|
|
// lineDash: [100]
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// offsetY: 0,
|
|
|
|
|
|
// offsetX: -30,
|
|
|
|
|
|
// // backgroundFill: new ol.style.Stroke({
|
|
|
|
|
|
// // color: 'rgba(0,0,255,0.7)',
|
|
|
|
|
|
// // }),
|
|
|
|
|
|
// padding: [5, 5, 5, 5],
|
|
|
|
|
|
// //rotation: _angle * (2 * Math.PI) / 360,
|
|
|
|
|
|
// })
|
|
|
|
|
|
// }));
|
|
|
|
|
|
// UserFeature["d_" + _data.eqpid] = oneP;
|
|
|
|
|
|
let mapLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [oneP,onePs]
|
|
|
|
|
|
}),
|
|
|
|
|
|
style: styles,
|
|
|
|
|
|
zindex: MapTarget.length + 101
|
|
|
|
|
|
});
|
|
|
|
|
|
let _sflg = false;
|
|
|
|
|
|
if (((selectTargetType != "" && TargetMap[_id].targetSource == selectTargetType) || selectTargetType == "")
|
|
|
|
|
|
&& ((selectShipType != "" && TargetMap[_id].shipType == selectShipType) || selectShipType == "")) {
|
|
|
|
|
|
_sflg = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
if(_points.length>0){
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onePs.setStyle(function (resolution) {
|
|
|
|
|
|
var lineStringForl = resolution.getGeometry();
|
|
|
|
|
|
var coordis = lineStringForl.getCoordinates();
|
|
|
|
|
|
var styles = [
|
|
|
|
|
|
new ol.style.Style({
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
//lineDash:[10,10new ol.style.,10,10],
|
|
|
|
|
|
//lineDash:[20, 10, 40, 20],
|
|
|
|
|
|
//lineDash:[1,2,3,4,5,6],
|
|
|
|
|
|
color: '#252E3B',
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
}),
|
|
|
|
|
|
})
|
|
|
|
|
|
];
|
|
|
|
|
|
//增加箭头-----暂时去掉，存在bug目标没有线条方向 也会显示箭头。
|
|
|
|
|
|
// var geometry=onePs.getGeometry(); //几何对象:空间坐标信息等
|
|
|
|
|
|
// geometry.forEachSegment(function(start, end) {
|
|
|
|
|
|
// var dx = end[0] - start[0];
|
|
|
|
|
|
// var dy = end[1] - start[1];
|
|
|
|
|
|
// var rotation = Math.atan2(dy, dx);
|
|
|
|
|
|
// // arrows
|
|
|
|
|
|
// styles.push( new ol.style.Style({
|
|
|
|
|
|
// geometry: new ol.geom.Point(end),
|
|
|
|
|
|
// image:new ol.style.Icon({
|
|
|
|
|
|
// src: MapIcon.arrow_jt,
|
|
|
|
|
|
// anchor: [0.75, 0.5],
|
|
|
|
|
|
// rotateWithView: true,
|
|
|
|
|
|
// rotation: -rotation
|
|
|
|
|
|
// })
|
|
|
|
|
|
// }));
|
|
|
|
|
|
// });
|
|
|
|
|
|
return styles;
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
if (_sflg) {
|
|
|
|
|
|
//添加位置预测代码，整合到目标显示一起，放这里是因为目标来源筛选跟船型筛选的时候 位置预测线条可以随目标显示而显示，隐藏而隐藏----------开始20211108（备注：后期优化需要增加位置预测开关按钮，暂）
|
|
|
|
|
|
// if(_points.length>0){
|
|
|
|
|
|
// // for (let i = 0; i < MapTrack_yc.length; i++) {
|
|
|
|
|
|
// // map.removeLayer(MapTrack_yc[i]);
|
|
|
|
|
|
// // }
|
|
|
|
|
|
// // let onePs = new ol.Feature({
|
|
|
|
|
|
// // geometry: new ol.geom.LineString(_points)
|
|
|
|
|
|
// // });
|
|
|
|
|
|
// // let onePLayers = new ol.layer.Vector({
|
|
|
|
|
|
// // source: new ol.source.Vector({
|
|
|
|
|
|
// // features: [onePs]
|
|
|
|
|
|
// // }),
|
|
|
|
|
|
// // zindex: 10
|
|
|
|
|
|
// // });
|
|
|
|
|
|
// // MapTrack_yc[MapTrack_yc.length] = onePLayers;
|
|
|
|
|
|
// // map.addLayer(onePLayers);
|
|
|
|
|
|
// onePs.setStyle(function (resolution) {
|
|
|
|
|
|
// var lineStringForl = resolution.getGeometry();
|
|
|
|
|
|
// var coordis = lineStringForl.getCoordinates();
|
|
|
|
|
|
// var styles = [
|
|
|
|
|
|
// new ol.style.Style({
|
|
|
|
|
|
// stroke: new ol.style.Stroke({
|
|
|
|
|
|
// //lineDash:[10,10,10,10],
|
|
|
|
|
|
// //lineDash:[20, 10, 40, 20],
|
|
|
|
|
|
// //lineDash:[1,2,3,4,5,6],
|
|
|
|
|
|
// color: '#252E3B',
|
|
|
|
|
|
// width: 1,
|
|
|
|
|
|
// })
|
|
|
|
|
|
// })
|
|
|
|
|
|
// ];
|
|
|
|
|
|
|
|
|
|
|
|
// return styles;
|
|
|
|
|
|
// });
|
|
|
|
|
|
// }
|
|
|
|
|
|
//位置预测线------------------结束
|
|
|
|
|
|
|
|
|
|
|
|
//添加目标
|
|
|
|
|
|
map.addLayer(mapLayers);
|
|
|
|
|
|
}
|
|
|
|
|
|
MarkList["t_" + _id] = mapLayers;
|
|
|
|
|
|
MapTarget[_id] = mapLayers;
|
|
|
|
|
|
|
|
|
|
|
|
map.getView().on('change:resolution', function () {
|
|
|
|
|
|
var style = mapLayers.getStyle();
|
|
|
|
|
|
// 重新设置图标的缩放率，基于层级10来做缩放
|
|
|
|
|
|
// console.log("塔台标注放大缩小尺寸："+0.2*(this.getZoom()-13))
|
|
|
|
|
|
// console.log("地图放大缩小尺寸："+this.getZoom())
|
|
|
|
|
|
// console.log("地图放大缩小计算值："+this.getZoom()/18)
|
|
|
|
|
|
style[0].getImage().setScale(this.getZoom()/18);
|
|
|
|
|
|
style[1].getImage().setScale(this.getZoom()/18);
|
|
|
|
|
|
style[2].getText().setScale(this.getZoom()/18);
|
|
|
|
|
|
// var styles = [
|
|
|
|
|
|
// 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
|
|
|
|
|
|
// })
|
|
|
|
|
|
// })
|
|
|
|
|
|
// ];
|
|
|
|
|
|
// style.push(styles);
|
|
|
|
|
|
mapLayers.setStyle(style);
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
function createLineStyle(_angle) {
|
|
|
|
|
|
var canvas = document.createElement('canvas');
|
|
|
|
|
|
canvas.width = 100;
|
|
|
|
|
|
canvas.height = 20;
|
|
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
|
|
|
|
ctx.lineWidth = 1;
|
|
|
|
|
|
ctx.strokeStyle = "#000";
|
|
|
|
|
|
ctx.beginPath(); //新建一条path
|
|
|
|
|
|
ctx.moveTo(20, 0);
|
|
|
|
|
|
ctx.lineTo(50,0);
|
|
|
|
|
|
//画线
|
|
|
|
|
|
ctx.stroke();
|
|
|
|
|
|
//封闭路径
|
|
|
|
|
|
ctx.closePath();
|
|
|
|
|
|
var lineStyle = new ol.style.Style({
|
|
|
|
|
|
image: new ol.style.Icon({
|
|
|
|
|
|
img: canvas,
|
|
|
|
|
|
imgSize: [canvas.width,canvas.height ],
|
|
|
|
|
|
//rotation: _angle * (2 * Math.PI) / 360,
|
|
|
|
|
|
//offset:[0,10]
|
|
|
|
|
|
//rotation: Math.PI/180
|
|
|
|
|
|
})
|
|
|
|
|
|
});
|
|
|
|
|
|
return lineStyle;
|
|
|
|
|
|
}
|
|
|
|
|
|
function createTextStyleA(_angle,_img) {
|
|
|
|
|
|
var mysvg = new Image();
|
|
|
|
|
|
mysvg.src = 'data:image/svg+xml,' + escape(_img);
|
|
|
|
|
|
var style = new ol.style.Style({
|
|
|
|
|
|
image: new ol.style.Icon(({
|
|
|
|
|
|
// color: '#8959A8',//此处颜色设置影响到了其他图标颜色显示 暂时去掉20210805 江边测试 增加雷达 ais 图标分别显示
|
|
|
|
|
|
// crossOrigin: 'anonymous',
|
|
|
|
|
|
rotation: _angle * (2 * Math.PI) / 360,
|
|
|
|
|
|
img: mysvg,
|
|
|
|
|
|
imgSize: [50, 50],
|
|
|
|
|
|
// src: _img,
|
|
|
|
|
|
scale: map.getView().getZoom()/18,
|
|
|
|
|
|
//offset:[0,10]
|
|
|
|
|
|
//scale:1/Math.pow(map.getView().getZoom(), 1/5)//设置图标随层级缩放大小比例 另外一种写法：map.getView().getZoom() / 10
|
|
|
|
|
|
})),
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
return style;
|
|
|
|
|
|
}
|
|
|
|
|
|
function createTextStyleB(_text,_angle) {
|
|
|
|
|
|
var style = new ol.style.Style({
|
|
|
|
|
|
text: new ol.style.Text({
|
|
|
|
|
|
text: "" + _text,
|
|
|
|
|
|
//scale:1/Math.pow(map.getView().getZoom(), 1/10),//设置文字缩放大小
|
|
|
|
|
|
scale: map.getView().getZoom()/18,
|
|
|
|
|
|
textAlign: "right", //对齐方式
|
|
|
|
|
|
textBaseline: "middle", //文本基线
|
|
|
|
|
|
fill: new ol.style.Fill({
|
|
|
|
|
|
color: '#000'
|
|
|
|
|
|
}),
|
|
|
|
|
|
//placement:"line",
|
|
|
|
|
|
//文字样式
|
|
|
|
|
|
font: 'normal 12px 微软雅黑',
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
color: '#EBF2FE',
|
|
|
|
|
|
//color: 'rgba(0,0,255,0.7)',//#EBF2FE
|
|
|
|
|
|
width: 12.5,
|
|
|
|
|
|
lineDash: [100]
|
|
|
|
|
|
}),
|
|
|
|
|
|
//offsetY: 0,
|
|
|
|
|
|
offsetX: -35,
|
|
|
|
|
|
// backgroundFill: new ol.style.Stroke({
|
|
|
|
|
|
// color: 'rgba(0,0,255,0.7)',
|
|
|
|
|
|
// }),
|
|
|
|
|
|
padding: [5, 5, 5, 5],
|
|
|
|
|
|
//rotation: _angle * (2 * Math.PI) / 360,
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
return style;
|
|
|
|
|
|
}
|
|
|
|
|
|
//目标方法 20211105增加_points参数 该参数是位置预测数组
|
|
|
|
|
|
function addTarget_old2(_id, _point, _img, _angle, _text, _clickfun, _moveFun,_points){
|
|
|
|
|
|
//画线
|
|
|
|
|
|
let oneP = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.Point(_point)
|
|
|
|
|
|
});
|
|
|
|
|
|
if (_clickfun != null) {
|
|
|
|
|
|
oneP.on('singleclick', function (evt) {
|
|
|
|
|
|
_clickfun(_id, evt.coordinate);
|
|
|
|
|
|
//overlay.setPosition(coordinate);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
if (_moveFun != null) {
|
|
|
|
|
|
oneP.on('pointermove', function (evt) {
|
|
|
|
|
|
_moveFun(_id, evt.coordinate);
|
|
|
|
|
|
//overlay.setPosition(coordinate);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
//oneP.set("desc", _desc);
|
|
|
|
|
|
oneP.setStyle(new ol.style.Style({
|
|
|
|
|
|
image: new ol.style.Icon(({
|
|
|
|
|
|
// color: '#8959A8',//此处颜色设置影响到了其他图标颜色显示 暂时去掉20210805 江边测试 增加雷达 ais 图标分别显示
|
|
|
|
|
|
// crossOrigin: 'anonymous',
|
|
|
|
|
|
rotation: _angle * (2 * Math.PI) / 360,
|
|
|
|
|
|
src: _img,
|
|
|
|
|
|
scale: map.getView().getZoom()/18
|
|
|
|
|
|
//scale:1/Math.pow(map.getView().getZoom(), 1/5)//设置图标随层级缩放大小比例 另外一种写法：map.getView().getZoom() / 10
|
|
|
|
|
|
})), text: new ol.style.Text({
|
|
|
|
|
|
text: "" + _text,
|
|
|
|
|
|
//scale:1/Math.pow(map.getView().getZoom(), 1/10),//设置文字缩放大小
|
|
|
|
|
|
scale: map.getView().getZoom()/18,
|
|
|
|
|
|
fill: new ol.style.Fill({
|
|
|
|
|
|
color: '#000000'
|
|
|
|
|
|
}),
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
color: '#FFFF99',
|
|
|
|
|
|
width: 2.5
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
}));
|
|
|
|
|
|
// UserFeature["d_" + _data.eqpid] = oneP;
|
|
|
|
|
|
let mapLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [oneP]
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: MapTarget.length + 101
|
|
|
|
|
|
});
|
|
|
|
|
|
let _sflg = false;
|
|
|
|
|
|
if (((selectTargetType != "" && TargetMap[_id].targetSource == selectTargetType) || selectTargetType == "")
|
|
|
|
|
|
&& ((selectShipType != "" && TargetMap[_id].shipType == selectShipType) || selectShipType == "")) {
|
|
|
|
|
|
_sflg = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (_sflg) {
|
|
|
|
|
|
//添加位置预测代码，整合到目标显示一起，放这里是因为目标来源筛选跟船型筛选的时候 位置预测线条可以随目标显示而显示，隐藏而隐藏----------开始20211108（备注：后期优化需要增加位置预测开关按钮，暂）
|
|
|
|
|
|
if(_points.length>0){
|
|
|
|
|
|
// for (let i = 0; i < MapTrack_yc.length; i++) {
|
|
|
|
|
|
// map.removeLayer(MapTrack_yc[i]);
|
|
|
|
|
|
// }
|
|
|
|
|
|
let onePs = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.LineString(_points)
|
|
|
|
|
|
});
|
|
|
|
|
|
let onePLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [onePs]
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: 10
|
|
|
|
|
|
});
|
|
|
|
|
|
MapTrack_yc[MapTrack_yc.length] = onePLayers;
|
|
|
|
|
|
map.addLayer(onePLayers);
|
|
|
|
|
|
onePs.setStyle(function (resolution) {
|
|
|
|
|
|
var lineStringForl = resolution.getGeometry();
|
|
|
|
|
|
var coordis = lineStringForl.getCoordinates();
|
|
|
|
|
|
var styles = [
|
|
|
|
|
|
new ol.style.Style({
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
//lineDash:[10,10,10,10],
|
|
|
|
|
|
//lineDash:[20, 10, 40, 20],
|
|
|
|
|
|
//lineDash:[1,2,3,4,5,6],
|
|
|
|
|
|
color: '#252E3B',
|
|
|
|
|
|
width: 1,
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
return styles;
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
//位置预测线------------------结束
|
|
|
|
|
|
|
|
|
|
|
|
//添加目标
|
|
|
|
|
|
map.addLayer(mapLayers);
|
|
|
|
|
|
}
|
|
|
|
|
|
MarkList["t_" + _id] = mapLayers;
|
|
|
|
|
|
MapTarget[_id] = mapLayers;
|
|
|
|
|
|
|
|
|
|
|
|
map.getView().on('change:resolution', function () {
|
|
|
|
|
|
var style = oneP.getStyle();
|
|
|
|
|
|
// 重新设置图标的缩放率，基于层级10来做缩放
|
|
|
|
|
|
// console.log("塔台标注放大缩小尺寸："+0.2*(this.getZoom()-13))
|
|
|
|
|
|
// console.log("地图放大缩小尺寸："+this.getZoom())
|
|
|
|
|
|
// console.log("地图放大缩小计算值："+this.getZoom()/18)
|
|
|
|
|
|
style.getImage().setScale(this.getZoom()/18);
|
|
|
|
|
|
style.getText().setScale(this.getZoom()/18);
|
|
|
|
|
|
oneP.setStyle(style);
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
//添加雷达范围
|
|
|
|
|
|
function addCircle(_id, _point, _bj, _fun) {
|
|
|
|
|
|
if(map!=null) {
|
|
|
|
|
|
let oneP = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.Circle(_point, _bj / map.getView().getProjection().getMetersPerUnit())
|
|
|
|
|
|
});
|
|
|
|
|
|
oneP.setStyle(new ol.style.Style({
|
|
|
|
|
|
fill: new ol.style.Fill({
|
|
|
|
|
|
color: 'rgba(100,149,237, 0.1)'
|
|
|
|
|
|
}),
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
color: '#ffcc33',
|
|
|
|
|
|
width: 2
|
|
|
|
|
|
})
|
|
|
|
|
|
}));
|
|
|
|
|
|
var mapLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [oneP]
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: 0
|
|
|
|
|
|
});
|
|
|
|
|
|
//map.addLayer(mapLayers);
|
|
|
|
|
|
MarkList["c_" + _id] = mapLayers;
|
|
|
|
|
|
map.removeLayer(MapRadar[_id]);
|
|
|
|
|
|
MapRadar[_id] = mapLayers;
|
|
|
|
|
|
if (MapRadarShow) {
|
|
|
|
|
|
map.addLayer(mapLayers);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
* 创建扇形
|
|
|
|
|
|
* @param [x,y] center 扇形中心点
|
|
|
|
|
|
* @param number randius 扇形半径 与中心点对应的坐标系单位
|
|
|
|
|
|
* @param number sAngle 扇形起始边与X轴正方向夹角° 也就是 起点=设备角度+圆心角/2
|
|
|
|
|
|
* @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轴正方向夹角° 也就是 起点=设备角度+圆心角/2
|
|
|
|
|
|
* @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(MapSector[_id]);
|
|
|
|
|
|
MapSector[_id] = mapLayers;
|
|
|
|
|
|
if (MapSectorShow) {
|
|
|
|
|
|
map.addLayer(mapLayers);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//围栏判断是白名单区域（白色）还是黑名单区域（蓝色）还是水面区域（黄色）--------------最后一个参数(20210830)是 区域默认加载进来显示，地图进来默认不显示
|
|
|
|
|
|
function addFance(_id, _points,type,Show) {
|
|
|
|
|
|
MapFenceShow=Show;
|
|
|
|
|
|
let onePF = null;
|
|
|
|
|
|
let _cos = new Array();
|
|
|
|
|
|
for (var i = 0; i < _points.length; i++) {
|
|
|
|
|
|
_cos[_cos.length] = [_points[i].lon, _points[i].lat];
|
|
|
|
|
|
}
|
|
|
|
|
|
onePF = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.Polygon([_cos])
|
|
|
|
|
|
});
|
|
|
|
|
|
if (onePF != null) {
|
|
|
|
|
|
if(type=="0"||type==null){//0 黑区域 为蓝底
|
|
|
|
|
|
let mapLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [onePF]
|
|
|
|
|
|
}
|
|
|
|
|
|
), style: new ol.style.Style({
|
|
|
|
|
|
fill: new ol.style.Fill({
|
|
|
|
|
|
color: 'rgba(25,25,112, 0.3)'
|
|
|
|
|
|
}),
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
color: '#191970',
|
|
|
|
|
|
width: 1
|
|
|
|
|
|
})
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: 0
|
|
|
|
|
|
});
|
|
|
|
|
|
//map.addLayer(mapLayers);
|
|
|
|
|
|
MarkList["po" + _id] = mapLayers;
|
|
|
|
|
|
MapFence[_id] = mapLayers;
|
|
|
|
|
|
if (MapFenceShow) {
|
|
|
|
|
|
map.addLayer(mapLayers);
|
|
|
|
|
|
}
|
|
|
|
|
|
}else if(type=="1"){//type==1 白区域，围栏区域为白色样式 20210719
|
|
|
|
|
|
let mapLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [onePF]
|
|
|
|
|
|
}
|
|
|
|
|
|
), style: new ol.style.Style({
|
|
|
|
|
|
fill: new ol.style.Fill({
|
|
|
|
|
|
color: 'rgba(221,221,221, 0.3)'
|
|
|
|
|
|
}),
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
color: '#191970',
|
|
|
|
|
|
width: 1
|
|
|
|
|
|
})
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: 0
|
|
|
|
|
|
});
|
|
|
|
|
|
//map.addLayer(mapLayers);
|
|
|
|
|
|
MarkList["po" + _id] = mapLayers;
|
|
|
|
|
|
MapFence[_id] = mapLayers;
|
|
|
|
|
|
if (MapFenceShow) {
|
|
|
|
|
|
map.addLayer(mapLayers);
|
|
|
|
|
|
}
|
|
|
|
|
|
}else{//||type=="2" 2水面 橙色
|
|
|
|
|
|
let mapLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [onePF]
|
|
|
|
|
|
}
|
|
|
|
|
|
), style: new ol.style.Style({
|
|
|
|
|
|
fill: new ol.style.Fill({
|
|
|
|
|
|
color: 'rgba(255,102,0, 0.3)'
|
|
|
|
|
|
}),
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
color: '#191970',
|
|
|
|
|
|
width: 1
|
|
|
|
|
|
})
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: 0
|
|
|
|
|
|
});
|
|
|
|
|
|
//map.addLayer(mapLayers);
|
|
|
|
|
|
MarkList["po" + _id] = mapLayers;
|
|
|
|
|
|
MapFence[_id] = mapLayers;
|
|
|
|
|
|
//默认false 隐藏区域显示
|
|
|
|
|
|
if (MapFenceShow) {
|
|
|
|
|
|
map.addLayer(mapLayers);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//优化后的轨迹样式20210804 待测试
|
|
|
|
|
|
function addTrack(_points) {
|
|
|
|
|
|
map.removeOverlay(PopupOverlay);
|
|
|
|
|
|
//画线
|
|
|
|
|
|
let oneP = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.LineString(_points)
|
|
|
|
|
|
});
|
|
|
|
|
|
let onePLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [oneP]
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: 200
|
|
|
|
|
|
});
|
|
|
|
|
|
map.addLayer(onePLayers);
|
|
|
|
|
|
MapTrack[MapTrack.length] = onePLayers;
|
|
|
|
|
|
//oneP.set("desc", _desc);
|
|
|
|
|
|
|
|
|
|
|
|
var offset=0.001;
|
|
|
|
|
|
var stylesFunction=function () {
|
|
|
|
|
|
let resolution=map.getView().getResolution(); //分辨率:一个像素代表的距离
|
|
|
|
|
|
var geometry = oneP.getGeometry(); //几何对象:空间坐标信息等
|
|
|
|
|
|
var length = geometry.getLength(); //长度:线几何对象的长度
|
|
|
|
|
|
var radio = (300 * resolution) / length; //间隔分之一 分割了多少段
|
|
|
|
|
|
var dradio = 100000000; //投影坐标系，如3857 等，在EPSG:4326下可以设置dradio=10000
|
|
|
|
|
|
// 线段样式
|
|
|
|
|
|
var styles = [
|
|
|
|
|
|
new ol.style.Style({
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
color: '#02BB1A',
|
|
|
|
|
|
width: 10
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
// 添加箭头样式
|
|
|
|
|
|
for (var i = 0; i <= 1; i += radio) {
|
|
|
|
|
|
var arrowLocation = geometry.getCoordinateAt(i);
|
|
|
|
|
|
geometry.forEachSegment(function (start, end) {
|
|
|
|
|
|
if (start[0] == end[0] || start[1] == end[1])
|
|
|
|
|
|
return;
|
|
|
|
|
|
// 暂时不考虑这种情况
|
|
|
|
|
|
// if (start[0] == end[0] || start[1] == end[1]) return;
|
|
|
|
|
|
var dx1 = end[0] - arrowLocation[0];
|
|
|
|
|
|
var dy1 = end[1] - arrowLocation[1];
|
|
|
|
|
|
var dx2 = arrowLocation[0] - start[0];
|
|
|
|
|
|
var dy2 = arrowLocation[1] - start[1];
|
|
|
|
|
|
if (dx1 != dx2 && dy1 != dy2) {
|
|
|
|
|
|
if (Math.abs(dradio * dx1 * dy2 - dradio * dx2 * dy1) < 0.001) {
|
|
|
|
|
|
var dx = end[0] - start[0];
|
|
|
|
|
|
var dy = end[1] - start[1];
|
|
|
|
|
|
var rotation = Math.atan2(dy, dx); // 得到箭头方向角
|
|
|
|
|
|
styles.push(
|
|
|
|
|
|
new ol.style.Style({
|
|
|
|
|
|
geometry: new ol.geom.Point(arrowLocation),
|
|
|
|
|
|
image: new ol.style.Icon({
|
|
|
|
|
|
src: webHome + '/common/images/arrow/arrow_t.png',
|
|
|
|
|
|
anchor: [0.75, 0.5],
|
|
|
|
|
|
scale: 0.5,
|
|
|
|
|
|
rotateWithView: false,
|
|
|
|
|
|
color:'white',
|
|
|
|
|
|
rotation: -rotation
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
return styles;
|
|
|
|
|
|
}
|
|
|
|
|
|
oneP.setStyle(stylesFunction);
|
|
|
|
|
|
// new ol.layer.on('postrender', (evt) => {
|
|
|
|
|
|
// oneP.setStyle(stylesFunction);
|
|
|
|
|
|
// offset+=0.001;
|
|
|
|
|
|
// if(offset>1) offset-=1;
|
|
|
|
|
|
// map.render();
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
//之前的轨迹样式 addTrack_old
|
|
|
|
|
|
function addTrack_old(_points) {
|
|
|
|
|
|
map.removeOverlay(PopupOverlay);
|
|
|
|
|
|
//画线
|
|
|
|
|
|
let oneP = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.LineString(_points)
|
|
|
|
|
|
});
|
|
|
|
|
|
let onePLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [oneP]
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: 200
|
|
|
|
|
|
});
|
|
|
|
|
|
map.addLayer(onePLayers);
|
|
|
|
|
|
MapTrack[MapTrack.length] = onePLayers;
|
|
|
|
|
|
//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: '#02BB1A',
|
|
|
|
|
|
width: 10
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
// 计算线段角度
|
|
|
|
|
|
let vs = calcLineStringD(coordis);
|
|
|
|
|
|
// direction_labeling_01(res, lineStringForl, coordis, vs, styles);
|
|
|
|
|
|
direction_labeling_02(100, lineStringForl, coordis, vs, styles);
|
|
|
|
|
|
|
|
|
|
|
|
return styles;
|
|
|
|
|
|
});
|
|
|
|
|
|
//添加点
|
|
|
|
|
|
for (let i = 0; i < _points.length; i++) {
|
|
|
|
|
|
addTrackText(_points[i], (i + 1));
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function addTrackText(_points, _index) {
|
|
|
|
|
|
let oneP = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.Point(_points)
|
|
|
|
|
|
//geometry: new ol.geom.Circle([113.006943, 28.219305], 20 / map.getView().getProjection().getMetersPerUnit())
|
|
|
|
|
|
});
|
|
|
|
|
|
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: MapIcon.point01,
|
|
|
|
|
|
scale: 0.5
|
|
|
|
|
|
})),
|
|
|
|
|
|
text: new ol.style.Text({
|
|
|
|
|
|
text: "" + _index,
|
|
|
|
|
|
//scale: 1.3,
|
|
|
|
|
|
fill: new ol.style.Fill({
|
|
|
|
|
|
color: '#000000'
|
|
|
|
|
|
}),
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
color: '#FFFF99',
|
|
|
|
|
|
width: 3.5
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
}))
|
|
|
|
|
|
let onePLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [oneP]
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: 210
|
|
|
|
|
|
});
|
|
|
|
|
|
map.addLayer(onePLayers);
|
|
|
|
|
|
MapTrack[MapTrack.length] = onePLayers;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function clearTrack() {
|
|
|
|
|
|
for (let i = 0; i < MapTrack.length; i++) {
|
|
|
|
|
|
map.removeLayer(MapTrack[i]);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//雷达圆形范围
|
|
|
|
|
|
function showRadar() {
|
|
|
|
|
|
MapRadarShow = !MapRadarShow;
|
|
|
|
|
|
$.each(MapRadar, function (key, value) {
|
|
|
|
|
|
map.removeLayer(value);
|
|
|
|
|
|
});
|
|
|
|
|
|
if ($("#t_radar").length > 0 && $("#t_radar").is(':checked')) {
|
|
|
|
|
|
MapRadarShow = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (($("#t_radar").length > 0 && $("#t_radar").is(':checked')) || MapRadarShow) {
|
|
|
|
|
|
$.each(MapRadar, function (key, value) {
|
|
|
|
|
|
map.addLayer(value);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//雷达扇形范围
|
|
|
|
|
|
function showRadar2() {
|
|
|
|
|
|
//debugger
|
|
|
|
|
|
MapSectorShow = !MapSectorShow;
|
|
|
|
|
|
$.each(MapSector, function (key, value) {
|
|
|
|
|
|
map.removeLayer(value);
|
|
|
|
|
|
});
|
|
|
|
|
|
if ($("#t_radar").length > 0 && $("#t_radar").is(':checked')) {
|
|
|
|
|
|
MapSectorShow = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (($("#t_radar").length > 0 && $("#t_radar").is(':checked')) || MapSectorShow) {
|
|
|
|
|
|
$.each(MapSector, function (key, value) {
|
|
|
|
|
|
map.addLayer(value);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function showFance() {
|
|
|
|
|
|
MapFenceShow = !MapFenceShow;
|
|
|
|
|
|
$.each(MapFence, function (key, value) {
|
|
|
|
|
|
map.removeLayer(value);
|
|
|
|
|
|
});
|
|
|
|
|
|
if ($("#t_fance").length > 0 && $("#t_fance").is(':checked')) {
|
|
|
|
|
|
MapFenceShow = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (($("#t_fance").length > 0 && $("#t_fance").is(':checked')) || MapFenceShow) {
|
|
|
|
|
|
$.each(MapFence, function (key, value) {
|
|
|
|
|
|
map.addLayer(value);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function showFance2() {
|
|
|
|
|
|
$.each(MapFence, function (key, value) {
|
|
|
|
|
|
map.removeLayer(value);
|
|
|
|
|
|
});
|
|
|
|
|
|
if ($("#t_fance").is(':checked')) {
|
|
|
|
|
|
$.each(MapFence, function (key, value) {
|
|
|
|
|
|
map.addLayer(value);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
function showTarget(_id) {
|
|
|
|
|
|
_id = (_id != null && _id != "") ? _id : "t_target";
|
|
|
|
|
|
$.each(MapTarget, function (key, value) {
|
|
|
|
|
|
if (value != null) {
|
|
|
|
|
|
map.removeLayer(value);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
if ($("#" + _id).is(':checked')) {
|
|
|
|
|
|
$.each(MapTarget, function (key, value) {
|
|
|
|
|
|
if (value != null) {
|
|
|
|
|
|
map.addLayer(value);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//
|
|
|
|
|
|
function showTargetByType(_type, _targets) {
|
|
|
|
|
|
selectTargetType = _type;
|
|
|
|
|
|
$.each(MapTarget, function (key, value) {
|
|
|
|
|
|
if (value != null) {
|
|
|
|
|
|
map.removeLayer(value);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
$.each(_targets, function (key, value) {
|
|
|
|
|
|
if (value != null) {
|
|
|
|
|
|
if ((value.targetSource == _type || _type == "") && (value.shipType == selectShipType || selectShipType == "")) {
|
|
|
|
|
|
if(MapTarget[value.targetCode]!=undefined&&MapTarget[value.targetCode]!=null) {
|
|
|
|
|
|
map.addLayer(MapTarget[value.targetCode]);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
map.removeOverlay(PopupOverlay);
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function showTargetByShipType(_type, _targets) {
|
|
|
|
|
|
selectShipType = _type;
|
|
|
|
|
|
//selectTargetType=p.DicMap.shiptype[_type].dictLabel;
|
|
|
|
|
|
$.each(MapTarget, function (key, value) {
|
|
|
|
|
|
if (value != null) {
|
|
|
|
|
|
map.removeLayer(value);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
$.each(_targets, function (key, value) {
|
|
|
|
|
|
if (value != null) {
|
|
|
|
|
|
// if ((value.shipType == _type || _type == "") && (value.targetSource == selectTargetType || selectTargetType == "")) {
|
|
|
|
|
|
// map.addLayer(MapTarget[value.targetCode]);
|
|
|
|
|
|
// }
|
|
|
|
|
|
//船型增加筛选条件 从船舶库里面进行匹配船型20210715
|
|
|
|
|
|
if (((value.shipType == _type || _type == "") && (value.targetSource == selectTargetType || selectTargetType == ""))||(value.gtShipInfo!=null&&value.gtShipInfo.minotype==p.DicMap.shiptype[_type].dictLabel)) {
|
|
|
|
|
|
if(MapTarget[value.targetCode]!=undefined&&MapTarget[value.targetCode]!=null) {
|
|
|
|
|
|
map.addLayer(MapTarget[value.targetCode]);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
map.removeOverlay(PopupOverlay);
|
|
|
|
|
|
}
|
|
|
|
|
|
//判断坐标点是否在围栏里面，并且还要在黑名单也就是蓝色区域围栏中才报警，白区域不变色，水面区域不在地图上显示
|
|
|
|
|
|
function checkPointInFance(_point) {
|
|
|
|
|
|
let isIn = false;
|
|
|
|
|
|
$.each(MapFence, function (key, value) {
|
|
|
|
|
|
if (value.getSource().getFeatures()[0].getGeometry().containsXY(_point[0], _point[1])&&value.style_.fill_.color_=="rgba(25,25,112, 0.3)") {
|
|
|
|
|
|
isIn = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
return isIn;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 将方向标注放在线段中间
|
|
|
|
|
|
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) {
|
|
|
|
|
|
if (start[0] == end[0] || start[1] == end[1])
|
|
|
|
|
|
return;
|
|
|
|
|
|
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 clearDraw() {
|
|
|
|
|
|
drawSource.clear();
|
|
|
|
|
|
FancePoints = new Array();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function addInteractions(_fun) {
|
|
|
|
|
|
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);
|
|
|
|
|
|
if (_fun != null) {
|
|
|
|
|
|
_fun(FancePoints);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
addFance(_id, FancePoints);
|
|
|
|
|
|
}
|
|
|
|
|
|
clearDraw();
|
|
|
|
|
|
//showFance();
|
|
|
|
|
|
}, this);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//增加测距功能
|
|
|
|
|
|
|
|
|
|
|
|
// //点击测距方法
|
|
|
|
|
|
function showlineLength(){
|
|
|
|
|
|
//debugger
|
|
|
|
|
|
MapLineLenghtShow = !MapLineLenghtShow;
|
|
|
|
|
|
if ($("#t_linelength").length > 0 && $("#t_linelength").is(':checked')) {
|
|
|
|
|
|
MapLineLenghtShow = true;
|
|
|
|
|
|
//$("#t_linelength").parent().addClass("active");
|
|
|
|
|
|
}
|
|
|
|
|
|
if (($("#t_linelength").length > 0 && $("#t_linelength").is(':checked')) || MapLineLenghtShow) {
|
|
|
|
|
|
measure();
|
|
|
|
|
|
}
|
|
|
|
|
|
else {
|
|
|
|
|
|
//clear();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//测距开始
|
|
|
|
|
|
function measure() {
|
|
|
|
|
|
// 已绘制的坐标集合
|
|
|
|
|
|
var drawCoordinateArr = []
|
|
|
|
|
|
//定义一个控制鼠标点击次数的变量
|
|
|
|
|
|
var count = 0;
|
|
|
|
|
|
var listener;
|
|
|
|
|
|
//创建一个当前要绘制的对象
|
|
|
|
|
|
var sketch;
|
|
|
|
|
|
//创建一个WGS84球体对象
|
|
|
|
|
|
//var wgs84Sphere = new ol.sphere(6378137);
|
|
|
|
|
|
//创建一个帮助提示框对象
|
|
|
|
|
|
var helpTooltipElement;
|
|
|
|
|
|
//创建一个帮助提示信息对象
|
|
|
|
|
|
var helpTooltip;
|
|
|
|
|
|
//创建一个测量提示框对象
|
|
|
|
|
|
var measureTooltipElement;
|
|
|
|
|
|
//创建一个测量提示信息对象
|
|
|
|
|
|
var measureTooltip;
|
|
|
|
|
|
//继续绘制多边形的提示信息
|
|
|
|
|
|
var continuePolygonMsg;
|
|
|
|
|
|
//继续绘制线段的提示信息
|
|
|
|
|
|
var continueLineMsg;
|
|
|
|
|
|
//帮助提示信息
|
|
|
|
|
|
var helpMsg;
|
|
|
|
|
|
//定义矢量数据源
|
|
|
|
|
|
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',
|
|
|
|
|
|
}),
|
|
|
|
|
|
}),
|
|
|
|
|
|
}),
|
|
|
|
|
|
});
|
|
|
|
|
|
sketch = new ol.Feature();
|
|
|
|
|
|
// continuePolygonMsg = 'Click to continue drawing the polygon';
|
|
|
|
|
|
// continueLineMsg = 'Click to continue drawing the line';
|
|
|
|
|
|
//将矢量图层添加到地图中
|
|
|
|
|
|
map.removeLayer(vector);
|
|
|
|
|
|
map.addLayer(vector);
|
|
|
|
|
|
//添加比例尺控件
|
|
|
|
|
|
// map.removeControl(scaleLineControl);
|
|
|
|
|
|
// map.addControl(scaleLineControl);
|
|
|
|
|
|
//鼠标移动触发的函数
|
|
|
|
|
|
var pointerMoveHandler = function (evt) {
|
|
|
|
|
|
//如果是平移地图则直接结束
|
|
|
|
|
|
if (evt.dragging) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
//帮助提示信息
|
|
|
|
|
|
//helpMsg = 'Click to start drawing';
|
|
|
|
|
|
if (sketch) {
|
|
|
|
|
|
//获取绘图对象的几何要素
|
|
|
|
|
|
var geom = sketch.getGeometry();
|
|
|
|
|
|
//如果当前绘制的几何要素是多线段，则将绘制提示信息设置为多线段绘制提示信息
|
|
|
|
|
|
// if (geom instanceof ol.geom.Polygon) {
|
|
|
|
|
|
// helpMsg = continuePolygonMsg;
|
|
|
|
|
|
// } else if (geom instanceof ol.geom.LineString) {
|
|
|
|
|
|
// helpMsg = continueLineMsg;
|
|
|
|
|
|
// }
|
|
|
|
|
|
}
|
|
|
|
|
|
//设置帮助提示要素的内标签为帮助提示信息
|
|
|
|
|
|
// if (helpTooltipElement)
|
|
|
|
|
|
// helpTooltipElement.innerHTML = helpMsg;
|
|
|
|
|
|
//设置帮助提示信息的位置
|
|
|
|
|
|
// if (helpTooltip)
|
|
|
|
|
|
helpTooltip.setPosition(evt.coordinate);
|
|
|
|
|
|
//移除帮助提示要素的隐藏样式
|
|
|
|
|
|
// $(helpTooltipElement).removeClass('hidden');
|
|
|
|
|
|
removeClass(document.getElementsByClassName('tooltip')[0], 'hidden');
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
//触发pointermove事件
|
|
|
|
|
|
map.on('pointermove', pointerMoveHandler);
|
|
|
|
|
|
|
|
|
|
|
|
//当鼠标移除地图视图的时为帮助提示要素添加隐藏样式
|
|
|
|
|
|
document.querySelector('.ol-viewport').onmouseout = function () {
|
|
|
|
|
|
addClass(document.getElementsByClassName('tooltip')[0], 'hidden');
|
|
|
|
|
|
};
|
|
|
|
|
|
// 判断class有无
|
|
|
|
|
|
function hasClass(ele, cls) {
|
|
|
|
|
|
if (ele) {
|
|
|
|
|
|
cls = cls || '';
|
|
|
|
|
|
if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
|
|
|
|
|
|
return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//添加class
|
|
|
|
|
|
function addClass(ele, cls) {
|
|
|
|
|
|
if (!hasClass(ele, cls) && ele) {
|
|
|
|
|
|
ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 去除class
|
|
|
|
|
|
function removeClass(ele, cls) {
|
|
|
|
|
|
if (hasClass(ele, cls) && ele) {
|
|
|
|
|
|
var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
|
|
|
|
|
|
while (newClass.indexOf(' ' + cls + ' ') >= 0) {
|
|
|
|
|
|
newClass = newClass.replace(' ' + cls + ' ', ' ');
|
|
|
|
|
|
}
|
|
|
|
|
|
ele.className = newClass.replace(/^\s+|\s+$/g, '');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
//定义一个交互式绘图对象
|
|
|
|
|
|
var draw;
|
|
|
|
|
|
//添加交互式绘图对象的函数
|
|
|
|
|
|
function addInteraction() {
|
|
|
|
|
|
//创建一个交互式绘图对象
|
|
|
|
|
|
draw = new ol.interaction.Draw({
|
|
|
|
|
|
//绘制的数据源
|
|
|
|
|
|
source: source,
|
|
|
|
|
|
//绘制类型
|
|
|
|
|
|
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,
|
|
|
|
|
|
}),
|
|
|
|
|
|
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;
|
|
|
|
|
|
|
|
|
|
|
|
//绘制开始事件
|
|
|
|
|
|
draw.on(
|
|
|
|
|
|
'drawstart',
|
|
|
|
|
|
function (evt) {
|
|
|
|
|
|
//$("#deletePoint-"+count).bind('click', deleteClick);
|
|
|
|
|
|
//document.removeEventListener('click', deleteClick);
|
|
|
|
|
|
count++;
|
|
|
|
|
|
//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);
|
|
|
|
|
|
//Return an interior point of the polygon.
|
|
|
|
|
|
//获取多变形内部点的坐标
|
|
|
|
|
|
tooltipCoord = geom.getInteriorPoint().getCoordinates();
|
|
|
|
|
|
} else if (geom instanceof ol.geom.LineString) {
|
|
|
|
|
|
//输出多线段的长度
|
|
|
|
|
|
output = formatLength(geom);
|
|
|
|
|
|
//Return the last coordinate of the geometry.
|
|
|
|
|
|
//获取多线段的最后一个点的坐标
|
|
|
|
|
|
tooltipCoord = geom.getLastCoordinate();
|
|
|
|
|
|
}
|
|
|
|
|
|
//设置测量提示框的内标签为最终输出结果
|
|
|
|
|
|
// if (measureTooltipElement)
|
|
|
|
|
|
measureTooltipElement.innerHTML = output;
|
|
|
|
|
|
//设置测量提示信息的位置坐标
|
|
|
|
|
|
// if (measureTooltip)
|
|
|
|
|
|
measureTooltip.setPosition(tooltipCoord);
|
|
|
|
|
|
|
|
|
|
|
|
//setToolStyle(measureTooltipElement);
|
|
|
|
|
|
});
|
|
|
|
|
|
// //地图单击事件
|
|
|
|
|
|
// map.on('singleclick', function (evt) {
|
|
|
|
|
|
// //设置测量提示信息的位置坐标，用来确定鼠标点击后测量提示框的位置
|
|
|
|
|
|
// // if (measureTooltip)
|
|
|
|
|
|
// measureTooltip.setPosition(evt.coordinate);
|
|
|
|
|
|
// //如果是第一次点击，则设置测量提示框的文本内容为起点
|
|
|
|
|
|
// if (count == 0 && measureTooltipElement) {
|
|
|
|
|
|
// 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';
|
|
|
|
|
|
// //Set the offset for this overlay.
|
|
|
|
|
|
// //设置偏移量
|
|
|
|
|
|
// measureTooltip.setOffset([0, -7]);
|
|
|
|
|
|
// //清空绘制要素
|
|
|
|
|
|
// sketch = null;
|
|
|
|
|
|
// //清空测量提示要素
|
|
|
|
|
|
// measureTooltipElement = null;
|
|
|
|
|
|
// //创建测量提示框
|
|
|
|
|
|
// createMeasureTooltip();
|
|
|
|
|
|
// //Removes an event listener using the key returned by on() or once().
|
|
|
|
|
|
// //移除事件监听
|
|
|
|
|
|
ol.Observable.unByKey(listener);
|
|
|
|
|
|
// //移除地图单击事件
|
|
|
|
|
|
// map.removeEventListener('singleclick');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const coordinates = evt.feature.getGeometry().getCoordinates()
|
|
|
|
|
|
evt.feature.set('tempdata', count);
|
|
|
|
|
|
drawCoordinateArr.push(coordinates);
|
|
|
|
|
|
drawPoint(coordinates);
|
|
|
|
|
|
$("#deletePoint-"+count).bind('click', deleteClick);
|
|
|
|
|
|
clearDraws();
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
this
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
function drawPoint (coordinates) {
|
|
|
|
|
|
const tempArr = []
|
|
|
|
|
|
for (let i = 0; i < coordinates.length; i++) {
|
|
|
|
|
|
tempArr.push(coordinates[i])
|
|
|
|
|
|
if (i === 0) {
|
|
|
|
|
|
createDom(coordinates[i], '起点', i, coordinates, count)
|
|
|
|
|
|
} else {
|
|
|
|
|
|
createDom(coordinates[i], formatLength(new ol.geom.LineString(tempArr)), i, coordinates, count)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 绘制之后放置测量内容
|
|
|
|
|
|
function createDom (point, inner, i, coordinates, count) {
|
|
|
|
|
|
console.log(point, inner, i, coordinates, count)
|
|
|
|
|
|
// 设置测量提示信息的位置坐标，用来确定鼠标点击后测量提示框的位置
|
|
|
|
|
|
measureTooltip.setPosition(point);
|
|
|
|
|
|
measureTooltipElement.innerHTML = inner +
|
|
|
|
|
|
// `<img class="deletePoint" id="deletePoint-${lengthMeasureCount}-${i}" tempimgdata="${lengthMeasureCount}" src="${deletePoint}" style="width: 15px;padding-left: 5px;" />` +
|
|
|
|
|
|
// (i === coordinates.length - 1 ? `<img class="deleteLine" id="deleteLine${lengthMeasureCount}" tempimgdata="${lengthMeasureCount}" src="${deleteLineArea}" style="width: 20px;padding-left: 5px;" />` : '')
|
|
|
|
|
|
`<img class="deletePoint" id="deletePoint-${count}" tempimgdata="${count}" src="/yyyzweb/common/images/yuntai/delete_icon.png" style="width: 20px;padding-left: 5px;padding-bottom: 2px;" />`;
|
|
|
|
|
|
// (i === coordinates.length - 1 ? `<img class="deleteLine" id="deleteLine${count}" tempimgdata="${count}" src="/yyyzweb/common/images/yuntai/up_icon.png" style="width: 20px;padding-left: 5px;" />` : '');
|
|
|
|
|
|
measureTooltipElement.parentNode.style.zIndex = i;
|
|
|
|
|
|
measureTooltipElement.className = 'tooltip tooltip-static';
|
|
|
|
|
|
// 创建测量提示框
|
|
|
|
|
|
if (i === coordinates.length - 1) {
|
|
|
|
|
|
createMeasureTooltip(count, true);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
createMeasureTooltip('', true);
|
|
|
|
|
|
}
|
|
|
|
|
|
// 给所有测量提示框设置样式
|
|
|
|
|
|
// document.querySelectorAll('.tooltip.tooltip-static').forEach(n => {
|
|
|
|
|
|
// setToolStyle(n);
|
|
|
|
|
|
// })
|
|
|
|
|
|
// setToolStyle(measureTooltipElement)
|
|
|
|
|
|
|
|
|
|
|
|
// 根据鼠标点击位置生成一个点
|
|
|
|
|
|
const pointLine = new ol.geom.Point(coordinates[i]);
|
|
|
|
|
|
let onePF = null;
|
|
|
|
|
|
onePF = new ol.Feature({
|
|
|
|
|
|
geometry: pointLine
|
|
|
|
|
|
});
|
|
|
|
|
|
// 将该点要素添加到矢量数据源中
|
|
|
|
|
|
const tempLayer = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [onePF]
|
|
|
|
|
|
}),
|
|
|
|
|
|
//style,
|
|
|
|
|
|
tempdata: count,
|
|
|
|
|
|
updateWhileAnimating: true
|
|
|
|
|
|
})
|
|
|
|
|
|
map.addLayer(tempLayer);
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
function clearDraws () {
|
|
|
|
|
|
measureTooltipElement.innerHTML = ('总长：') + measureTooltipElement.innerHTML;
|
|
|
|
|
|
measureTooltipElement.className = 'ol-tooltip ol-tooltip-static measureNum';
|
|
|
|
|
|
setToolStyle(measureTooltipElement);
|
|
|
|
|
|
measureTooltip.setOffset([0, -7]);
|
|
|
|
|
|
// unset sketch
|
|
|
|
|
|
sketch = null
|
|
|
|
|
|
// unset tooltip so that a new one can be created
|
|
|
|
|
|
measureTooltipElement = null;
|
|
|
|
|
|
createMeasureTooltip();
|
|
|
|
|
|
//移除事件监听
|
|
|
|
|
|
ol.Observable.unByKey(listener);
|
|
|
|
|
|
map.un('pointermove', pointerMoveHandler);
|
|
|
|
|
|
map.removeInteraction(draw);
|
|
|
|
|
|
helpTooltipElement.classList.add('hidden');
|
|
|
|
|
|
}
|
|
|
|
|
|
// 点击测距的删除
|
|
|
|
|
|
function deleteClick (e) {
|
|
|
|
|
|
const target = e.target;
|
|
|
|
|
|
const eIndex = target.getAttribute('tempimgdata');
|
|
|
|
|
|
deleteLayers(eIndex, target);
|
|
|
|
|
|
drawCoordinateArr[parseInt(eIndex) - 1] = [];
|
|
|
|
|
|
// if (target.className === 'deleteLine') {
|
|
|
|
|
|
// deleteLayers(eIndex);
|
|
|
|
|
|
// drawCoordinateArr[parseInt(eIndex) - 1] = [];
|
|
|
|
|
|
// } else if (target.className === 'deletePoint') {
|
|
|
|
|
|
// deleteLayers(eIndex, target);
|
|
|
|
|
|
// }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 删除某个点之后重新测量距离
|
|
|
|
|
|
function drawFresh (eIndex) {
|
|
|
|
|
|
console.log(eIndex)
|
|
|
|
|
|
const coordinates = drawCoordinateArr[parseInt(eIndex) - 1];
|
|
|
|
|
|
const lineString = new LineString(coordinates);
|
|
|
|
|
|
// 将该点要素添加到矢量数据源中
|
|
|
|
|
|
const tempLayer = new ol.layer.Vector({
|
|
|
|
|
|
source: new new ol.source.Vector({
|
|
|
|
|
|
features: [
|
|
|
|
|
|
new Feature({
|
|
|
|
|
|
geometry: lineString
|
|
|
|
|
|
})
|
|
|
|
|
|
]
|
|
|
|
|
|
}),
|
|
|
|
|
|
style,
|
|
|
|
|
|
tempdata: eIndex,
|
|
|
|
|
|
updateWhileAnimating: true
|
|
|
|
|
|
})
|
|
|
|
|
|
map.addLayer(tempLayer);
|
|
|
|
|
|
const tempArr = []
|
|
|
|
|
|
for (let i = 0; i < coordinates.length; i++) {
|
|
|
|
|
|
tempArr.push(coordinates[i])
|
|
|
|
|
|
if (i === 0) {
|
|
|
|
|
|
createDom(coordinates[i], '起点', i, coordinates, eIndex)
|
|
|
|
|
|
} else {
|
|
|
|
|
|
createDom(coordinates[i], formatLength(mapView, new LineString(tempArr)), i, coordinates, eIndex)
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 删除当前点击的图层
|
|
|
|
|
|
function deleteLayers (eIndex, target) {
|
|
|
|
|
|
const overlaysArr = map.getOverlays().getArray();
|
|
|
|
|
|
const layersArr = map.getLayers().getArray();
|
|
|
|
|
|
// 先把需要删除的Overlays存在一个数组中
|
|
|
|
|
|
// 如果不储存直接去删除Overlays就会出现需要删除却识别不到的图层
|
|
|
|
|
|
const deleteOverlayArr = [];
|
|
|
|
|
|
const deleteLayerArr = [];
|
|
|
|
|
|
for (let i = 0; i < overlaysArr.length; i++) {
|
|
|
|
|
|
const lastChild = overlaysArr[i].values_.element?.lastChild;
|
|
|
|
|
|
if (lastChild?.id && lastChild?.getAttribute('tempimgdata') === eIndex) {
|
|
|
|
|
|
deleteOverlayArr.push(overlaysArr[i]);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
map.getLayers().getArray().forEach((n, i) => {
|
|
|
|
|
|
if (n.getSource() && n instanceof ol.layer.Vector && n.getSource().getFeatures()[0] && n.getSource().getFeatures()[0].get('tempdata') && n.getSource().getFeatures()[0].get('tempdata').toString() === eIndex) {
|
|
|
|
|
|
deleteLayerArr.push(n);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
for (let i = 0; i < layersArr.length; i++) {
|
|
|
|
|
|
if (layersArr[i].values_.tempdata && layersArr[i].values_.tempdata.toString() === eIndex) {
|
|
|
|
|
|
deleteLayerArr.push(layersArr[i])
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// 单独处理需要删除的Overlays和Layers
|
|
|
|
|
|
deleteOverlayArr.forEach(n => map.removeOverlay(n));
|
|
|
|
|
|
deleteLayerArr.forEach(n => map.removeLayer(n));
|
|
|
|
|
|
// 删除之后重新画
|
|
|
|
|
|
if (target) {
|
|
|
|
|
|
const index = target.id.split('-');
|
|
|
|
|
|
drawCoordinateArr[parseInt(index[1]) - 1].splice(parseInt(index[2]), 1);
|
|
|
|
|
|
if (drawCoordinateArr[parseInt(index[1]) - 1].length > 1){
|
|
|
|
|
|
drawFresh(index[1]);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
//$("#t_linelength").next() 需要清除这个伪元素before
|
|
|
|
|
|
$("#t_linelength").parent().removeClass("active");
|
|
|
|
|
|
|
|
|
|
|
|
//$("#t_linelength").next().removeClass("icon-check");
|
|
|
|
|
|
//$("#t_linelength").removeClass("icon-check");
|
|
|
|
|
|
// $("#bt_target_cz").removeClass("icon-check");
|
|
|
|
|
|
// targetCZChecked = !targetCZChecked;
|
|
|
|
|
|
// if (targetCZChecked) {
|
|
|
|
|
|
// $.each(MapTarget, function (key, value) {
|
|
|
|
|
|
// map.addLayer(value);
|
|
|
|
|
|
// });
|
|
|
|
|
|
// $("#bt_target_cz").next().addClass("icon-check");
|
|
|
|
|
|
// }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function setToolStyle(measureTooltipElement){
|
|
|
|
|
|
// 这里可以根据你需要的测量提示框的样式做修改
|
|
|
|
|
|
measureTooltipElement.style.color = '#C3C5C9'
|
|
|
|
|
|
measureTooltipElement.style.padding = '0 10px'
|
|
|
|
|
|
measureTooltipElement.style.height = '25px'
|
|
|
|
|
|
measureTooltipElement.style.lineHeight = '20px'
|
|
|
|
|
|
measureTooltipElement.style.background = '#1A1A1B'
|
|
|
|
|
|
measureTooltipElement.style.fontSize = '15px'
|
|
|
|
|
|
measureTooltipElement.style.fontWeight = '400'
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//创建帮助提示框
|
|
|
|
|
|
function createHelpTooltip() {
|
|
|
|
|
|
//如果已经存在帮助提示框则移除
|
|
|
|
|
|
if (helpTooltipElement) {
|
|
|
|
|
|
helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
|
|
|
|
|
}
|
|
|
|
|
|
//创建帮助提示要素的div
|
|
|
|
|
|
if (!helpTooltipElement) 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
|
|
|
|
|
|
// if (!measureTooltipElement)
|
|
|
|
|
|
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);
|
|
|
|
|
|
}
|
|
|
|
|
|
//格式化测量长度
|
|
|
|
|
|
var formatLength = function (line) {
|
|
|
|
|
|
//定义长度变量
|
|
|
|
|
|
var length;
|
|
|
|
|
|
//获取坐标串
|
|
|
|
|
|
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 += ol.sphere.getDistance(c1, c2);
|
|
|
|
|
|
}
|
|
|
|
|
|
//计算平面距离
|
|
|
|
|
|
//length = Math.round(line.getLength() * 100) / 100;
|
|
|
|
|
|
//定义输出变量
|
|
|
|
|
|
var output;
|
|
|
|
|
|
//如果长度大于1000，则使用km单位，否则使用m单位
|
|
|
|
|
|
if (length > 100) {
|
|
|
|
|
|
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;
|
|
|
|
|
|
//获取初始坐标系
|
|
|
|
|
|
var sourceProj = map.getView().getProjection();
|
|
|
|
|
|
var geom = polygon.clone().transform(sourceProj, 'EPSG:4326');
|
|
|
|
|
|
//获取多边形的坐标系
|
|
|
|
|
|
var coordinates = geom.getLinearRing(0).getCoordinates();
|
|
|
|
|
|
//获取球面面积
|
|
|
|
|
|
area = Math.abs(ol.sphere.geodesicArea(coordinates));
|
|
|
|
|
|
//获取平面面积
|
|
|
|
|
|
//area = polygon.getArea();
|
|
|
|
|
|
// }
|
|
|
|
|
|
//定义输出变量
|
|
|
|
|
|
var output;
|
|
|
|
|
|
//当面积大于10000时，转换为平方千米，否则为平方米
|
|
|
|
|
|
if (area > 1000) {
|
|
|
|
|
|
output = Math.round((area / 1000000) * 100) / 100 + ' ' + '公里<sup>2</sup>';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
|
|
|
|
|
|
}
|
|
|
|
|
|
return output;
|
|
|
|
|
|
};
|
|
|
|
|
|
//添加交互绘图对象
|
|
|
|
|
|
addInteraction();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//目标尾迹方法/目标位置预测-----------位置预测是传
|
|
|
|
|
|
function addwakeLine(_points) {
|
|
|
|
|
|
//map.removeOverlay(PopupOverlay);
|
|
|
|
|
|
// //清除原来的
|
|
|
|
|
|
// for (let i = 0; i < MapTrack_yc.length; i++) {
|
|
|
|
|
|
// map.removeLayer(MapTrack_yc[i]);
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
|
|
//画线
|
|
|
|
|
|
let oneP = new ol.Feature({
|
|
|
|
|
|
geometry: new ol.geom.LineString(_points)
|
|
|
|
|
|
});
|
|
|
|
|
|
let onePLayers = new ol.layer.Vector({
|
|
|
|
|
|
source: new ol.source.Vector({
|
|
|
|
|
|
features: [oneP]
|
|
|
|
|
|
}),
|
|
|
|
|
|
zindex: 10
|
|
|
|
|
|
});
|
|
|
|
|
|
MapTrack_yc[MapTrack_yc.length] = onePLayers;
|
|
|
|
|
|
map.addLayer(onePLayers);
|
|
|
|
|
|
// // let oneP = new ol.Feature({
|
|
|
|
|
|
// // geometry: new ol.geom.LineString([
|
|
|
|
|
|
// // [113.006943, 28.219305],
|
|
|
|
|
|
// // [113.009943, 28.219605],
|
|
|
|
|
|
// // // [113.010943, 28.220305],
|
|
|
|
|
|
// // ]),
|
|
|
|
|
|
// // });
|
|
|
|
|
|
// let onePLayers = new ol.layer.Vector({
|
|
|
|
|
|
// source: new ol.source.Vector({
|
|
|
|
|
|
// features: [oneP]
|
|
|
|
|
|
// }),
|
|
|
|
|
|
// zindex: 200
|
|
|
|
|
|
// });
|
|
|
|
|
|
//map.addLayer(onePLayers);
|
|
|
|
|
|
//MapTrack[MapTrack.length] = onePLayers;
|
|
|
|
|
|
oneP.setStyle(function (resolution) {
|
|
|
|
|
|
var lineStringForl = resolution.getGeometry();
|
|
|
|
|
|
var coordis = lineStringForl.getCoordinates();
|
|
|
|
|
|
var styles = [
|
|
|
|
|
|
new ol.style.Style({
|
|
|
|
|
|
stroke: new ol.style.Stroke({
|
|
|
|
|
|
//lineDash:[10,10,10,10],
|
|
|
|
|
|
//lineDash:[20, 10, 40, 20],
|
|
|
|
|
|
//lineDash:[1,2,3,4,5,6],
|
|
|
|
|
|
color: 'red',
|
|
|
|
|
|
width: 2,
|
|
|
|
|
|
})
|
|
|
|
|
|
})
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
// // 计算线段角度
|
|
|
|
|
|
// let vs = calcLineStringD(coordis);
|
|
|
|
|
|
// // direction_labeling_01(res, lineStringForl, coordis, vs, styles);
|
|
|
|
|
|
// direction_labeling_02(100, lineStringForl, coordis, vs, styles);
|
|
|
|
|
|
|
|
|
|
|
|
return styles;
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
//目标位置预测清除
|
|
|
|
|
|
function clearTrack_yc() {
|
|
|
|
|
|
for (let i = 0; i < MapTrack_yc.length; i++) {
|
|
|
|
|
|
map.removeLayer(MapTrack_yc[i]);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
