<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>台风路径</title>
<script src="../../js/vendor/flexible.js"></script>
<link href="../../js/vendor/qiyun_gis/lib/ol/css/ol.css" rel="stylesheet" />
<link href="../../js/vendor/qiyun_gis/core/qiyun_gis.css" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<link href="../../style/ocean.css" rel="stylesheet" />
<style>
[v-cloak] {
display: none;
}
#dalian {
font-size: .28rem
}
.layui-layer-content {
padding: .2rem .3rem;
background: rgba(255, 255, 255, 0.8);
}
.layui-layer .layui-layer-setwin {
right: -.2rem;
top: -.2rem;
}
.notp {
display: none;
position: absolute;
width: 4rem;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.top-wrap {
position: absolute;
top: 10px;
left: 10px;
width: 560px;
height: 40px;
background-color: #373E58;
z-index: 1000;
border-radius: 5px;
}
.top-wrap .btn {
width: 100px;
height: 30px;
font-size: 14px;
float: left;
line-height: 30px;
margin-top: 5px;
margin-left: 10px;
color: #000;
border-radius: 4px;
background-color: #ccc;
text-align: center;
}
.active {
background-color: rgba(64, 138, 240, 1) !important;
color: #fff !important;
}
.typhoon-list-wrap {
position: absolute;
right: 0;
top: 0;
width: 300px;
z-index: 1000;
}
.similar-path-wrap {
position: absolute;
right: 0;
top: 230px;
width: 300px;
z-index: 1000;
}
.path-info-wrap {
position: absolute;
right: 0;
top: 460px;
width: 300px;
z-index: 1000;
}
.list-wrap .title {
color: #fff;
text-align-last: left;
font-size: 14px;
background-color: #7C7D8D;
height: 30px;
line-height: 30px;
padding-left: 10px;
}
.list {
background-color: #fff;
height: 200px;
overflow: auto;
overflow-x: hidden;
}
.el-table__body {
width: auto !important;
}
.path-info colgroup col:first-child {
width: 170px !important;
}
.cell {
text-align: center !important;
}
.btn {
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrapper" v-cloak>
<div class="top-wrap">
<li v-for="(tab,i) of tabList" class="btn" :class="{active:tabIndexList.indexOf(i) !== -1}"
@click="changeColor(i)">
{{ tab }}
</li>
</div>
<div class="typhoon-list-wrap list-wrap">
<div class="title">台风列表</div>
<div class="typhoon-list list">
<el-table ref="multipleTable" :data="typhoonListData" tooltip-effect="dark" style="width: auto;"
height="200" @selection-change="typhoonListChange" v-loading="typhoonListloading">
<el-table-column type="selection">
</el-table-column>
<el-table-column label="编号">
<template slot-scope="scope">{{ scope.row.Num_INati }}</template>
</el-table-column>
<el-table-column prop="TYPH_Name_CH" label="中文名">
</el-table-column>
<el-table-column prop="TYPH_Name_EN" label="英文名" show-overflow-tooltip>
</el-table-column>
</el-table>
</div>
</div>
<div class="similar-path-wrap list-wrap">
<div class="title">相似路径</div>
<div class="similar-path list">
<el-table ref="multipleTable" :data="similarPathData" tooltip-effect="dark" style="width: auto;"
height="200" @selection-change="similarPathChange" v-loading="similarPathDataloading">
<el-table-column type="selection">
</el-table-column>
<el-table-column label="编号">
<template slot-scope="scope">{{ scope.row.Num_INati }}</template>
</el-table-column>
<el-table-column prop="TYPH_Name_CH" label="中文名">
</el-table-column>
<el-table-column prop="TYPH_Name_EN" label="英文名" show-overflow-tooltip>
</el-table-column>
</el-table>
</div>
</div>
<div class="path-info-wrap list-wrap">
<div class="title">路径信息</div>
<div class="path-info list">
<el-table ref="multipleTable" :data="pathInfoData" tooltip-effect="dark" style="width: auto;"
height="200" @selection-change="typhoonListChange">
<el-table-column label="时间">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="speed" label="风速(公里/小时)">
</el-table-column>
</el-table>
</div>
</div>
<div class="map" id="map">
<!--<div class="btns">
<button type="button" data-type="Tem"><img src="assets/images/TemBtn.png"/>温度</button>
<button type="button" data-type="Rain"><img src="assets/images/RainBtn.png" />降水</button>
<button type="button" data-type="Vis"><img src="assets/images/VisBtn.png" />能见度</button>
<button type="button" data-type="Wind"><img src="assets/images/WindBtn.png" />风</button>
</div>-->
</div>
<div class="legend">
<h4>台风路径</h4>
<ul class="typhoon-path">
<li>
<i style="background:#00FF03;"></i>
热带低压（级）
</li>
<li>
<i style="background:#0062FE;"></i>
热带风暴（级）
</li>
<li>
<i style="background:#FDFA00;"></i>
强热带风暴（级）
</li>
<li>
<i style="background:#FDAC03;"></i>
台风（级）
</li>
<li>
<i style="background:#F072F6;"></i>
强台风（级）
</li>
<li>
<i style="background:#FD0002;"></i>
超强台风（级）
</li>
</ul>
<h4 style="margin-top:.2rem;">预报机构</h4>
<ul class="forecaster">
<li>
<i style="background:#FF0B0B;"></i>
中国
</li>
<li>
<i style="background:#FF9632;"></i>
韩国
</li>
<li>
<i style="background:#3CD321;"></i>
日本
</li>
</ul>
</div>
<div id='dalian'>
大连
</div>
<button class="legend-btn hide">图 例</button>
<img class="notp" src="../../images/notp.png">
</div>
<script src="../../js/vendor/jquery/jquery.min.js"></script>
<script src="../../js/vendor/artTemplate/template.js"></script>
<script src="../../js/vendor/layer/layer.js"></script>
<script src="../../js/vendor/vue.js"></script>
<script src="../../js/vendor/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<script src="../../js/vendor/qiyun_gis/lib/ol/build/ol-debug.js"></script>
<script src="../../js/vendor/turf/turf.min.js"></script>
<script src="../../js/vendor/layui/layui.js"></script>
<script src="../../js/modules/common.js"></script>
<script type="text/html" id="typhoon-info-tpl">
<table class="typhoon-info">
<tr>
<td>到达时间：</td>
<td>{{CollectTime.replace('T', ' ').substr(0,13)}}时</td>
</tr>
<tr>
<td>中心位置：</td>
<td>{{Lat}}N/{{Lon}}E</td>
</tr>
<tr>
<td>风速风力：</td>
<td>{{WIN_S_Conti_Max}}米/秒</td>
</tr>
<tr>
<td>中心气压：</td>
<td>{{PRS}}（百帕）</td>
</tr>
<tr>
<td>未来移速：</td>
<td>{{MoSpeed_Futrue}}</td>
</tr>
<tr>
<td>未来移向：</td>
<td>{{MoDir_Future}}</td>
</tr>
</table>
</script>
<script type="text/html" id="typhoon-future-tpl">
<table class="typhoon-info">
<tr>
<td>到达时间：</td>
<td>{{CollectTime.replace('T', ' ').substr(0,13)}}时</td>
</tr>
<tr>
<td>中心位置：</td>
<td>{{Lat}}N/{{Lon}}E</td>
</tr>
<tr>
<td>风速风力：</td>
<td>{{WIN_S_Conti_Max}}米/秒</td>
</tr>
<tr>
<td>中心气压：</td>
<td>{{PRS}}（百帕）</td>
</tr>
</table>
</script>
<script>
var vm = new Vue({
el: '.wrapper',
data: function () {
return {
typhoonListloading: true,
similarPathDataloading: false,
baseUrl: 'http://192.168.1.17:8156',
tabIndexList: [],
tabList: ['卫星云图', '雷达图', '500hPa形势图', '降水', '风力'],
typhoonListData: [],
similarPathData: [],
pathInfoData: [],
}
},
methods: {
init: function () {
this.$nextTick(function () {
getTyphoonData();
dalianToggle();
$('.legend-btn').on('click', function () {
if ($(this).hasClass('show')) {
$(this).removeClass('show').addClass('hide');
$('.legend').fadeOut();
} else {
$(this).removeClass('hide').addClass('show');
$('.legend').fadeIn();
}
});
})
},
changeColor: function (index) {
if (this.tabIndexList.indexOf(index) === -1) {
this.tabIndexList.push(index);
}
else {
var i = this.tabIndexList.indexOf(index);
this.tabIndexList.splice(i, 1);
}
console.log(this.tabIndexList);
},
// 台风列表选中事件
typhoonListChange: function (data) {
if (data.length !== 0) {
var num = data[data.length - 1].Num_INati;
console.log(num);
// 获取台风相似路径列表
this.getSimilarPathData(num);
// 获取单个台风坐标数据并渲染
this.getTyphoonData(num);
this.similarPathDataloading = true;
} else {
this.similarPathDataloading = false;
this.similarPathData = [];
}
},
// 相似路径列表选中事件
similarPathChange: function (data) {
if (data.length !== 0) {
var num = data[data.length - 1].Num_INati;
console.log(num);
// 获取单个台风坐标数据并渲染
this.getTyphoonData(num);
}
},
// 获取台风列表数据
getTyphoonListData: function () {
var self = this;
axios.get(self.baseUrl + '/GisManage/Typhoon/GetAlltyphoon')
.then(function (res) {
if (res.data && res.data.length !== 0) {
var data = res.data;
// console.log(data);
data.sort(function (a, b) {
return a.Num_INati - b.Num_INati;
});
self.typhoonListloading = false;
self.typhoonListData = data;
}
})
.catch(function (error) {
self.typhoonListloading = false;
console.log(error);
});
},
// 获取相似路径列表数据
getSimilarPathData: function (num) {
var self = this;
axios.get(self.baseUrl + '/GisManage/Typhoon/GetNearTyphoon',
{
params: {
num: num
}
}
)
.then(function (res) {
self.similarPathDataloading = false;
if (res.data && res.data.length !== 0) {
var data = res.data;
self.similarPathData = [];
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < self.typhoonListData.length; j++) {
if (data[i] === self.typhoonListData[j].Num_INati) {
self.similarPathData.push(self.typhoonListData[j])
}
}
}
self.similarPathData.sort(function (a, b) {
return a.Num_INati - b.Num_INati
});
}
})
.catch(function (error) {
self.similarPathDataloading = false;
console.log(error);
});
},
// 获取单个台风坐标数据 渲染地图，渲染路径信息
getTyphoonData: function (num) {
var self = this;
self.pathInfoData = [];
axios.get(self.baseUrl + '/fileimages/typhoon/' + num + '.js')
.then(function (res) {
if (res.data && res.data.length !== 0) {
var res = res.data;
console.log(res);
if (res instanceof Array && res.length != 0) {
for (var i = 0; i < res.length; i++) {
var lon = parseFloat(res[i].typhoon.Lon);
var lat = parseFloat(res[i].typhoon.Lat);
self.pathInfoData.push({
date: res[i].typhoon.CollectTime.replace('T', ' '),
speed: parseInt(res[i].typhoon.MoSpeed_Futrue)
})
if (res[i].typhoon.Radiu_Bear1_WING_A7) {
var r1 = res[i].typhoon.Radiu_Bear1_WING_A7;
var r2 = res[i].typhoon.Radiu_Bea2_WING_A7;
var r3 = res[i].typhoon.Radiu_Bear3_WING_A7;
var r4 = res[i].typhoon.Radiu_Bear4_WING_A7;
var b1 = res[i].typhoon.WING_A7_Bear1;
var b2 = res[i].typhoon.WING_A7_Bear2;
var b3 = res[i].typhoon.WING_A7_Bear3;
var b4 = res[i].typhoon.WING_A7_Bear4;
map.addLayer(drawTyphoon(res[i].TYPH_Name_EN, lon, lat, parseFloat(r1), parseFloat(r2), parseFloat(r3), parseFloat(r4), parseFloat(b1), parseFloat(b2), parseFloat(b3), parseFloat(b4)));
}
if (res[i].typhoon.Radiu_Bear1_WING_A10) {
var r1 = res[i].typhoon.Radiu_Bear1_WING_A10;
var r2 = res[i].typhoon.Radiu_Bear2_WING_A10;
var r3 = res[i].typhoon.Radiu_Bear3_WING_A10;
var r4 = res[i].typhoon.Radiu_Bear4_WING_A10;
var b1 = res[i].typhoon.WING_A10_Bear1;
var b2 = res[i].typhoon.WING_A10_Bear2;
var b3 = res[i].typhoon.WING_A10_Bear3;
var b4 = res[i].typhoon.WING_A10_Bear4;
map.addLayer(drawTyphoon((res[i].typhoon.Radiu_Bear1_WING_A7 ? '' : res[i].TYPH_Name_EN), lon, lat, parseFloat(r1), parseFloat(r2), parseFloat(r3), parseFloat(r4), parseFloat(b1), parseFloat(b2), parseFloat(b3), parseFloat(b4)));
}
$.each(res[i].futurePoint.features, function (i, ele) {
ele.properties.isDash = true;
})
res[i].realPoint.features[0].properties.isDash = false;
var vectorObj = drawLine(res[i].futurePoint, res[i].realPoint);
map.addLayer(vectorObj.future);
map.addLayer(vectorObj.real);
typhoonInfo[res[i].TYPH_Name_EN] = res[i];
map.addLayer(drawTyphoonIcon([lon, lat]));
}
} else if (res.length == 0) {
$('.notp').show();
}
// 渲染路径信息列表
}
})
.catch(function (error) {
self.similarPathDataloading = false;
console.log(error);
});
},
},
watch: {
tabIndexList: function (newVal, oldVal) {
// console.log(newVal);
if (newVal.indexOf(2) !== -1) {
}
}
},
mounted: function () {
this.init();
this.getTyphoonListData();
}
})
var typhoonInfo = {}
$(function () {
});
//每个预报的线的颜色
var colorDict = { '24H': '#D0021B', '48H': '#F8E71C', 'RJTD': '#3CD321', 'BABJ': '#FF0B0B', 'RKSL': '#FF9632', 'PGTW': '#FF9632', '热带低压': '#00FF03', '热带风暴': '#0062FE', '强热带风暴': '#FDFA00', '台风': '#FDAC03', '强台风': '#F072F6', '超强台风': '#FD0002' };
var imgDict = { '#00FF03': '../../images/d1.png', '#0062FE': '../../images/d2.png', '#FDFA00': '../../images/d3.png', '#FDAC03': '../../images/d4.png', '#F072F6': '../../images/d5.png', '#FD0002': '../../images/d6.png' };
// 大连位置
var stationJson = {
'type': 'FeatureCollection',
'crs': {
'type': 'name'
},
'features': [
{
'type': 'Feature',
"geometry": {
"type": "Point",
"coordinates": [121.61400585330072, 38.91647539846417]
},
"properties": {
"name": "RKSL",
"text": '大连',
"isDash": false
}
}
]
}
// 警戒线名称位置
var warnJson = {
'type': 'FeatureCollection',
'crs': {
'type': 'name'
},
'features': [
{
'type': 'Feature',
"geometry": {
"type": "Point",
"coordinates": [127.93473894043, 42.95555524996988]
},
"properties": {
"name": "24H",
"text": '24H',
"isDash": false
}
},
{
'type': 'Feature',
"geometry": {
"type": "Point",
"coordinates": [135.26261979980472, 42.95555524996988]
},
"properties": {
"name": "48H",
"text": '48H',
"isDash": false
}
}
]
}
// 大连位置
var typhoonIconJson = {
'type': 'FeatureCollection',
'crs': {
'type': 'name'
},
'features': [
{
'type': 'Feature',
"geometry": {
"type": "Point",
"coordinates": []
},
"properties": {
}
}
]
}
// 大连警戒线
var cordonJson = {
'type': 'FeatureCollection',
'crs': {
'type': 'name'
},
'features': [
{
'type': 'Feature',
"geometry": {
"type": "LineString",
"coordinates": [
[121.82309343261728, 36.9676177962489],
[127.93473894043, 36.9676177962489]
]
},
"properties": {
"name": "24H",
"text": '24H',
"type": 'cordonText',
"isDash": false
}
},
{
'type': 'Feature',
"geometry": {
"type": "LineString",
"coordinates": [
[127.93473894043, 36.9676177962489],
[127.93473894043, 42.79555524996988],
]
},
"properties": {
"name": "24H",
"isDash": false
}
},
{
'type': 'Feature',
"geometry": {
"type": "LineString",
"coordinates": [
[121.93620378417971, 33.29345690811808],
[135.26261979980472, 33.29345690811808]
]
},
"properties": {
"name": "48H",
"text": '48H',
"type": 'cordonText',
"isDash": false
}
},
{
'type': 'Feature',
"geometry": {
"type": "LineString",
"coordinates": [
[135.26261979980472, 33.29345690811808],
[135.26261979980472, 42.79555524996988]
]
},
"properties": {
"name": "48H",
"isDash": false
}
}
]
}
var map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [
new ol.layer.Tile({
name: 'satellite',
source: new ol.source.XYZ({
url: 'http://webrd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8',
crossOrigin: 'Anonymous'
})
}),
drawDefLine().station,
drawDefLine().cordon,
drawDefLine().warn
],
view: new ol.View({
projection: 'EPSG:3857',
center: ol.proj.fromLonLat([119.524835, 29.57352]),
zoom: 4,
minZoom: 4
//extent: [114.37761003417977, 50.8615770941189, 143.20573503417944, 18.041621547688095]
})
});
map.on('singleclick', function (e) {
var feature = this.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
var property = feature.getProperties();
if (typhoonInfo[property["name"]] || (property["ftype"] && (property["ftype"] == 'future' || property["ftype"] == 'real')))
return feature;
});
if (feature) {
var property = feature.getProperties();
if (typhoonInfo[property["name"]]) {
layer.open({
class: 'typhoon-info',
title: "20" + typhoonInfo[property["name"]].Num_Nati + typhoonInfo[property["name"]].TYPH_Name_CH + "(" + typhoonInfo[property["name"]].TYPH_Name_EN + ")",
type: 1,
shadeClose: true,
area: [$(window).width() * 0.6 + 'px', 'auto'],
content: template('typhoon-info-tpl', typhoonInfo[property["name"]].typhoon),
success: function () {
return false;
}
});
}
else {
layer.open({
class: 'typhoon-info',
title: '20' + property["tname"],
type: 1,
shadeClose: true,
content: template('typhoon-future-tpl', property),
success: function () {
return false;
}
})
}
return false;
//var isOpen = false;
//this.forEachFeatureAtPixel(e.pixel, function (feature, olayer) {
// var layerName = olayer.get('name');
// if (typhoonInfo[layerName]) {
// var lindex = layer.open({
// class: 'typhoon-info',
// title: "20" + typhoonInfo[layerName].Num_Nati + typhoonInfo[layerName].TYPH_Name_CH + "(" + typhoonInfo[layerName].TYPH_Name_EN + ")",
// type: 1,
// shadeClose: true,
// area: [$(window).width() * 0.6 + 'px', 'auto'],
// content: template('typhoon-info-tpl', typhoonInfo[layerName].typhoon),
// success: function () {
// return false;
// }
// });
// isOpen = true;
// }
//});
//if (!isOpen) {
// this.forEachFeatureAtPixel(e.pixel, function (feature, olayer) {
// var property = feature.getProperties();
// if (!isOpen && property["ftype"] && (property["ftype"] == 'future' || property["ftype"] == 'real')) {
// var lindex = layer.open({
// class: 'typhoon-info',
// title:'20'+property["tname"],
// type: 1,
// shadeClose: true,
// area: [$(window).width() * 0.6 + 'px', 'auto'],
// content: template('typhoon-future-tpl', property),
// success: function () {
// return false;
// }
// });
// isOpen = true;
// }
// });
//}
}
})
// 获取台风数据
function getTyphoonData() {
var layerIndex = -1;
$.ajax({
url: 'http://59.44.22.60:8080/js/typhoon.js',
data: {
_t: +new Date()
},
dataType: 'json',
beforeSend: function () {
//layerIndex = layer.load(1);
},
success: function (res) {
if (res instanceof Array && res.length != 0) {
for (var i = 0; i < res.length; i++) {
var lon = parseFloat(res[i].typhoon.Lon);
var lat = parseFloat(res[i].typhoon.Lat);
if (res[i].typhoon.Radiu_Bear1_WING_A7) {
var r1 = res[i].typhoon.Radiu_Bear1_WING_A7;
var r2 = res[i].typhoon.Radiu_Bea2_WING_A7;
var r3 = res[i].typhoon.Radiu_Bear3_WING_A7;
var r4 = res[i].typhoon.Radiu_Bear4_WING_A7;
var b1 = res[i].typhoon.WING_A7_Bear1;
var b2 = res[i].typhoon.WING_A7_Bear2;
var b3 = res[i].typhoon.WING_A7_Bear3;
var b4 = res[i].typhoon.WING_A7_Bear4;
map.addLayer(drawTyphoon(res[i].TYPH_Name_EN, lon, lat, parseFloat(r1), parseFloat(r2), parseFloat(r3), parseFloat(r4), parseFloat(b1), parseFloat(b2), parseFloat(b3), parseFloat(b4)));
}
if (res[i].typhoon.Radiu_Bear1_WING_A10) {
var r1 = res[i].typhoon.Radiu_Bear1_WING_A10;
var r2 = res[i].typhoon.Radiu_Bear2_WING_A10;
var r3 = res[i].typhoon.Radiu_Bear3_WING_A10;
var r4 = res[i].typhoon.Radiu_Bear4_WING_A10;
var b1 = res[i].typhoon.WING_A10_Bear1;
var b2 = res[i].typhoon.WING_A10_Bear2;
var b3 = res[i].typhoon.WING_A10_Bear3;
var b4 = res[i].typhoon.WING_A10_Bear4;
map.addLayer(drawTyphoon((res[i].typhoon.Radiu_Bear1_WING_A7 ? '' : res[i].TYPH_Name_EN), lon, lat, parseFloat(r1), parseFloat(r2), parseFloat(r3), parseFloat(r4), parseFloat(b1), parseFloat(b2), parseFloat(b3), parseFloat(b4)));
}
$.each(res[i].futurePoint.features, function (i, ele) {
ele.properties.isDash = true;
})
res[i].realPoint.features[0].properties.isDash = false;
var vectorObj = drawLine(res[i].futurePoint, res[i].realPoint);
map.addLayer(vectorObj.future);
map.addLayer(vectorObj.real);
typhoonInfo[res[i].TYPH_Name_EN] = res[i];
map.addLayer(drawTyphoonIcon([lon, lat]));
}
} else if (res.length == 0) {
$('.notp').show();
}
},
complete: function () {
//layer.close(layerIndex);
}
});
}
// 台风图标
function drawTyphoonIcon(coordinates) {
typhoonIconJson.features[0].geometry.coordinates = coordinates;
var typhoonIconSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(typhoonIconJson, { dataProjection: "EPSG:4326", featureProjection: "EPSG:3857" })
});
return new ol.layer.Vector({
source: typhoonIconSource,
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
//size: [20, 20],
offset: [0, 0],
scale: 0.4,
src: '../../images/tyhone.png'
})
})
})
}
// 警戒线、位置
function drawDefLine() {
// 大连位置
var stationSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(stationJson, { dataProjection: "EPSG:4326", featureProjection: "EPSG:3857" })
});
// 警戒线
var cordonSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(cordonJson, { dataProjection: "EPSG:4326", featureProjection: "EPSG:3857" })
});
var warnSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(warnJson, { dataProjection: "EPSG:4326", featureProjection: "EPSG:3857" })
});
return {
station: new ol.layer.Vector({
source: stationSource,
style: setLineStyle
}),
cordon: new ol.layer.Vector({
source: cordonSource,
style: setLineStyle
}),
warn: new ol.layer.Vector({
source: warnSource,
style: setWarnStyle
}),
};
}
// 路径、警戒线、位置
function drawLine(futureJson, realJson) {
//预测路径
var futureSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(futureJson, { dataProjection: "EPSG:4326", featureProjection: "EPSG:3857" })
});
// 预报路径
var realSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(realJson, { dataProjection: "EPSG:4326", featureProjection: "EPSG:3857" })
});
return {
future: new ol.layer.Vector({
source: futureSource,
style: setLineStyle
}),
real: new ol.layer.Vector({
source: realSource,
style: setLineStyle
})
};
}
// 台风
function drawTyphoon(name, lon, lat, r1, r2, r3, r4, b1, b2, b3, b4) {
var geoformat = new ol.format.GeoJSON();
var center = turf.point([lon, lat], { a: 123 });
center.properties.type = 'typhoon';
center.properties.name = 'typhoon';
var styleFunc = function (feature, resolution) {
return new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(245, 166, 35, 0.2)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(245, 166, 35, 0.6)',
width: 1
})
});
};
var arc1 = turf.lineArc(center, r1, b1, b2, { steps: 90 });
var arc2 = turf.lineArc(center, r2, b2, b3, { steps: 90 });
var arc3 = turf.lineArc(center, r3, b3, b4, { steps: 90 });
var arc4 = turf.lineArc(center, r4, b4, b1, { steps: 90 });
var fc = turf.lineString(turf.getCoords(arc1)
.concat(turf.getCoords(arc2))
.concat(turf.getCoords(arc3))
.concat(turf.getCoords(arc4)));
var polygon1 = turf.lineToPolygon(fc);
var features = [];
var typhoonFeature = geoformat.readFeature(polygon1, { dataProjection: "EPSG:4326", featureProjection: "EPSG:3857" });
typhoonFeature.setProperties({ "name": name });
features.push(typhoonFeature);
return new ol.layer.Vector({
name: name,
source: new ol.source.Vector({
features: features
}),
style: styleFunc
});
}
// 设置路径样式
function setLineStyle(feature) {
var property = feature.getProperties();
return new ol.style.Style({
stroke: new ol.style.Stroke({
color: colorDict[property['name']] || 'rgb(0, 98, 254)',
lineDash: [property.isDash ? 5 : 0],
width: 1
}),
fill: new ol.style.Fill({
color: colorDict[property['name']] || 'rgb(0, 98, 254)',
}),
image: new ol.style.Icon({
src: imgDict[colorDict[property['name']]] || '../../images/d1.png',
scale: map.getView().getZoom() / 5,
}),
// image: new ol.style.Circle({
// radius: 6,
// fill: new ol.style.Fill({
// color: colorDict[property['name']] || 'rgb(0, 98, 254)',
// }),
// stroke: new ol.style.Stroke({
// color: 'rgba(255,255,255,0.005)',
// width: 40,
// lineDash: [0],
// }),
// }),
text: new ol.style.Text({
font: '14px 微软雅黑 ',
text: '',
fill: new ol.style.Fill({
color: colorDict[property['name']]
}),
stroke: new ol.style.Stroke({
color: colorDict[property['name']],
width: 1
})
})
})
}
// 设置警戒名字
function setWarnStyle(feature) {
var property = feature.getProperties();
return new ol.style.Style({
text: new ol.style.Text({
font: '12px',
offsetY: -5,
text: property["text"],
stroke: new ol.style.Stroke({
color: colorDict[property['name']],
width: 1
}),
fill: new ol.style.Fill({
color: colorDict[property['name']]
})
})
})
}
// 大连字消失和显示
function dalianToggle() {
var dalian = new ol.Overlay({
element: document.getElementById('dalian'),
stopEvent: false
});
var view = map.getView();
dalian.setPosition(ol.proj.fromLonLat([121.018622, 39.18459]));
map.addOverlay(dalian);
view.on('change:resolution', function () {
var zoom = view.getZoom();
zoom > 5.4 ? $('.ol-overlay-container').css('display', 'none') : $('.ol-overlay-container').css('display', 'block')
})
}
</script>
</body>
</html>
