|
|
@@ -1,210 +1,210 @@
|
|
|
<template>
|
|
|
- <div style="width:100%;height:100%">
|
|
|
- <div id="map" ref="rootmap"></div>
|
|
|
-
|
|
|
- <div class="shipDiv" v-show="deviceShow">
|
|
|
- <div class="shipTitle">
|
|
|
- <span style="float:left">{{ deviceData.name }}</span>
|
|
|
- <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="deviceShow=false"></i>
|
|
|
- </div>
|
|
|
- <div style="padding—left:10rem" class="shipContent">
|
|
|
-
|
|
|
- <el-tabs v-model="d_activeName" @tab-click="handleClick1">
|
|
|
- <el-tab-pane label="设备信息" name="d_first">
|
|
|
- <el-row :gutter="3" style="margin-top:5rem">
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595;">设备名称:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.name }}</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.monitorName }}</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">设备状态:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.status }}</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">管辖机构:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.orgName }}</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">更新时间:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.updateTime }}</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经纬度:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.latilongti }}</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="嫌疑船舶" name="d_second">
|
|
|
- <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tabledatas" height="200px" highlight-current-row style="width: 100%;" class="tableSc">
|
|
|
- <el-table-column type="index" label="序号" width="50">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column property="mmsi" label="MMSI" width="100">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column property="shipName" label="船名" width="100">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column property="values" label="监测值" width="100">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column property="createTime" label="监测时间">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- </el-tab-pane>
|
|
|
-
|
|
|
- <el-tab-pane label="违规船舶" name="d_thrid">
|
|
|
- <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tabledatas" height="200px" highlight-current-row style="width: 100%;" class="tableSc">
|
|
|
- <el-table-column type="index" label="序号" width="50">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column property="mmsi" label="MMSI" width="100">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column property="shipName" label="船名" width="100">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column property="values" label="监测值" width="100">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column property="createTime" label="监测时间">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
-
|
|
|
- <!-- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航向:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风向:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风速:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
- </el-col> -->
|
|
|
- <!-- <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" icon="el-icon-location-information">历史轨迹</el-button> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="shipDiv" v-show="shipShow">
|
|
|
- <div class="shipTitle">
|
|
|
- <span style="float:left">{{ shipName.shipName }}</span>
|
|
|
- <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="shipShow=false"></i>
|
|
|
- </div>
|
|
|
- <div style="padding—left:10rem" class="shipContent">
|
|
|
- <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
- <el-tab-pane label="AIS信息" name="first">
|
|
|
- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">MMSI:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.mmsi }}</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.monitorPointName }}</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经度:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.lng }}</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">纬度:</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.lat }}</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <div style="width:100%;height:100%">
|
|
|
+ <div id="map" ref="rootmap"></div>
|
|
|
+
|
|
|
+ <div class="shipDiv" v-show="deviceShow">
|
|
|
+ <div class="shipTitle">
|
|
|
+ <span style="float:left">{{ deviceData.name }}</span>
|
|
|
+ <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="deviceShow=false"></i>
|
|
|
+ </div>
|
|
|
+ <div style="padding—left:10rem" class="shipContent">
|
|
|
+
|
|
|
+ <el-tabs v-model="d_activeName" @tab-click="handleClick1">
|
|
|
+ <el-tab-pane label="设备信息" name="d_first">
|
|
|
+ <el-row :gutter="3" style="margin-top:5rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595;">设备名称:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.name }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.monitorName }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">设备状态:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.status }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">管辖机构:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.orgName }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">更新时间:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.updateTime }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经纬度:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.latilongti }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="嫌疑船舶" name="d_second">
|
|
|
+ <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tabledatas" height="200px" highlight-current-row style="width: 100%;" class="tableSc">
|
|
|
+ <el-table-column type="index" label="序号" width="50">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="mmsi" label="MMSI" width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="shipName" label="船名" width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="values" label="监测值" width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="createTime" label="监测时间">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="违规船舶" name="d_thrid">
|
|
|
+ <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tabledatas" height="200px" highlight-current-row style="width: 100%;" class="tableSc">
|
|
|
+ <el-table-column type="index" label="序号" width="50">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="mmsi" label="MMSI" width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="shipName" label="船名" width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="values" label="监测值" width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="createTime" label="监测时间">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <!-- <el-row :gutter="3" style="margin-top:3rem">
|
|
|
<el-col :span="4">
|
|
|
<div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.speed }}</div>
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
</el-col>
|
|
|
<el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">实际航向:</div>
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航向:</div>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.head }}</div>
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-row :gutter="3" style="margin-top:3rem">
|
|
|
<el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">地面航线:</div>
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风向:</div>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.course }}</div>
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
</el-col>
|
|
|
<el-col :span="4">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">位置接收时间:</div>
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风速:</div>
|
|
|
</el-col>
|
|
|
<el-col :span="8">
|
|
|
- <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.receive }}</div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem;display:none" icon="el-icon-location-information">历史轨迹</el-button>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane label="主要监测数据" name="second">
|
|
|
- <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tableData.main" highlight-current-row height="200px" style="width: 100%" class="tableSc">
|
|
|
- <el-table-column type="index" label="序号" width="50">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column property="monitorPointName" label="监测点" width="100">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column :label="'硫含量'">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent > normalPer" style="color:red">{{ scope.row.so2Percent }}% ↑ {{ ((scope.row.so2Percent - normalPer) / normalPer * 100).toFixed(0) }}%</div>
|
|
|
- <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent <= normalPer">{{ scope.row.so2Percent }}%</div>
|
|
|
- </template>
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
|
|
|
+ </el-col> -->
|
|
|
+ <!-- <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" icon="el-icon-location-information">历史轨迹</el-button> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="shipDiv" v-show="shipShow">
|
|
|
+ <div class="shipTitle">
|
|
|
+ <span style="float:left">{{ shipName.shipName }}</span>
|
|
|
+ <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="shipShow=false"></i>
|
|
|
+ </div>
|
|
|
+ <div style="padding—left:10rem" class="shipContent">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="AIS信息" name="first">
|
|
|
+ <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">MMSI:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.mmsi }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.monitorPointName }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经度:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.lng }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">纬度:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.lat }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.speed }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">实际航向:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.head }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="3" style="margin-top:3rem">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">地面航线:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.course }}</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">位置接收时间:</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ shipName.receive }}</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem;display:none" icon="el-icon-location-information">历史轨迹</el-button>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="主要监测数据" name="second">
|
|
|
+ <el-table :header-cell-style="{ background: '#e4eafc'}" ref="singleTable" :data="tableData.main" highlight-current-row height="200px" style="width: 100%" class="tableSc">
|
|
|
+ <el-table-column type="index" label="序号" width="50">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="monitorPointName" label="监测点" width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column :label="'硫含量'">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent > normalPer" style="color:red">{{ scope.row.so2Percent }}% ↑ {{ ((scope.row.so2Percent - normalPer) / normalPer * 100).toFixed(0) }}%</div>
|
|
|
+ <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent <= normalPer">{{ scope.row.so2Percent }}%</div>
|
|
|
+</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
:label="'黑度'">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-if="scope.row.rcgSoot!=null && scope.row.rcgSoot > normalCount" style="color:red">
|
|
|
- {{ scope.row.rcgSoot }}度 ↑ {{ ((scope.row.rcgSoot - normalCount) / normalCount * 100).toFixed(0) }}%
|
|
|
- </div>
|
|
|
- <div v-if="scope.row.rcgSoot!=null && scope.row.rcgSoot <= normalCount">{{ scope.row.rcgSoot }}度</div>
|
|
|
- </template>
|
|
|
+<template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.rcgSoot!=null && scope.row.rcgSoot > normalCount" style="color:red">
|
|
|
+ {{ scope.row.rcgSoot }}度 ↑ {{ ((scope.row.rcgSoot - normalCount) / normalCount * 100).toFixed(0) }}%
|
|
|
+ </div>
|
|
|
+ <div v-if="scope.row.rcgSoot!=null && scope.row.rcgSoot <= normalCount">{{ scope.row.rcgSoot }}度</div>
|
|
|
+</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
property="createTime"
|
|
|
@@ -236,41 +236,41 @@
|
|
|
<el-table-column
|
|
|
:label="'SO2浓度'"
|
|
|
>
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-if="scope.row.so2Concentration!=null && scope.row.so2Concentration > normalPer" style="color:red">
|
|
|
- {{ scope.row.so2Concentration }}% ↑
|
|
|
- </div>
|
|
|
- <div v-if="scope.row.so2Concentration!=null && scope.row.so2Concentration <= normalPer">{{ scope.row.so2Concentration }}%</div>
|
|
|
- </template>
|
|
|
+<template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.so2Concentration!=null && scope.row.so2Concentration > normalPer" style="color:red">
|
|
|
+ {{ scope.row.so2Concentration }}% ↑
|
|
|
+ </div>
|
|
|
+ <div v-if="scope.row.so2Concentration!=null && scope.row.so2Concentration <= normalPer">{{ scope.row.so2Concentration }}%</div>
|
|
|
+</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
:label="'NO2浓度'"
|
|
|
>
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-if="scope.row.no2Concentration!=null && scope.row.no2Concentration > normalPer" style="color:red">
|
|
|
- {{ scope.row.no2Concentration }}% ↑
|
|
|
- </div>
|
|
|
- <div v-if="scope.row.no2Concentration!=null && scope.row.no2Concentration <= normalPer">{{ scope.row.no2Concentration }}%</div>
|
|
|
- </template>
|
|
|
+<template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.no2Concentration!=null && scope.row.no2Concentration > normalPer" style="color:red">
|
|
|
+ {{ scope.row.no2Concentration }}% ↑
|
|
|
+ </div>
|
|
|
+ <div v-if="scope.row.no2Concentration!=null && scope.row.no2Concentration <= normalPer">{{ scope.row.no2Concentration }}%</div>
|
|
|
+</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
:label="'CO2浓度'"
|
|
|
>
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-if="scope.row.co2Concentration!=null && scope.row.co2Concentration > normalPer" style="color:red">
|
|
|
- {{ scope.row.co2Concentration }}% ↑
|
|
|
- </div>
|
|
|
- <div v-if=" scope.row.co2Concentration!=null && scope.row.co2Concentration <= normalPer">{{ scope.row.co2Concentration }}%</div>
|
|
|
- </template>
|
|
|
+<template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.co2Concentration!=null && scope.row.co2Concentration > normalPer" style="color:red">
|
|
|
+ {{ scope.row.co2Concentration }}% ↑
|
|
|
+ </div>
|
|
|
+ <div v-if=" scope.row.co2Concentration!=null && scope.row.co2Concentration <= normalPer">{{ scope.row.co2Concentration }}%</div>
|
|
|
+</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
:label="'硫碳比'">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent > normalCount" style="color:red">
|
|
|
- {{ scope.row.so2Percent }}度 ↑
|
|
|
- </div>
|
|
|
- <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent <= normalCount">{{ scope.row.so2Percent }}度</div>
|
|
|
- </template>
|
|
|
+<template slot-scope="scope">
|
|
|
+ <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent > normalCount" style="color:red">
|
|
|
+ {{ scope.row.so2Percent }}度 ↑
|
|
|
+ </div>
|
|
|
+ <div v-if="scope.row.so2Percent!=null && scope.row.so2Percent <= normalCount">{{ scope.row.so2Percent }}度</div>
|
|
|
+</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
property="createTime"
|
|
|
@@ -381,20 +381,20 @@ import ImageLayer from "ol/layer/Image";
|
|
|
import View from "ol/View";
|
|
|
import VueAliplayerV2 from "vue-aliplayer-v2";
|
|
|
|
|
|
-import {getTopLeft, getWidth} from "ol/extent";
|
|
|
+import { getTopLeft, getWidth } from "ol/extent";
|
|
|
|
|
|
import ImageWMS from "ol/source/ImageWMS";
|
|
|
import WMTS from "ol/source/WMTS";
|
|
|
import TileWMS from "ol/source/TileWMS";
|
|
|
import WMTSTileGrid from "ol/tilegrid/WMTS";
|
|
|
-import {get as getProjection, transform} from "ol/proj";
|
|
|
-
|
|
|
-import {Vector as SourceVec} from "ol/source";
|
|
|
-import {Feature} from "ol";
|
|
|
-import {LineString, Point} from "ol/geom";
|
|
|
-import {Icon, Stroke, Style} from "ol/style";
|
|
|
-import {Vector as LayerVec} from "ol/layer";
|
|
|
-import {queryDatabymmsi, queryShipByDeviceId} from "@/api/data/deviceData";
|
|
|
+import { get as getProjection, transform } from "ol/proj";
|
|
|
+
|
|
|
+import { Vector as SourceVec } from "ol/source";
|
|
|
+import { Feature } from "ol";
|
|
|
+import { LineString, Point } from "ol/geom";
|
|
|
+import { Icon, Stroke, Style } from "ol/style";
|
|
|
+import { Vector as LayerVec } from "ol/layer";
|
|
|
+import { queryDatabymmsi, queryShipByDeviceId } from "@/api/data/deviceData";
|
|
|
import WebGLPointsLayer from 'ol/layer/WebGLPoints';
|
|
|
|
|
|
let ispro = process.env.NODE_ENV === "production";
|
|
|
@@ -402,737 +402,812 @@ let that = null;
|
|
|
let mapv = null;
|
|
|
// ispro = false;
|
|
|
export default {
|
|
|
- props: {
|
|
|
- src: {
|
|
|
- type: String,
|
|
|
- required: false
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- map: null,
|
|
|
- shipName: '',
|
|
|
- layersgroup: [{name: "普通船", label: "普通船"}],
|
|
|
- deviceShow: false,
|
|
|
- deviceData: '',
|
|
|
- showvideos: false,
|
|
|
- checkList: [],
|
|
|
- drawLayer: null,
|
|
|
- draw: null,
|
|
|
- normalPer: 0.1,
|
|
|
- normalCount: 1,
|
|
|
- activeName: 'first',
|
|
|
- tabledatas: [],
|
|
|
- deviceTableShow: false,
|
|
|
- posints: {},
|
|
|
-
|
|
|
- options: {
|
|
|
- preload: true,
|
|
|
- autoplay: true,
|
|
|
- rePlay: true,
|
|
|
- isLive: true, //切换为直播流的时候必填
|
|
|
- format: 'm3u8', //切换为直播流的时候必填
|
|
|
- },
|
|
|
- source: "",
|
|
|
- pointDevice: {
|
|
|
- name: '',
|
|
|
- list: [],
|
|
|
- },
|
|
|
- // deviceList:[],
|
|
|
-
|
|
|
- d_activeName: 'd_first',
|
|
|
- tableData: {minor: [], main: []},
|
|
|
- addrlist: [{name: "南京四桥", location: [1, 1]}],
|
|
|
- caddr: "南京四桥",
|
|
|
- cselect: [],
|
|
|
- shipShow: false,
|
|
|
- shipdata: {},
|
|
|
- };
|
|
|
- },
|
|
|
- props: ['deviceList'],
|
|
|
- components: {
|
|
|
- VueAliplayerV2
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- that = this;
|
|
|
- if (ispro) {
|
|
|
- this.initprod();
|
|
|
- } else {
|
|
|
- this.initdev();
|
|
|
- }
|
|
|
- mapv = this.map;
|
|
|
-
|
|
|
+ props: {
|
|
|
+ src: {
|
|
|
+ type: String,
|
|
|
+ required: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ map: null,
|
|
|
+ shipName: '',
|
|
|
+ layersgroup: [{ name: "普通船", label: "普通船" }],
|
|
|
+ deviceShow: false,
|
|
|
+ deviceData: '',
|
|
|
+ showvideos: false,
|
|
|
+ checkList: [],
|
|
|
+ drawLayer: null,
|
|
|
+ draw: null,
|
|
|
+ normalPer: 0.1,
|
|
|
+ normalCount: 1,
|
|
|
+ activeName: 'first',
|
|
|
+ tabledatas: [],
|
|
|
+ deviceTableShow: false,
|
|
|
+ posints: {},
|
|
|
+
|
|
|
+ options: {
|
|
|
+ preload: true,
|
|
|
+ autoplay: true,
|
|
|
+ rePlay: true,
|
|
|
+ isLive: true, //切换为直播流的时候必填
|
|
|
+ format: 'm3u8', //切换为直播流的时候必填
|
|
|
+ },
|
|
|
+ source: "",
|
|
|
+ pointDevice: {
|
|
|
+ name: '',
|
|
|
+ list: [],
|
|
|
+ },
|
|
|
+ // deviceList:[],
|
|
|
+
|
|
|
+ d_activeName: 'd_first',
|
|
|
+ tableData: { minor: [], main: [] },
|
|
|
+ addrlist: [{ name: "南京四桥", location: [1, 1] }],
|
|
|
+ caddr: "南京四桥",
|
|
|
+ cselect: [],
|
|
|
+ shipShow: false,
|
|
|
+ shipdata: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: ['deviceList'],
|
|
|
+ components: {
|
|
|
+ VueAliplayerV2
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ that = this;
|
|
|
+ if (ispro) {
|
|
|
+ this.initprod();
|
|
|
+ } else {
|
|
|
+ this.initdev();
|
|
|
+ }
|
|
|
+ mapv = this.map;
|
|
|
+
|
|
|
+
|
|
|
+ this.map.on("click", function(e) {
|
|
|
+ // console.log(e)
|
|
|
+ var feature = that.map.forEachFeatureAtPixel(e.pixel,
|
|
|
+ function(feature) {
|
|
|
+ return feature;
|
|
|
+ });
|
|
|
+ if (feature) { //这里说明我们点击的是点标记，
|
|
|
+ let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
|
|
|
+ if (tadata) {
|
|
|
+ if (tadata.sectionId == "line") {
|
|
|
+ // alert("我是线：" + tadata.towerNumber)
|
|
|
+ }
|
|
|
+ if (tadata.sectionId == "point") {
|
|
|
+ if (tadata.type == "ship") {
|
|
|
+ that.shipShow = true;
|
|
|
+ that.deviceShow = false;
|
|
|
+ that.deviceTableShow = false
|
|
|
+ that.shipName = tadata.data;
|
|
|
+ that.activeName = "first";
|
|
|
+
|
|
|
+ } else if (tadata.type == "device") {
|
|
|
+ that.deviceShow = true;
|
|
|
+ that.shipShow = false;
|
|
|
+ that.deviceTableShow = false
|
|
|
+ that.deviceData = tadata.data;
|
|
|
+ that.d_activeName = 'd_first';
|
|
|
+ if (tadata.data.source == "heiyan_ship_recognition") {
|
|
|
+ that.source = tadata.data.liveStreamUrl;
|
|
|
+ setTimeout(function() {
|
|
|
+ that.$refs.VueAliplayerV2.play();
|
|
|
+ }, 1000)
|
|
|
+ that.showvideos = true;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ // alert("我是点："+tadata.data)
|
|
|
+ }
|
|
|
+ //含有lnglat 参数的点标记触发事件
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- this.map.on("click", function (e) {
|
|
|
- // console.log(e)
|
|
|
- var feature = that.map.forEachFeatureAtPixel(e.pixel,
|
|
|
- function (feature) {
|
|
|
- return feature;
|
|
|
+ this.map.on("change", function(e) {
|
|
|
+ that.$parent.getallshipData();
|
|
|
});
|
|
|
- if (feature) { //这里说明我们点击的是点标记，
|
|
|
- let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
|
|
|
- if (tadata) {
|
|
|
- if (tadata.sectionId == "line") {
|
|
|
- // alert("我是线：" + tadata.towerNumber)
|
|
|
- }
|
|
|
- if (tadata.sectionId == "point") {
|
|
|
- if (tadata.type == "ship") {
|
|
|
- that.shipShow = true;
|
|
|
- that.deviceShow = false;
|
|
|
- that.deviceTableShow = false
|
|
|
- that.shipName = tadata.data;
|
|
|
- that.activeName = "first";
|
|
|
-
|
|
|
- } else if (tadata.type == "device") {
|
|
|
- that.deviceShow = true;
|
|
|
- that.shipShow = false;
|
|
|
- that.deviceTableShow = false
|
|
|
- that.deviceData = tadata.data;
|
|
|
- that.d_activeName = 'd_first';
|
|
|
- if (tadata.data.source == "heiyan_ship_recognition") {
|
|
|
- that.source = tadata.data.liveStreamUrl;
|
|
|
- setTimeout(function () {
|
|
|
- that.$refs.VueAliplayerV2.play();
|
|
|
- }, 1000)
|
|
|
- that.showvideos = true;
|
|
|
-
|
|
|
- }
|
|
|
+ // this.addpoint();
|
|
|
+ // this.addline();
|
|
|
|
|
|
- }
|
|
|
- // alert("我是点："+tadata.data)
|
|
|
- }
|
|
|
- //含有lnglat 参数的点标记触发事件
|
|
|
+ setTimeout(function() {
|
|
|
+ // alert(11);
|
|
|
+ that.closevideo();
|
|
|
+
|
|
|
+ }, 1000)
|
|
|
+
|
|
|
+ window.getmapviewlatlng = function() {
|
|
|
+ var pps = mapv.getView().calculateExtent(mapv.getSize());
|
|
|
+ return (that.transpoints([
|
|
|
+ [pps[0], pps[1]],
|
|
|
+ [pps[2], pps[3]]
|
|
|
+ ], 1));
|
|
|
}
|
|
|
- }
|
|
|
- });
|
|
|
|
|
|
- this.map.on("change",function(e){
|
|
|
- that.$parent.getallshipData();
|
|
|
- });
|
|
|
- // this.addpoint();
|
|
|
- // this.addline();
|
|
|
|
|
|
- setTimeout(function () {
|
|
|
- // alert(11);
|
|
|
- that.closevideo();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //[[1111,1111]]
|
|
|
+ closevideo() {
|
|
|
+ this.showvideos = false;
|
|
|
+ this.$refs.VueAliplayerV2.pause();
|
|
|
+ },
|
|
|
+ handleClick1: function(tab, event) {
|
|
|
|
|
|
- }, 1000)
|
|
|
+ var sect = tab.name;
|
|
|
+ if (sect == "d_first") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- window.getmapviewlatlng = function () {
|
|
|
- var pps = mapv.getView().calculateExtent(mapv.getSize());
|
|
|
- return (that.transpoints([[pps[0], pps[1]], [pps[2], pps[3]]], 1));
|
|
|
- }
|
|
|
+ var q = {
|
|
|
+ deviceId: this.deviceData.deviceId,
|
|
|
+ illegalStatus: sect == "d_second" ? 2 : 3,
|
|
|
+ index: this.deviceData.source
|
|
|
+ }
|
|
|
|
|
|
+ this.tabledatas = [];
|
|
|
+ queryShipByDeviceId(q).then(data => {
|
|
|
+ // console.log(data);
|
|
|
+ data.data.forEach(element => {
|
|
|
+ element["values"] = element.illegalType == "heiyan" ? element.rcgSoot : (element.illegalType == "guangpu" ? element.so2Percent : (element.illegalType == "xiutan" ? element.so2Percent : 0));
|
|
|
+ this.tabledatas.push(element);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ //dd
|
|
|
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //[[1111,1111]]
|
|
|
- closevideo() {
|
|
|
- this.showvideos = false;
|
|
|
- this.$refs.VueAliplayerV2.pause();
|
|
|
- },
|
|
|
- handleClick1: function (tab, event) {
|
|
|
-
|
|
|
- var sect = tab.name;
|
|
|
- if (sect == "d_first") {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- var q = {
|
|
|
- deviceId: this.deviceData.deviceId,
|
|
|
- illegalStatus: sect == "d_second" ? 2 : 3,
|
|
|
- index: this.deviceData.source
|
|
|
- }
|
|
|
-
|
|
|
- this.tabledatas = [];
|
|
|
- queryShipByDeviceId(q).then(data => {
|
|
|
- // console.log(data);
|
|
|
- data.data.forEach(element => {
|
|
|
- element["values"] = element.illegalType == "heiyan" ? element.rcgSoot : (element.illegalType == "guangpu" ? element.so2Percent : (element.illegalType == "xiutan" ? element.so2Percent : 0));
|
|
|
- this.tabledatas.push(element);
|
|
|
- });
|
|
|
- });
|
|
|
- //dd
|
|
|
+ },
|
|
|
+ clickcg: (value) => {
|
|
|
+
|
|
|
+ that.pointDevice.list = that.deviceList[value];
|
|
|
+ that.deviceTableShow = true;
|
|
|
+ that.pointDevice.name = value;
|
|
|
+ that.addrlist.forEach(element => {
|
|
|
+ if (element.name == value) {
|
|
|
+ var lo = that.transpoints(element.location, 0)[0];
|
|
|
+ // console.log(lo)
|
|
|
+ mapv.getView().setCenter(lo);
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- },
|
|
|
- clickcg: (value) => {
|
|
|
-
|
|
|
- that.pointDevice.list = that.deviceList[value];
|
|
|
- that.deviceTableShow = true;
|
|
|
- that.pointDevice.name = value;
|
|
|
- that.addrlist.forEach(element => {
|
|
|
- if (element.name == value) {
|
|
|
- var lo = that.transpoints(element.location, 0)[0];
|
|
|
- // console.log(lo)
|
|
|
- mapv.getView().setCenter(lo);
|
|
|
- }
|
|
|
- });
|
|
|
+ },
|
|
|
+ clickly: (value) => {
|
|
|
+ if (value.indexOf('普通船') != -1) {
|
|
|
+ that.$parent.startgetall();
|
|
|
+ // console.log(that.posints)
|
|
|
+
|
|
|
+ } else {
|
|
|
+ that.$parent.stopgetall();
|
|
|
+ for (const key in that.posints) {
|
|
|
+ if (key.indexOf("ship_normal_") == -1) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ var lays = that.posints[key];
|
|
|
+ if (lays == null) continue;
|
|
|
+ lays.disposeInternal();
|
|
|
+ that.map.removeLayer(lays);
|
|
|
+ that.posints[key] = null;
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
- clickly: (value) => {
|
|
|
- if (value.indexOf('普通船') != -1) {
|
|
|
- that.$parent.startgetall();
|
|
|
- // console.log(that.posints)
|
|
|
-
|
|
|
- } else {
|
|
|
- that.$parent.stopgetall();
|
|
|
- for (const key in that.posints) {
|
|
|
- if (key.indexOf("ship_normal_") == -1) {
|
|
|
- continue;
|
|
|
- }
|
|
|
- var lays = that.posints[key];
|
|
|
- if (lays == null) continue;
|
|
|
- lays.disposeInternal();
|
|
|
- that.map.removeLayer(lays);
|
|
|
- that.posints[key] = null;
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ },
|
|
|
+ setaddrlist(list) {
|
|
|
+ this.addrlist = list;
|
|
|
+ this.caddr = list[0].name;
|
|
|
+ var lo = that.transpoints(list[0].location, 0)[0];
|
|
|
+ mapv.getView().setCenter(lo);
|
|
|
+ },
|
|
|
+ addshipData(list) {
|
|
|
|
|
|
- },
|
|
|
- setaddrlist(list) {
|
|
|
- this.addrlist = list;
|
|
|
- this.caddr = list[0].name;
|
|
|
- var lo = that.transpoints(list[0].location, 0)[0];
|
|
|
- mapv.getView().setCenter(lo);
|
|
|
- },
|
|
|
- addshipData(list) {
|
|
|
+ },
|
|
|
+ handleClick(tab, event) {
|
|
|
+ // console.log(tab, event);
|
|
|
+ var sect = tab.name;
|
|
|
+ if (sect == "first") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var q = {
|
|
|
+ mmsi: this.shipName.mmsi
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
- handleClick(tab, event) {
|
|
|
- // console.log(tab, event);
|
|
|
- var sect = tab.name;
|
|
|
- if (sect == "first") {
|
|
|
- return;
|
|
|
- }
|
|
|
- var q = {
|
|
|
- mmsi: this.shipName.mmsi
|
|
|
- }
|
|
|
-
|
|
|
- this.tableData = {minor: [], main: []};
|
|
|
- queryDatabymmsi(q).then(data => {
|
|
|
- // console.log(data);
|
|
|
- this.tableData = data.data;
|
|
|
- // console.log(deviceList);
|
|
|
- });
|
|
|
+ this.tableData = { minor: [], main: [] };
|
|
|
+ queryDatabymmsi(q).then(data => {
|
|
|
+ // console.log(data);
|
|
|
+ this.tableData = data.data;
|
|
|
+ // console.log(deviceList);
|
|
|
+ });
|
|
|
|
|
|
|
|
|
- },
|
|
|
- transpoints: function (points, type) {
|
|
|
- if (false) {
|
|
|
- return points;
|
|
|
- } else {
|
|
|
- if (type == 1) {
|
|
|
- var pp = [];
|
|
|
- points.forEach(point => {
|
|
|
- pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
|
|
|
- });
|
|
|
- return pp;
|
|
|
- } else {
|
|
|
- var pp = [];
|
|
|
- points.forEach(point => {
|
|
|
- pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
|
|
|
- });
|
|
|
- return pp;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- initdev: function () {
|
|
|
-
|
|
|
- function getWMTSLayer(url, layer) {
|
|
|
- let key = "98ec3e37b32974c2d58ea1a790640fe7"
|
|
|
- let projection = getProjection("EPSG:3857");
|
|
|
- let projectionExtent = projection.getExtent();
|
|
|
- let size = getWidth(projectionExtent) / 256;
|
|
|
-
|
|
|
- function getResolutions() {
|
|
|
- let resolutions = [];
|
|
|
- for (let z = 1; z < 19; ++z) {
|
|
|
- resolutions[z] = size / Math.pow(2, z);
|
|
|
- }
|
|
|
- return resolutions
|
|
|
- }
|
|
|
+ },
|
|
|
+ transpoints: function(points, type) {
|
|
|
+ if (false) {
|
|
|
+ return points;
|
|
|
+ } else {
|
|
|
+ if (type == 1) {
|
|
|
+ var pp = [];
|
|
|
+ points.forEach(point => {
|
|
|
+ pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
|
|
|
+ });
|
|
|
+ return pp;
|
|
|
+ } else {
|
|
|
+ var pp = [];
|
|
|
+ points.forEach(point => {
|
|
|
+ pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
|
|
|
+ });
|
|
|
+ return pp;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initdev: function() {
|
|
|
+
|
|
|
+ function getWMTSLayer(url, layer) {
|
|
|
+ let key = "98ec3e37b32974c2d58ea1a790640fe7"
|
|
|
+ let projection = getProjection("EPSG:3857");
|
|
|
+ let projectionExtent = projection.getExtent();
|
|
|
+ let size = getWidth(projectionExtent) / 256;
|
|
|
+
|
|
|
+ function getResolutions() {
|
|
|
+ let resolutions = [];
|
|
|
+ for (let z = 1; z < 19; ++z) {
|
|
|
+ resolutions[z] = size / Math.pow(2, z);
|
|
|
+ }
|
|
|
+ return resolutions
|
|
|
+ }
|
|
|
+
|
|
|
+ return new TileLayer({
|
|
|
+ source: new WMTS({
|
|
|
+ url: url,
|
|
|
+ layer: layer,
|
|
|
+ style: "default",
|
|
|
+ matrixSet: "w",
|
|
|
+ format: "tiles",
|
|
|
+ tileGrid: new WMTSTileGrid({
|
|
|
+ origin: getTopLeft(projectionExtent),
|
|
|
+ resolutions: getResolutions(),
|
|
|
+ matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
|
|
|
+ }),
|
|
|
+ }),
|
|
|
+
|
|
|
+ })
|
|
|
|
|
|
- return new TileLayer({
|
|
|
- source: new WMTS({
|
|
|
- url: url,
|
|
|
- layer: layer,
|
|
|
- style: "default",
|
|
|
- matrixSet: "w",
|
|
|
- format: "tiles",
|
|
|
- tileGrid: new WMTSTileGrid({
|
|
|
- origin: getTopLeft(projectionExtent),
|
|
|
- resolutions: getResolutions(),
|
|
|
- matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
|
|
|
- }),
|
|
|
- }),
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- var projection = getProjection("EPSG:3857");
|
|
|
- var format = 'image/png';
|
|
|
- var bounds = [13325725.763124488, 3757032.814272983,
|
|
|
- 13345293.642365493, 3776600.693513988
|
|
|
- ];
|
|
|
- var untiled = new ImageLayer({
|
|
|
- source: new ImageWMS({
|
|
|
- ratio: 1,
|
|
|
- url: 'http://36.156.155.131:8090/geoserver/wms',
|
|
|
- params: {
|
|
|
- 'FORMAT': format,
|
|
|
- 'VERSION': '1.1.1',
|
|
|
- "STYLES": '',
|
|
|
- "CJAUTH": 'CJUSER',
|
|
|
- "LAYERS": 'CJ:G_CJ_NJ',
|
|
|
- "TRANSPARENT": 'true',
|
|
|
- "exceptions": 'application/vnd.ogc.se_inimage',
|
|
|
- }
|
|
|
- })
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- const ign = getWMTSLayer('https://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec');
|
|
|
-
|
|
|
- var tiled = new TileLayer({
|
|
|
- visible: false,
|
|
|
- source: new TileWMS({
|
|
|
- url: 'http://36.156.155.131:8090/geoserver/wms',
|
|
|
- params: {
|
|
|
- 'FORMAT': format,
|
|
|
- 'VERSION': '1.1.1',
|
|
|
- tiled: true,
|
|
|
- "STYLES": '',
|
|
|
- "CJAUTH": 'CJUSER',
|
|
|
- "LAYERS": 'CJ:G_CJ_NJ',
|
|
|
- "TRANSPARENT": 'true',
|
|
|
- "exceptions": 'application/vnd.ogc.se_inimage',
|
|
|
- tilesOrigin: 13325725.763124488 + "," + 3757032.814272983
|
|
|
- }
|
|
|
- })
|
|
|
- });
|
|
|
-
|
|
|
- var map = new Map({
|
|
|
- target: 'map',
|
|
|
- layers: [
|
|
|
- ign,
|
|
|
- getWMTSLayer('https://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),
|
|
|
-
|
|
|
- untiled,
|
|
|
- tiled
|
|
|
- ],
|
|
|
- view: new View({
|
|
|
- projection: projection
|
|
|
- })
|
|
|
- });
|
|
|
- // map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
|
|
|
- this.map = map;
|
|
|
- // map.getView().setCenter(
|
|
|
- // [118.642876, 31.970445]
|
|
|
- // );
|
|
|
- map.getView().setCenter(this.transpoints([
|
|
|
- [118.642876, 31.970445]
|
|
|
- ], 0)[0]);
|
|
|
- map.getView().setZoom(13);
|
|
|
- },
|
|
|
- initdev1: function () {
|
|
|
- const proj3857 = getProjection("EPSG:3857");
|
|
|
- const tileGrid = new WMTSTileGrid({
|
|
|
- tileSize: [256, 256],
|
|
|
- origin: [-2.003750834e7, 2.003750834e7],
|
|
|
- extent: [-2.003750834e7, -2.003750834e7, 2.003750834e7, 2.003750834e7],
|
|
|
- resolutions: [
|
|
|
- 76.43702827453613,
|
|
|
- 38.218514137268066,
|
|
|
- 19.109257068634033,
|
|
|
- 9.554628534317017,
|
|
|
- 4.777314267158508
|
|
|
- ],
|
|
|
- matrixIds: [
|
|
|
- "EPSG:3857:10",
|
|
|
- "EPSG:3857:11",
|
|
|
- "EPSG:3857:12",
|
|
|
- "EPSG:3857:13",
|
|
|
- "EPSG:3857:14"
|
|
|
- ]
|
|
|
- });
|
|
|
-
|
|
|
- const ign_source = new WMTS({
|
|
|
- url: "http://geo.xt.wenhq.top:8083/geoserver/gwc/service/wmts?",
|
|
|
- layer: "test:nj10",
|
|
|
- matrixSet: "EPSG:3857",
|
|
|
- format: "image/png",
|
|
|
- projection: proj3857,
|
|
|
- tileGrid: tileGrid,
|
|
|
- style: ""
|
|
|
- });
|
|
|
-
|
|
|
- const ign = new TileLayer({
|
|
|
- source: ign_source
|
|
|
- });
|
|
|
- const map = new Map({
|
|
|
- target: "map",
|
|
|
- layers: [ign],
|
|
|
- view: new View({
|
|
|
- center: [0, 0],
|
|
|
- zoom: 2
|
|
|
- })
|
|
|
- });
|
|
|
- map
|
|
|
- .getView()
|
|
|
- .fit(
|
|
|
- [
|
|
|
- 13149614.849955281,
|
|
|
- 3639625.538826909,
|
|
|
- 13306157.88388332,
|
|
|
- 3874440.0897189667
|
|
|
- ],
|
|
|
- map.getSize()
|
|
|
- );
|
|
|
-
|
|
|
- this.map = map;
|
|
|
- map.getView().setCenter(this.transpoints([
|
|
|
- [118.642876, 31.970445]
|
|
|
- ], 0)[0]);
|
|
|
- map.getView().setZoom(13);
|
|
|
- },
|
|
|
- initprod: function () {
|
|
|
- // const proj3857 = getProjection("EPSG:4326");
|
|
|
- function getWMTSLayer(url, layer) {
|
|
|
- let key = "98ec3e37b32974c2d58ea1a790640fe7"
|
|
|
- let projection = getProjection("EPSG:3857");
|
|
|
- let projectionExtent = projection.getExtent();
|
|
|
- let size = getWidth(projectionExtent) / 256;
|
|
|
-
|
|
|
- function getResolutions() {
|
|
|
- let resolutions = [];
|
|
|
- for (let z = 1; z < 19; ++z) {
|
|
|
- resolutions[z] = size / Math.pow(2, z);
|
|
|
- }
|
|
|
- return resolutions
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- return new TileLayer({
|
|
|
- source: new WMTS({
|
|
|
- url: url,
|
|
|
- layer: layer,
|
|
|
- style: "default",
|
|
|
- matrixSet: "w",
|
|
|
- format: "tiles",
|
|
|
- tileGrid: new WMTSTileGrid({
|
|
|
- origin: getTopLeft(projectionExtent),
|
|
|
- resolutions: getResolutions(),
|
|
|
- matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
|
|
|
- }),
|
|
|
- }),
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- var projection = getProjection("EPSG:3857");
|
|
|
- var format = 'image/png';
|
|
|
- var bounds = [13325725.763124488, 3757032.814272983,
|
|
|
- 13345293.642365493, 3776600.693513988
|
|
|
- ];
|
|
|
- var untiled = new ImageLayer({
|
|
|
- source: new ImageWMS({
|
|
|
- ratio: 1,
|
|
|
- url: 'http://198.17.188.64/geoserver/gwc/service/wms',
|
|
|
- params: {
|
|
|
- 'FORMAT': format,
|
|
|
- 'VERSION': '1.1.1',
|
|
|
- "STYLES": '',
|
|
|
- "CJAUTH": 'CJUSER',
|
|
|
- "LAYERS": 'CJ:G_CJ',
|
|
|
- "TRANSPARENT": 'true',
|
|
|
- "exceptions": 'application/vnd.ogc.se_inimage',
|
|
|
- }
|
|
|
- })
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- var tiled = new TileLayer({
|
|
|
- visible: false,
|
|
|
- source: new TileWMS({
|
|
|
- url: 'http://198.17.188.64/geoserver/gwc/service/wms',
|
|
|
- params: {
|
|
|
- 'FORMAT': format,
|
|
|
- 'VERSION': '1.1.1',
|
|
|
- tiled: true,
|
|
|
- "STYLES": '',
|
|
|
- "CJAUTH": 'CJUSER',
|
|
|
- "LAYERS": 'CJ:G_CJ',
|
|
|
- "TRANSPARENT": 'true',
|
|
|
- "exceptions": 'application/vnd.ogc.se_inimage',
|
|
|
- tilesOrigin: 13325725.763124488 + "," + 3757032.814272983
|
|
|
- }
|
|
|
- })
|
|
|
- });
|
|
|
-
|
|
|
- const map = new Map({
|
|
|
- target: "map",
|
|
|
- layers: [getWMTSLayer('http://198.17.188.64:9879/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec'), getWMTSLayer('http://198.17.188.64:9879/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),
|
|
|
- untiled,
|
|
|
- tiled],
|
|
|
- view: new View({
|
|
|
- projection: projection
|
|
|
- })
|
|
|
- });
|
|
|
- map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
|
|
|
- this.map = map;
|
|
|
- map.getView().setCenter(this.transpoints([
|
|
|
- [118.642876, 31.970445]
|
|
|
- ], 0)[0]);
|
|
|
- map.getView().setZoom(13);
|
|
|
- },
|
|
|
+ var projection = getProjection("EPSG:3857");
|
|
|
+ var format = 'image/png';
|
|
|
+ var bounds = [13325725.763124488, 3757032.814272983,
|
|
|
+ 13345293.642365493, 3776600.693513988
|
|
|
+ ];
|
|
|
+ var untiled = new ImageLayer({
|
|
|
+ source: new ImageWMS({
|
|
|
+ ratio: 1,
|
|
|
+ url: 'http://36.156.155.131:8090/geoserver/wms',
|
|
|
+ params: {
|
|
|
+ 'FORMAT': format,
|
|
|
+ 'VERSION': '1.1.1',
|
|
|
+ "STYLES": '',
|
|
|
+ "CJAUTH": 'CJUSER',
|
|
|
+ "LAYERS": 'CJ:G_CJ_NJ',
|
|
|
+ "TRANSPARENT": 'true',
|
|
|
+ "exceptions": 'application/vnd.ogc.se_inimage',
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ const ign = getWMTSLayer('https://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec');
|
|
|
+
|
|
|
+ var tiled = new TileLayer({
|
|
|
+ visible: false,
|
|
|
+ source: new TileWMS({
|
|
|
+ url: 'http://36.156.155.131:8090/geoserver/wms',
|
|
|
+ params: {
|
|
|
+ 'FORMAT': format,
|
|
|
+ 'VERSION': '1.1.1',
|
|
|
+ tiled: true,
|
|
|
+ "STYLES": '',
|
|
|
+ "CJAUTH": 'CJUSER',
|
|
|
+ "LAYERS": 'CJ:G_CJ_NJ',
|
|
|
+ "TRANSPARENT": 'true',
|
|
|
+ "exceptions": 'application/vnd.ogc.se_inimage',
|
|
|
+ tilesOrigin: 13325725.763124488 + "," + 3757032.814272983
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ var map = new Map({
|
|
|
+ target: 'map',
|
|
|
+ layers: [
|
|
|
+ ign,
|
|
|
+ getWMTSLayer('https://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),
|
|
|
+
|
|
|
+ untiled,
|
|
|
+ tiled
|
|
|
+ ],
|
|
|
+ view: new View({
|
|
|
+ projection: projection
|
|
|
+ })
|
|
|
+ });
|
|
|
+ // map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
|
|
|
+ this.map = map;
|
|
|
+ // map.getView().setCenter(
|
|
|
+ // [118.642876, 31.970445]
|
|
|
+ // );
|
|
|
+ map.getView().setCenter(this.transpoints([
|
|
|
+ [118.642876, 31.970445]
|
|
|
+ ], 0)[0]);
|
|
|
+ map.getView().setZoom(13);
|
|
|
+ },
|
|
|
+ initdev1: function() {
|
|
|
+ const proj3857 = getProjection("EPSG:3857");
|
|
|
+ const tileGrid = new WMTSTileGrid({
|
|
|
+ tileSize: [256, 256],
|
|
|
+ origin: [-2.003750834e7, 2.003750834e7],
|
|
|
+ extent: [-2.003750834e7, -2.003750834e7, 2.003750834e7, 2.003750834e7],
|
|
|
+ resolutions: [
|
|
|
+ 76.43702827453613,
|
|
|
+ 38.218514137268066,
|
|
|
+ 19.109257068634033,
|
|
|
+ 9.554628534317017,
|
|
|
+ 4.777314267158508
|
|
|
+ ],
|
|
|
+ matrixIds: [
|
|
|
+ "EPSG:3857:10",
|
|
|
+ "EPSG:3857:11",
|
|
|
+ "EPSG:3857:12",
|
|
|
+ "EPSG:3857:13",
|
|
|
+ "EPSG:3857:14"
|
|
|
+ ]
|
|
|
+ });
|
|
|
+
|
|
|
+ const ign_source = new WMTS({
|
|
|
+ url: "http://geo.xt.wenhq.top:8083/geoserver/gwc/service/wmts?",
|
|
|
+ layer: "test:nj10",
|
|
|
+ matrixSet: "EPSG:3857",
|
|
|
+ format: "image/png",
|
|
|
+ projection: proj3857,
|
|
|
+ tileGrid: tileGrid,
|
|
|
+ style: ""
|
|
|
+ });
|
|
|
+
|
|
|
+ const ign = new TileLayer({
|
|
|
+ source: ign_source
|
|
|
+ });
|
|
|
+ const map = new Map({
|
|
|
+ target: "map",
|
|
|
+ layers: [ign],
|
|
|
+ view: new View({
|
|
|
+ center: [0, 0],
|
|
|
+ zoom: 2
|
|
|
+ })
|
|
|
+ });
|
|
|
+ map
|
|
|
+ .getView()
|
|
|
+ .fit(
|
|
|
+ [
|
|
|
+ 13149614.849955281,
|
|
|
+ 3639625.538826909,
|
|
|
+ 13306157.88388332,
|
|
|
+ 3874440.0897189667
|
|
|
+ ],
|
|
|
+ map.getSize()
|
|
|
+ );
|
|
|
+
|
|
|
+ this.map = map;
|
|
|
+ map.getView().setCenter(this.transpoints([
|
|
|
+ [118.642876, 31.970445]
|
|
|
+ ], 0)[0]);
|
|
|
+ map.getView().setZoom(13);
|
|
|
+ },
|
|
|
+ initprod: function() {
|
|
|
+ // const proj3857 = getProjection("EPSG:4326");
|
|
|
+ function getWMTSLayer(url, layer) {
|
|
|
+ let key = "98ec3e37b32974c2d58ea1a790640fe7"
|
|
|
+ let projection = getProjection("EPSG:3857");
|
|
|
+ let projectionExtent = projection.getExtent();
|
|
|
+ let size = getWidth(projectionExtent) / 256;
|
|
|
+
|
|
|
+ function getResolutions() {
|
|
|
+ let resolutions = [];
|
|
|
+ for (let z = 1; z < 19; ++z) {
|
|
|
+ resolutions[z] = size / Math.pow(2, z);
|
|
|
+ }
|
|
|
+ return resolutions
|
|
|
+ }
|
|
|
+
|
|
|
+ return new TileLayer({
|
|
|
+ source: new WMTS({
|
|
|
+ url: url,
|
|
|
+ layer: layer,
|
|
|
+ style: "default",
|
|
|
+ matrixSet: "w",
|
|
|
+ format: "tiles",
|
|
|
+ tileGrid: new WMTSTileGrid({
|
|
|
+ origin: getTopLeft(projectionExtent),
|
|
|
+ resolutions: getResolutions(),
|
|
|
+ matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
|
|
|
+ }),
|
|
|
+ }),
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
- addline: function (linePoint) {
|
|
|
+ var projection = getProjection("EPSG:3857");
|
|
|
+ var format = 'image/png';
|
|
|
+ var bounds = [13325725.763124488, 3757032.814272983,
|
|
|
+ 13345293.642365493, 3776600.693513988
|
|
|
+ ];
|
|
|
+ var untiled = new ImageLayer({
|
|
|
+ source: new ImageWMS({
|
|
|
+ ratio: 1,
|
|
|
+ url: 'http://198.17.188.64/geoserver/gwc/service/wms',
|
|
|
+ params: {
|
|
|
+ 'FORMAT': format,
|
|
|
+ 'VERSION': '1.1.1',
|
|
|
+ "STYLES": '',
|
|
|
+ "CJAUTH": 'CJUSER',
|
|
|
+ "LAYERS": 'CJ:G_CJ',
|
|
|
+ "TRANSPARENT": 'true',
|
|
|
+ "exceptions": 'application/vnd.ogc.se_inimage',
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ var tiled = new TileLayer({
|
|
|
+ visible: false,
|
|
|
+ source: new TileWMS({
|
|
|
+ url: 'http://198.17.188.64/geoserver/gwc/service/wms',
|
|
|
+ params: {
|
|
|
+ 'FORMAT': format,
|
|
|
+ 'VERSION': '1.1.1',
|
|
|
+ tiled: true,
|
|
|
+ "STYLES": '',
|
|
|
+ "CJAUTH": 'CJUSER',
|
|
|
+ "LAYERS": 'CJ:G_CJ',
|
|
|
+ "TRANSPARENT": 'true',
|
|
|
+ "exceptions": 'application/vnd.ogc.se_inimage',
|
|
|
+ tilesOrigin: 13325725.763124488 + "," + 3757032.814272983
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ const map = new Map({
|
|
|
+ target: "map",
|
|
|
+ layers: [getWMTSLayer('http://198.17.188.64:9879/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec'), getWMTSLayer('http://198.17.188.64:9879/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),
|
|
|
+ untiled,
|
|
|
+ tiled
|
|
|
+ ],
|
|
|
+ view: new View({
|
|
|
+ projection: projection
|
|
|
+ })
|
|
|
+ });
|
|
|
+ map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
|
|
|
+ this.map = map;
|
|
|
+ map.getView().setCenter(this.transpoints([
|
|
|
+ [118.642876, 31.970445]
|
|
|
+ ], 0)[0]);
|
|
|
+ map.getView().setZoom(13);
|
|
|
+ },
|
|
|
+
|
|
|
+ addline: function(linePoint) {
|
|
|
+
|
|
|
+ var points = this.transpoints(linePoint, 0)
|
|
|
+
|
|
|
+ let line = new Feature({
|
|
|
+ tadata: {
|
|
|
+ sectionId: "line",
|
|
|
+ towerNumber: 22
|
|
|
+ },
|
|
|
+ geometry: new LineString(points)
|
|
|
+ }); //这里要注意写fromLonLat，很重要
|
|
|
+ line.setStyle(new Style({
|
|
|
+ stroke: new Stroke({
|
|
|
+ width: 8,
|
|
|
+ color: "#0814f1"
|
|
|
+ })
|
|
|
+ }));
|
|
|
+ this.linevectorLayer = new LayerVec({
|
|
|
+ source: new SourceVec({
|
|
|
+ features: [line] //要绘制多段线，直接push到这里面就行了
|
|
|
+ }),
|
|
|
+ zIndex: 2
|
|
|
+ });
|
|
|
+ this.map.addLayer(this.linevectorLayer); //这里是执行，执行之后点就出来了
|
|
|
|
|
|
- var points = this.transpoints(linePoint, 0)
|
|
|
|
|
|
- let line = new Feature({
|
|
|
- tadata: {
|
|
|
- sectionId: "line",
|
|
|
- towerNumber: 22
|
|
|
},
|
|
|
- geometry: new LineString(points)
|
|
|
- }); //这里要注意写fromLonLat，很重要
|
|
|
- line.setStyle(new Style({
|
|
|
- stroke: new Stroke({
|
|
|
- width: 8,
|
|
|
- color: "#0814f1"
|
|
|
- })
|
|
|
- }));
|
|
|
- this.linevectorLayer = new LayerVec({
|
|
|
- source: new SourceVec({
|
|
|
- features: [line] //要绘制多段线，直接push到这里面就行了
|
|
|
- }),
|
|
|
- zIndex: 2
|
|
|
- });
|
|
|
- this.map.addLayer(this.linevectorLayer); //这里是执行，执行之后点就出来了
|
|
|
|
|
|
+ addpoint: function(addrArry, data, img, type, rotation = 0, zindex = 3, shipl = "ship_") {
|
|
|
+ var lnglat = this.transpoints(addrArry, 0)[0];
|
|
|
+ var lnglats = null;
|
|
|
|
|
|
- },
|
|
|
+ if (data["lnglat"] != undefined) {
|
|
|
+ lnglats = this.transpoints(data["lnglat"], 0);
|
|
|
+ }
|
|
|
+ lnglats = null;
|
|
|
+
|
|
|
+ let tamarker = new Feature({
|
|
|
+ tadata: {
|
|
|
+ sectionId: "point",
|
|
|
+ towerNumber: 22,
|
|
|
+ data: data,
|
|
|
+ type: type
|
|
|
+ }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
|
|
|
+
|
|
|
+ geometry: new Point(lnglats == null ? lnglat : lnglats[0]) //这里是点坐标的位置，这里要注意fromLonLat
|
|
|
+ });
|
|
|
+ tamarker.setStyle(
|
|
|
+ new Style({
|
|
|
+ image: new Icon({
|
|
|
+ color: "#eee",
|
|
|
+ rotation: rotation,
|
|
|
+ anchor: [0.5, 0.5],
|
|
|
+ rotateWithView: true,
|
|
|
+ // color:"red",
|
|
|
+ // size:[60,20],
|
|
|
+ crossOrigin: "anonymous",
|
|
|
+ src: require("../../assets/images/icon/" + img) //本地的样式
|
|
|
+ })
|
|
|
+ })
|
|
|
+ ); //这里是样式
|
|
|
+ var markerta = new LayerVec({
|
|
|
+ source: new SourceVec({
|
|
|
+ features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
|
|
|
+ }),
|
|
|
+ zIndex: zindex
|
|
|
+ });
|
|
|
+
|
|
|
+ var last1 = this.posints[shipl + data["mmsi"]];
|
|
|
+ if (last1 != undefined && last1 != null) {
|
|
|
+ last1.setSource(new SourceVec({
|
|
|
+ features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
|
|
|
+ }));
|
|
|
+ } else {
|
|
|
+ if (data["mmsi"] != undefined) {
|
|
|
+ this.posints[shipl + data["mmsi"]] = markerta;
|
|
|
+ }
|
|
|
+ this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
|
|
|
|
|
|
- addpoint: function (addrArry, data, img, type, rotation = 0, zindex = 3, shipl = "ship_") {
|
|
|
- var lnglat = this.transpoints(addrArry, 0)[0];
|
|
|
- var lnglats = null;
|
|
|
-
|
|
|
- if (data["lnglat"] != undefined) {
|
|
|
- lnglats = this.transpoints(data["lnglat"], 0);
|
|
|
- }
|
|
|
- lnglats = null;
|
|
|
-
|
|
|
- let tamarker = new Feature({
|
|
|
- tadata: {
|
|
|
- sectionId: "point",
|
|
|
- towerNumber: 22,
|
|
|
- data: data,
|
|
|
- type: type
|
|
|
- }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
|
|
|
-
|
|
|
- geometry: new Point(lnglats == null ? lnglat : lnglats[0]) //这里是点坐标的位置，这里要注意fromLonLat
|
|
|
- });
|
|
|
- tamarker.setStyle(
|
|
|
- new Style({
|
|
|
- image: new Icon({
|
|
|
- color: "#eee",
|
|
|
- rotation: rotation,
|
|
|
- anchor: [0.5, 0.5],
|
|
|
- rotateWithView: true,
|
|
|
- // color:"red",
|
|
|
- // size:[60,20],
|
|
|
- crossOrigin: "anonymous",
|
|
|
- src: require("../../assets/images/icon/" + img) //本地的样式
|
|
|
- })
|
|
|
- })
|
|
|
- ); //这里是样式
|
|
|
- var markerta = new LayerVec({
|
|
|
- source: new SourceVec({
|
|
|
- features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
|
|
|
- }),
|
|
|
- zIndex: zindex
|
|
|
- });
|
|
|
- var last1 = this.posints[shipl + data["mmsi"]];
|
|
|
- if (last1 != undefined && last1 != null) {
|
|
|
- last1.setSource(new SourceVec({
|
|
|
- features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
|
|
|
- }));
|
|
|
- } else {
|
|
|
- if (data["mmsi"] != undefined) {
|
|
|
- this.posints[shipl + data["mmsi"]] = markerta;
|
|
|
- }
|
|
|
- this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ // if (lnglats != null) {
|
|
|
+ // var that = this;
|
|
|
+ // var indexp = 0;
|
|
|
|
|
|
- if (lnglats != null) {
|
|
|
- var that = this;
|
|
|
- var indexp = 0;
|
|
|
+ // function addlayers(indexp) {
|
|
|
|
|
|
- function addlayers(indexp) {
|
|
|
+ // var last = that.posints[shipl + data["mmsi"]];
|
|
|
|
|
|
- var last = that.posints[shipl + data["mmsi"]];
|
|
|
|
|
|
+ // let tamarker = new Feature({
|
|
|
+ // tadata: {
|
|
|
+ // sectionId: "point",
|
|
|
+ // towerNumber: 22,
|
|
|
+ // data: data,
|
|
|
+ // type: type
|
|
|
+ // }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
|
|
|
|
|
|
- let tamarker = new Feature({
|
|
|
- tadata: {
|
|
|
- sectionId: "point",
|
|
|
- towerNumber: 22,
|
|
|
- data: data,
|
|
|
- type: type
|
|
|
- }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
|
|
|
+ // geometry: new Point(lnglats == null ? lnglat : lnglats[indexp]) //这里是点坐标的位置，这里要注意fromLonLat
|
|
|
+ // });
|
|
|
+ // tamarker.setStyle(
|
|
|
+ // new Style({
|
|
|
+ // image: new Icon({
|
|
|
+ // color: "#eee",
|
|
|
+ // rotation: rotation,
|
|
|
+ // anchor: [0.5, 0.5],
|
|
|
+ // rotateWithView: true,
|
|
|
+ // // color:"red",
|
|
|
+ // // size:[60,20],
|
|
|
+ // crossOrigin: "anonymous",
|
|
|
+ // src: require("../../assets/images/icon/" + img) //本地的样式
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // ); //这里是样式
|
|
|
|
|
|
- geometry: new Point(lnglats == null ? lnglat : lnglats[indexp]) //这里是点坐标的位置，这里要注意fromLonLat
|
|
|
- });
|
|
|
- tamarker.setStyle(
|
|
|
- new Style({
|
|
|
- image: new Icon({
|
|
|
- color: "#eee",
|
|
|
- rotation: rotation,
|
|
|
- anchor: [0.5, 0.5],
|
|
|
- rotateWithView: true,
|
|
|
- // color:"red",
|
|
|
- // size:[60,20],
|
|
|
- crossOrigin: "anonymous",
|
|
|
- src: require("../../assets/images/icon/" + img) //本地的样式
|
|
|
- })
|
|
|
- })
|
|
|
- ); //这里是样式
|
|
|
+ // last.setSource(new SourceVec({
|
|
|
+ // features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
|
|
|
+ // }));
|
|
|
|
|
|
- last.setSource(new SourceVec({
|
|
|
- features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
|
|
|
- }));
|
|
|
+ // }
|
|
|
|
|
|
- }
|
|
|
|
|
|
+ // setInterval(() => {
|
|
|
+ // indexp = indexp >= lnglats.length ? 0 : indexp;
|
|
|
+ // addlayers(indexp++);
|
|
|
+ // }, 1000);
|
|
|
+
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+ },
|
|
|
+ addpoints: function(datas) {
|
|
|
+
|
|
|
+ var tt = [];
|
|
|
+ for (const ip in datas) {
|
|
|
+ var pi = datas[ip];
|
|
|
+ var addrArry = pi[0],
|
|
|
+ data = pi[1],
|
|
|
+ img = pi[2],
|
|
|
+ type = pi[3],
|
|
|
+ rotation = pi[4],
|
|
|
+ zindex = pi[5],
|
|
|
+ shipl = pi[6];
|
|
|
+ var lnglat = this.transpoints(addrArry, 0)[0];
|
|
|
+ var lnglats = null;
|
|
|
+
|
|
|
+ if (data["lnglat"] != undefined) {
|
|
|
+ lnglats = this.transpoints(data["lnglat"], 0);
|
|
|
+ }
|
|
|
+ lnglats = null;
|
|
|
+
|
|
|
+ let tamarker = new Feature({
|
|
|
+ tadata: {
|
|
|
+ sectionId: "point",
|
|
|
+ towerNumber: 22,
|
|
|
+ data: data,
|
|
|
+ type: type
|
|
|
+ }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
|
|
|
+
|
|
|
+ geometry: new Point(lnglats == null ? lnglat : lnglats[0]) //这里是点坐标的位置，这里要注意fromLonLat
|
|
|
+ });
|
|
|
+ tamarker.setStyle(
|
|
|
+ new Style({
|
|
|
+ image: new Icon({
|
|
|
+ color: "#eee",
|
|
|
+ rotation: rotation,
|
|
|
+ anchor: [0.5, 0.5],
|
|
|
+ rotateWithView: true,
|
|
|
+ // color:"red",
|
|
|
+ // size:[60,20],
|
|
|
+ crossOrigin: "anonymous",
|
|
|
+ src: require("../../assets/images/icon/" + img) //本地的样式
|
|
|
+ })
|
|
|
+ })
|
|
|
+ ); //这里是样式
|
|
|
+ tt.push(tamarker);
|
|
|
|
|
|
- setInterval(() => {
|
|
|
- indexp = indexp >= lnglats.length ? 0 : indexp;
|
|
|
- addlayers(indexp++);
|
|
|
- }, 1000);
|
|
|
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ var markerta = new LayerVec({
|
|
|
+ source: new SourceVec({
|
|
|
+ features: tt //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
|
|
|
+ }),
|
|
|
+ zIndex: zindex
|
|
|
+ });
|
|
|
+
|
|
|
+ var last1 = this.posints["ship_normal_" + 1];
|
|
|
+ if (last1 != undefined && last1 != null) {
|
|
|
+ last1.setSource(new SourceVec({
|
|
|
+ features: tt //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
|
|
|
+ }));
|
|
|
+ } else {
|
|
|
+ if (data["mmsi"] != undefined) {
|
|
|
+ this.posints["ship_normal_" + 1] = markerta;
|
|
|
+ }
|
|
|
+ this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
|
|
|
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
#map {
|
|
|
- height: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
/*隐藏ol的一些自带元素*/
|
|
|
|
|
|
.ol-attribution,
|
|
|
.ol-zoom {
|
|
|
- display: none;
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
.contentFont {
|
|
|
- font-size: 6rem;
|
|
|
- line-height: 16rem;
|
|
|
+ font-size: 6rem;
|
|
|
+ line-height: 16rem;
|
|
|
}
|
|
|
|
|
|
.shipDiv {
|
|
|
- position: absolute;
|
|
|
- top: 250rem;
|
|
|
- left: 140rem;
|
|
|
- width: 240rem;
|
|
|
- min-height: 120rem;
|
|
|
- background-color: white;
|
|
|
+ position: absolute;
|
|
|
+ top: 250rem;
|
|
|
+ left: 140rem;
|
|
|
+ width: 240rem;
|
|
|
+ min-height: 120rem;
|
|
|
+ background-color: white;
|
|
|
}
|
|
|
|
|
|
.el-tabs__header {
|
|
|
- margin: 0 !important;
|
|
|
+ margin: 0 !important;
|
|
|
}
|
|
|
|
|
|
.shipTitle {
|
|
|
- padding-top: 4rem;
|
|
|
- padding-left: 10rem;
|
|
|
- padding-right: 10rem;
|
|
|
- width: 100%;
|
|
|
- height: 20rem;
|
|
|
- background-color: #0d25a5;
|
|
|
- color: white;
|
|
|
- font-size: 7rem
|
|
|
+ padding-top: 4rem;
|
|
|
+ padding-left: 10rem;
|
|
|
+ padding-right: 10rem;
|
|
|
+ width: 100%;
|
|
|
+ height: 20rem;
|
|
|
+ background-color: #0d25a5;
|
|
|
+ color: white;
|
|
|
+ font-size: 7rem
|
|
|
}
|
|
|
|
|
|
-.shipContent >>> .el-tabs__item {
|
|
|
- font-weight: bold;
|
|
|
- color: #A8A8A8
|
|
|
+.shipContent>>>.el-tabs__item {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #A8A8A8
|
|
|
}
|
|
|
|
|
|
-.shipContent >>> .el-tabs__item.is-active {
|
|
|
- color: #0d25a5
|
|
|
+.shipContent>>>.el-tabs__item.is-active {
|
|
|
+ color: #0d25a5
|
|
|
}
|
|
|
|
|
|
-.shipContent >>> .el-tabs__active-bar {
|
|
|
- margin-left: 10rem
|
|
|
+.shipContent>>>.el-tabs__active-bar {
|
|
|
+ margin-left: 10rem
|
|
|
}
|
|
|
|
|
|
-.shipContent >>> .el-tabs__nav {
|
|
|
- padding-left: 10rem
|
|
|
+.shipContent>>>.el-tabs__nav {
|
|
|
+ padding-left: 10rem
|
|
|
}
|
|
|
|
|
|
-.shipContent >>> .el-tabs__active-bar {
|
|
|
- background-color: #0d25a5
|
|
|
+.shipContent>>>.el-tabs__active-bar {
|
|
|
+ background-color: #0d25a5
|
|
|
}
|
|
|
|
|
|
-.tableSc >>> tr {
|
|
|
- padding: 0;
|
|
|
- height: 3rem;
|
|
|
- line-height: 3rem;
|
|
|
- font-size: 5rem;
|
|
|
+.tableSc>>>tr {
|
|
|
+ padding: 0;
|
|
|
+ height: 3rem;
|
|
|
+ line-height: 3rem;
|
|
|
+ font-size: 5rem;
|
|
|
}
|
|
|
|
|
|
-.tableSc >>> td {
|
|
|
- padding: 0;
|
|
|
- height: 3rem;
|
|
|
- line-height: 3rem
|
|
|
+.tableSc>>>td {
|
|
|
+ padding: 0;
|
|
|
+ height: 3rem;
|
|
|
+ line-height: 3rem
|
|
|
}
|
|
|
|
|
|
.icon_div {
|
|
|
- position: absolute;
|
|
|
- top: 330rem;
|
|
|
- right: 160rem;
|
|
|
- width: 70rem;
|
|
|
- min-height: 40rem;
|
|
|
- background-color: white;
|
|
|
+ position: absolute;
|
|
|
+ top: 330rem;
|
|
|
+ right: 160rem;
|
|
|
+ width: 70rem;
|
|
|
+ min-height: 40rem;
|
|
|
+ background-color: white;
|
|
|
}
|
|
|
|
|
|
.radio_div {
|
|
|
- position: absolute;
|
|
|
- top: 50rem;
|
|
|
- left: 120rem;
|
|
|
- padding-top: 4rem;
|
|
|
- padding-left: 5rem;
|
|
|
- background-color: white;
|
|
|
- padding-right: 4rem;
|
|
|
+ position: absolute;
|
|
|
+ top: 50rem;
|
|
|
+ left: 120rem;
|
|
|
+ padding-top: 4rem;
|
|
|
+ padding-left: 5rem;
|
|
|
+ background-color: white;
|
|
|
+ padding-right: 4rem;
|
|
|
}
|
|
|
|
|
|
.layer_div {
|
|
|
- position: absolute;
|
|
|
- top: 55rem;
|
|
|
- right: 160rem;
|
|
|
- padding-top: 4rem;
|
|
|
- padding-left: 5rem;
|
|
|
- padding-right: 4rem;
|
|
|
- background-color: white;
|
|
|
- padding-bottom: 5rem;
|
|
|
+ position: absolute;
|
|
|
+ top: 55rem;
|
|
|
+ right: 160rem;
|
|
|
+ padding-top: 4rem;
|
|
|
+ padding-left: 5rem;
|
|
|
+ padding-right: 4rem;
|
|
|
+ background-color: white;
|
|
|
+ padding-bottom: 5rem;
|
|
|
}
|
|
|
|
|
|
-.radio_div > div {
|
|
|
- line-height: 10rem;
|
|
|
+.radio_div>div {
|
|
|
+ line-height: 10rem;
|
|
|
}
|
|
|
|
|
|
.el-tabs__header {
|
|
|
- margin: 0 !important;
|
|
|
+ margin: 0 !important;
|
|
|
}
|
|
|
</style>
|
