feat：将 OpenLayers 替换百度地图地图，加入高德和天地图
This commit is contained in:
fengyarnom
parent
7f66b1ae7b
commit
0b777802bf
@ -6,9 +6,11 @@
|
|||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
|
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
|
||||||
<link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
|
<link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
|
||||||
<link rel="stylesheet" href="../css/public.css" media="all">
|
<link rel="stylesheet" href="../css/public.css" media="all">
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.5.0/ol.css">
|
||||||
<style>
|
<style>
|
||||||
.top-panel {
|
.top-panel {
|
||||||
border: 1px solid #eceff9;
|
border: 1px solid #eceff9;
|
||||||
@ -58,10 +60,30 @@
|
|||||||
background-color: rgba(27, 142, 236, 0.8);
|
background-color: rgba(27, 142, 236, 0.8);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
#map-container {
|
||||||
|
height: 85vh;
|
||||||
|
width: 100%;
|
||||||
|
padding:0px;
|
||||||
|
}
|
||||||
|
.map-controls {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 1000;
|
||||||
|
background: white;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||||
|
min-width: 120px;
|
||||||
|
}
|
||||||
|
.map-controls select {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #e6e6e6;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=4ef46ba62e8fba67b53a0becca4d05da">
|
<script src="https://cdn.jsdelivr.net/npm/ol@v10.5.0/dist/ol.js"></script>
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@ -111,238 +133,387 @@
|
|||||||
<li class="night btn" onclick="showWarning1()">一般告警</li>
|
<li class="night btn" onclick="showWarning1()">一般告警</li>
|
||||||
<li class="night btn" onclick="showWarning2()">严重告警</li>
|
<li class="night btn" onclick="showWarning2()">严重告警</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div id="map-container" class="layui-card-body" style="height: 85vh;weight :100vw"></div>
|
<div class="map-controls">
|
||||||
|
<form class="layui-form">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<select id="mapTypeSelect" lay-filter="mapType">
|
||||||
|
<option value="tianditu_satellite" selected>天地图-卫星影像</option>
|
||||||
|
<option value="tianditu_normal">天地图-矢量</option>
|
||||||
|
<option value="amap_satellite">高德-卫星影像</option>
|
||||||
|
<option value="amap">高德-矢量</option>
|
||||||
|
|
||||||
|
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div id="map-container" class="layui-card-body"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
||||||
|
|
||||||
<script th:inline="javascript">
|
<script th:inline="javascript">
|
||||||
var greenMarkers=[];
|
var map;
|
||||||
var orangeMarkers=[];
|
var vectorSource;
|
||||||
var redMarkers=[];
|
var vectorLayer;
|
||||||
var greenLabels=[];
|
var currentBaseLayer;
|
||||||
var orangeLabels=[];
|
var greenFeatures = [];
|
||||||
var redLabels=[];
|
var orangeFeatures = [];
|
||||||
var batch_id = 0;
|
var redFeatures = [];
|
||||||
var deviceList=
|
var marker_state = 1; // 1:all; 2:orange; 3:red
|
||||||
[
|
|
||||||
|
// 天地图 API 密钥（fengyarnom@gmail.com）
|
||||||
|
var TIANDITU_KEY = '0c260b8a094a4e0bc507808812cefdac';
|
||||||
|
|
||||||
|
var deviceList = [
|
||||||
[# th:each="device : ${deviceList}"]
|
[# th:each="device : ${deviceList}"]
|
||||||
{deviceid:[[${device.deviceid}]],
|
{
|
||||||
latitude:[[${device.latitude}]],
|
deviceid: [[${device.deviceid}]],
|
||||||
longitude:[[${device.longitude}]],
|
latitude: [[${device.latitude}]],
|
||||||
warning:[[${device.warning}]]},
|
longitude: [[${device.longitude}]],
|
||||||
|
warning: [[${device.warning}]]
|
||||||
|
},
|
||||||
[/]
|
[/]
|
||||||
];
|
];
|
||||||
var marker_state = 0;//0: translating; 1:all; 2:orange; 3:red
|
|
||||||
|
|
||||||
var map = new BMapGL.Map("map-container");
|
var pi = 3.14159265358979324;
|
||||||
var convertor = new BMapGL.Convertor();
|
var a = 6378245.0;
|
||||||
var loc_green = new BMapGL.Icon("../images/loc1_green.png", new BMapGL.Size(18, 24));
|
var ee = 0.00669342162296594323;
|
||||||
var loc_red = new BMapGL.Icon("../images/loc1_red.png", new BMapGL.Size(18, 24));
|
|
||||||
var loc_orange = new BMapGL.Icon("../images/loc1_orange.png", new BMapGL.Size(18, 24));
|
|
||||||
var loc_blue = new BMapGL.Icon("../images/loc_blue.png", new BMapGL.Size(18, 24));
|
|
||||||
|
|
||||||
initialize();
|
/*判断是否在国内，不在国内则不做偏移*/
|
||||||
myLocation();
|
function outOfChina(lon, lat) {
|
||||||
|
if ((lon < 72.004 || lon > 137.8347) && (lat < 0.8293 || lat > 55.8271)) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformLat(x, y) {
|
||||||
|
var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
|
||||||
|
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
|
||||||
|
ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
|
||||||
|
ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
function transformLon(x, y) {
|
||||||
|
var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
|
||||||
|
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
|
||||||
|
ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
|
||||||
|
ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
function transform(wgLat, wgLon) {
|
||||||
|
var mars_point = {lon: 0, lat: 0};
|
||||||
|
if (outOfChina(wgLon, wgLat)) {
|
||||||
|
mars_point.lat = wgLat;
|
||||||
|
mars_point.lon = wgLon;
|
||||||
|
return mars_point;
|
||||||
|
}
|
||||||
|
var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
|
||||||
|
var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
|
||||||
|
var radLat = wgLat / 180.0 * pi;
|
||||||
|
var magic = Math.sin(radLat);
|
||||||
|
magic = 1 - ee * magic * magic;
|
||||||
|
var sqrtMagic = Math.sqrt(magic);
|
||||||
|
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
|
||||||
|
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
|
||||||
|
mars_point.lat = wgLat + dLat;
|
||||||
|
mars_point.lon = wgLon + dLon;
|
||||||
|
return mars_point;
|
||||||
|
}
|
||||||
|
|
||||||
|
var mapLayers = {
|
||||||
|
amap: new ol.layer.Tile({
|
||||||
|
source: new ol.source.XYZ({
|
||||||
|
url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
amap_satellite: new ol.layer.Group({
|
||||||
|
layers: [
|
||||||
|
new ol.layer.Tile({
|
||||||
|
source: new ol.source.XYZ({
|
||||||
|
url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
new ol.layer.Tile({
|
||||||
|
source: new ol.source.XYZ({
|
||||||
|
url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
tianditu_satellite: new ol.layer.Group({
|
||||||
|
layers: [
|
||||||
|
new ol.layer.Tile({
|
||||||
|
source: new ol.source.XYZ({
|
||||||
|
url: 'https://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
new ol.layer.Tile({
|
||||||
|
source: new ol.source.XYZ({
|
||||||
|
url: 'https://t{0-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY
|
||||||
|
})
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
tianditu_normal: new ol.layer.Group({
|
||||||
|
layers: [
|
||||||
|
new ol.layer.Tile({
|
||||||
|
source: new ol.source.XYZ({
|
||||||
|
url: 'https://t{0-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
new ol.layer.Tile({
|
||||||
|
source: new ol.source.XYZ({
|
||||||
|
url: 'https://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY
|
||||||
|
})
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
function initialize() {
|
function initialize() {
|
||||||
var point = new BMapGL.Point(116.404, 39.915);
|
vectorSource = new ol.source.Vector();
|
||||||
map.centerAndZoom(point, 7);
|
vectorLayer = new ol.layer.Vector({
|
||||||
map.enableScrollWheelZoom(true);
|
source: vectorSource
|
||||||
//map.setMapType(BMAP_SATELLITE_MAP);
|
});
|
||||||
|
|
||||||
|
var initialMapType = document.getElementById('mapTypeSelect').value;
|
||||||
|
currentBaseLayer = mapLayers[initialMapType];
|
||||||
|
|
||||||
|
map = new ol.Map({
|
||||||
|
target: 'map-container',
|
||||||
|
layers: [
|
||||||
|
currentBaseLayer,
|
||||||
|
vectorLayer
|
||||||
|
],
|
||||||
|
view: new ol.View({
|
||||||
|
center: ol.proj.fromLonLat([116.404, 39.915]),
|
||||||
|
zoom: 7
|
||||||
|
})
|
||||||
|
});
|
||||||
|
if (deviceList.length > 0) {
|
||||||
var centerLat = 0;
|
var centerLat = 0;
|
||||||
var centerLon = 0;
|
var centerLon = 0;
|
||||||
//console.log(deviceList);
|
|
||||||
for(var i=0; i<deviceList.length; i++) {
|
for (var i = 0; i < deviceList.length; i++) {
|
||||||
centerLat += deviceList[i].latitude;
|
centerLat += deviceList[i].latitude;
|
||||||
centerLon += deviceList[i].longitude;
|
centerLon += deviceList[i].longitude;
|
||||||
}
|
}
|
||||||
if(deviceList.length>0) {
|
|
||||||
centerLat = centerLat/deviceList.length;
|
centerLat = centerLat / deviceList.length;
|
||||||
centerLon = centerLon/deviceList.length;
|
centerLon = centerLon / deviceList.length;
|
||||||
map.setCenter(new BMapGL.Point(centerLon,centerLat));
|
|
||||||
|
map.getView().setCenter(ol.proj.fromLonLat([centerLon, centerLat]));
|
||||||
}
|
}
|
||||||
marker_state = 0;
|
|
||||||
|
|
||||||
translateCallback = function (data){
|
addDeviceMarkers();
|
||||||
if(data.status === 0) {
|
myLocation();
|
||||||
var i=0;
|
}
|
||||||
for(; i<data.points.length; i++){
|
function switchMapType(mapType) {
|
||||||
var label = new BMapGL.Label(deviceList[batch_id+i].deviceid,
|
console.log('切换地图类型到:', mapType);
|
||||||
{
|
map.removeLayer(currentBaseLayer);
|
||||||
position: data.points[i], // 指定文本标注所在的地理位置
|
currentBaseLayer = mapLayers[mapType];
|
||||||
offset: new BMapGL.Size(10, 10) // 设置文本偏移量
|
map.getLayers().insertAt(0, currentBaseLayer);
|
||||||
}); // 创建文本标注对象
|
addDeviceMarkers();
|
||||||
|
}
|
||||||
|
|
||||||
var marker;
|
function addDeviceMarkers() {
|
||||||
if(deviceList[batch_id+i].warning == 2) {
|
// 清除现有标记
|
||||||
marker = new BMapGL.Marker(data.points[i], {
|
vectorSource.clear();
|
||||||
icon: loc_red
|
greenFeatures = [];
|
||||||
|
orangeFeatures = [];
|
||||||
|
redFeatures = [];
|
||||||
|
|
||||||
|
for (var i = 0; i < deviceList.length; i++) {
|
||||||
|
var device = deviceList[i];
|
||||||
|
var mapCoordinates;
|
||||||
|
var currentMapType = document.getElementById('mapTypeSelect').value;
|
||||||
|
if (currentMapType === 'amap' || currentMapType === 'amap_satellite') {
|
||||||
|
// 高德地图 WGS84 转换为 GCJ-02
|
||||||
|
var gcjCoord = transform(device.latitude, device.longitude);
|
||||||
|
mapCoordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
|
||||||
|
} else {
|
||||||
|
// 天地图 CGCS2000，2000国家大地坐标系，与WGS84实质一样
|
||||||
|
mapCoordinates = ol.proj.fromLonLat([device.longitude, device.latitude]);
|
||||||
|
}
|
||||||
|
|
||||||
|
var feature = new ol.Feature({
|
||||||
|
geometry: new ol.geom.Point(mapCoordinates),
|
||||||
|
deviceInfo: device
|
||||||
});
|
});
|
||||||
redMarkers.push(marker);
|
|
||||||
redLabels.push(label);
|
var iconSrc;
|
||||||
|
var color = '#000';
|
||||||
|
|
||||||
|
if (device.warning == 2) {
|
||||||
|
iconSrc = '../images/loc1_red.png';
|
||||||
|
redFeatures.push(feature);
|
||||||
|
} else if (device.warning == 1) {
|
||||||
|
iconSrc = '../images/loc1_orange.png';
|
||||||
|
orangeFeatures.push(feature);
|
||||||
|
} else {
|
||||||
|
iconSrc = '../images/loc1_green.png';
|
||||||
|
greenFeatures.push(feature);
|
||||||
}
|
}
|
||||||
else if(deviceList[batch_id+i].warning == 1) {
|
|
||||||
marker = new BMapGL.Marker(data.points[i], {
|
var style = new ol.style.Style({
|
||||||
icon: loc_orange
|
image: new ol.style.Icon({
|
||||||
|
anchor: [0.5, 1],
|
||||||
|
src: iconSrc,
|
||||||
|
scale: 1
|
||||||
|
}),
|
||||||
|
text: new ol.style.Text({
|
||||||
|
text: device.deviceid,
|
||||||
|
offsetY: -30,
|
||||||
|
fill: new ol.style.Fill({ color: color }),
|
||||||
|
stroke: new ol.style.Stroke({ color: '#fff', width: 2 }),
|
||||||
|
font: '12px Arial'
|
||||||
|
})
|
||||||
});
|
});
|
||||||
orangeMarkers.push(marker);
|
|
||||||
orangeLabels.push(label);
|
feature.setStyle(style);
|
||||||
|
vectorSource.addFeature(feature);
|
||||||
}
|
}
|
||||||
else {
|
|
||||||
marker = new BMapGL.Marker(data.points[i], {
|
if (marker_state === 2) {
|
||||||
icon: loc_green
|
hideGreen();
|
||||||
|
hideRed();
|
||||||
|
} else if (marker_state === 3) {
|
||||||
|
hideGreen();
|
||||||
|
hideOrange();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function myLocation() {
|
||||||
|
if (navigator.geolocation) {
|
||||||
|
navigator.geolocation.getCurrentPosition(function(position) {
|
||||||
|
var lon = position.coords.longitude;
|
||||||
|
var lat = position.coords.latitude;
|
||||||
|
var coordinates = ol.proj.fromLonLat([lon, lat]);
|
||||||
|
|
||||||
|
var feature = new ol.Feature({
|
||||||
|
geometry: new ol.geom.Point(coordinates)
|
||||||
});
|
});
|
||||||
greenMarkers.push(marker);
|
|
||||||
greenLabels.push(label);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 点标记添加点击事件
|
var style = new ol.style.Style({
|
||||||
map.addOverlay(marker);
|
image: new ol.style.Icon({
|
||||||
map.addOverlay(label);
|
anchor: [0.5, 1],
|
||||||
|
src: '../images/loc_blue.png',
|
||||||
}
|
scale: 1
|
||||||
|
})
|
||||||
}
|
|
||||||
batch_id+=10;
|
|
||||||
// 函数内定时器的回调函数会继续调用 timer()
|
|
||||||
if(batch_id<deviceList.length) {
|
|
||||||
setTimeout(() => {
|
|
||||||
timer();
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
else marker_state = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
//每秒转换10个坐标，否则会受百度并发限制
|
|
||||||
function timer() {
|
|
||||||
var pointArr = [];
|
|
||||||
var count = batch_id+10;
|
|
||||||
var totalNum = deviceList.length;
|
|
||||||
if(count>totalNum) count=totalNum;
|
|
||||||
|
|
||||||
for (var i = batch_id; i < count; i++) {
|
|
||||||
point = new BMapGL.Point(deviceList[i].longitude, deviceList[i].latitude);
|
|
||||||
pointArr.push(point);
|
|
||||||
}
|
|
||||||
|
|
||||||
convertor.translate(pointArr, 1, 5, translateCallback);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 启动函数
|
|
||||||
timer();
|
|
||||||
}
|
|
||||||
|
|
||||||
function myLocation(){
|
|
||||||
var geolocation = new BMapGL.Geolocation();
|
|
||||||
geolocation.getCurrentPosition(function(r){
|
|
||||||
if(this.getStatus() == BMAP_STATUS_SUCCESS){
|
|
||||||
var mk = new BMapGL.Marker(r.point, {
|
|
||||||
icon: loc_blue
|
|
||||||
});
|
});
|
||||||
map.addOverlay(mk);
|
|
||||||
map.panTo(r.point);
|
feature.setStyle(style);
|
||||||
}
|
vectorSource.addFeature(feature);
|
||||||
|
map.getView().setCenter(coordinates);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function showAll(){
|
function showAll() {
|
||||||
if(marker_state == 2){
|
if (marker_state == 2) {
|
||||||
showGreen();
|
showGreen();
|
||||||
showRed();
|
showRed();
|
||||||
marker_state = 1;
|
marker_state = 1;
|
||||||
}
|
} else if (marker_state == 3) {
|
||||||
else if(marker_state == 3){
|
|
||||||
showGreen();
|
showGreen();
|
||||||
showOrange();
|
showOrange();
|
||||||
marker_state = 1;
|
marker_state = 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showWarning1(){
|
function showWarning1() {
|
||||||
if(marker_state == 1){
|
if (marker_state == 1) {
|
||||||
hideGreen();
|
hideGreen();
|
||||||
hideRed();
|
hideRed();
|
||||||
marker_state = 2;
|
marker_state = 2;
|
||||||
}
|
} else if (marker_state == 3) {
|
||||||
else if(marker_state == 3){
|
|
||||||
hideRed();
|
hideRed();
|
||||||
showOrange();
|
showOrange();
|
||||||
marker_state = 2;
|
marker_state = 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showWarning2(){
|
function showWarning2() {
|
||||||
if(marker_state == 1){
|
if (marker_state == 1) {
|
||||||
hideGreen();
|
hideGreen();
|
||||||
hideOrange();
|
hideOrange();
|
||||||
marker_state = 3;
|
marker_state = 3;
|
||||||
}
|
} else if (marker_state == 2) {
|
||||||
else if(marker_state == 2){
|
|
||||||
hideOrange();
|
hideOrange();
|
||||||
showRed();
|
showRed();
|
||||||
marker_state = 3;
|
marker_state = 3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showGreen(){
|
function showGreen() {
|
||||||
for(var i=0; i<greenMarkers.length; i++){
|
for (var i = 0; i < greenFeatures.length; i++) {
|
||||||
map.addOverlay(greenMarkers[i]);
|
if (!vectorSource.hasFeature(greenFeatures[i])) {
|
||||||
map.addOverlay(greenLabels[i]);
|
vectorSource.addFeature(greenFeatures[i]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showOrange(){
|
function showOrange() {
|
||||||
for(var i=0; i<orangeMarkers.length; i++){
|
for (var i = 0; i < orangeFeatures.length; i++) {
|
||||||
map.addOverlay(orangeMarkers[i]);
|
if (!vectorSource.hasFeature(orangeFeatures[i])) {
|
||||||
map.addOverlay(orangeLabels[i]);
|
vectorSource.addFeature(orangeFeatures[i]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function showRed(){
|
function showRed() {
|
||||||
for(var i=0; i<redMarkers.length; i++){
|
for (var i = 0; i < redFeatures.length; i++) {
|
||||||
map.addOverlay(redMarkers[i]);
|
if (!vectorSource.hasFeature(redFeatures[i])) {
|
||||||
map.addOverlay(redLabels[i]);
|
vectorSource.addFeature(redFeatures[i]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideGreen(){
|
function hideGreen() {
|
||||||
for(var i=0; i<greenMarkers.length; i++){
|
for (var i = 0; i < greenFeatures.length; i++) {
|
||||||
map.removeOverlay(greenMarkers[i]);
|
vectorSource.removeFeature(greenFeatures[i]);
|
||||||
map.removeOverlay(greenLabels[i]);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideOrange(){
|
function hideOrange() {
|
||||||
for(var i=0; i<orangeMarkers.length; i++){
|
for (var i = 0; i < orangeFeatures.length; i++) {
|
||||||
map.removeOverlay(orangeMarkers[i]);
|
vectorSource.removeFeature(orangeFeatures[i]);
|
||||||
map.removeOverlay(orangeLabels[i]);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideRed(){
|
function hideRed() {
|
||||||
for(var i=0; i<redMarkers.length; i++){
|
for (var i = 0; i < redFeatures.length; i++) {
|
||||||
map.removeOverlay(redMarkers[i]);
|
vectorSource.removeFeature(redFeatures[i]);
|
||||||
map.removeOverlay(redLabels[i]);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
layui.use(['form'], function(){
|
||||||
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
var form = layui.form;
|
||||||
<script>
|
form.on('select(mapType)', function(data){
|
||||||
function queryDevices(status_type){
|
switchMapType(data.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
initialize();
|
||||||
|
});
|
||||||
|
|
||||||
|
function queryDevices(status_type) {
|
||||||
var index = layer.open({
|
var index = layer.open({
|
||||||
title: '',
|
title: '',
|
||||||
type: 2,
|
type: 2,
|
||||||
shade: 0.2,
|
shade: 0.2,
|
||||||
maxmin:true,
|
maxmin: true,
|
||||||
shadeClose: true,
|
shadeClose: true,
|
||||||
anim: 2,
|
anim: 2,
|
||||||
offset: 'rb',
|
offset: 'rb',
|
||||||
area: ['100%', '50%'],
|
area: ['100%', '50%'],
|
||||||
content: '../page/gnss_q_status?query='+status_type,
|
content: '../page/gnss_q_status?query=' + status_type,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user