|
@@ -1,28 +1,28 @@
|
|
|
<template>
|
|
|
- <div style="width:100%;height:100%">
|
|
|
- <div id="map" ref="rootmap"></div>
|
|
|
+ <div style="width:100%;height:100%">
|
|
|
+ <div id="map" ref="rootmap"></div>
|
|
|
|
|
|
- <div class="shipDiv" v-show="deviceShow">
|
|
|
+ <div class="shipDiv" v-show="deviceShow">
|
|
|
<div class="shipTitle">
|
|
|
- <span style="float:left">{{deviceData.name}}</span>
|
|
|
+ <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-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>
|
|
|
+ <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>
|
|
|
+ <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">
|
|
@@ -30,31 +30,31 @@
|
|
|
<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>
|
|
|
+ <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>
|
|
|
+ <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-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>
|
|
|
+ <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>
|
|
|
+ <div class="grid-content bg-purple contentFont" style="float:left">{{ deviceData.latilongti }}</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
- </el-tab-pane>
|
|
|
+ </el-tab-pane>
|
|
|
<el-tab-pane label="嫌疑船舶" name="d_second">
|
|
|
<el-table
|
|
|
:header-cell-style="{ background: '#e4eafc'}"
|
|
@@ -73,12 +73,12 @@
|
|
|
label="MMSI"
|
|
|
width="100">
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
+ <el-table-column
|
|
|
property="shipName"
|
|
|
label="船名"
|
|
|
width="100">
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
+ <el-table-column
|
|
|
property="values"
|
|
|
label="监测值"
|
|
|
width="100">
|
|
@@ -86,7 +86,7 @@
|
|
|
<el-table-column
|
|
|
property="createTime"
|
|
|
label="监测时间"
|
|
|
- >
|
|
|
+ >
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
@@ -110,12 +110,12 @@
|
|
|
label="MMSI"
|
|
|
width="100">
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
+ <el-table-column
|
|
|
property="shipName"
|
|
|
label="船名"
|
|
|
width="100">
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
+ <el-table-column
|
|
|
property="values"
|
|
|
label="监测值"
|
|
|
width="100">
|
|
@@ -123,47 +123,47 @@
|
|
|
<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> -->
|
|
|
+ <!-- <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}}</span>
|
|
|
+ <span style="float:left">{{ 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">
|
|
@@ -285,7 +285,7 @@
|
|
|
<el-table-column
|
|
|
property="name"
|
|
|
label="监测点"
|
|
|
- >
|
|
|
+ >
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
:label="'SO2浓度'"
|
|
@@ -330,29 +330,47 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="icon_div">
|
|
|
- <div style="margin-top:5rem"><div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/zc.png"></img></div><div style="float:left;margin-left:8rem"><span class="line_font">正常船舶</span></div></div>
|
|
|
- <br/>
|
|
|
- <div style="margin-top:8rem"><div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/xy.png"></img></div><div style="float:left;margin-left:8rem"><span class="line_font">硫超标嫌疑船舶</span></div></div>
|
|
|
- <br/>
|
|
|
- <div style="margin-top:8rem"><div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/wg.png"></img></div><div style="float:left;margin-left:8rem"><span class="line_font">黑烟嫌疑船舶</span></div></div>
|
|
|
- <!-- <div style="margin-top:75rem"><div></div><span class="line_font">支路</span></div> -->
|
|
|
+ <div style="margin-top:5rem">
|
|
|
+ <div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/zc.png"></img></div>
|
|
|
+ <div style="float:left;margin-left:8rem"><span class="line_font">正常船舶</span></div>
|
|
|
+ </div>
|
|
|
+ <br/>
|
|
|
+ <div style="margin-top:8rem">
|
|
|
+ <div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/xy.png"></img></div>
|
|
|
+ <div style="float:left;margin-left:8rem"><span class="line_font">硫超标嫌疑船舶</span></div>
|
|
|
+ </div>
|
|
|
+ <br/>
|
|
|
+ <div style="margin-top:8rem">
|
|
|
+ <div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/wg.png"></img></div>
|
|
|
+ <div style="float:left;margin-left:8rem"><span class="line_font">黑烟嫌疑船舶</span></div>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="margin-top:75rem"><div></div><span class="line_font">支路</span></div> -->
|
|
|
</div>
|
|
|
- <div class="icon_div" style="right: 263rem;">
|
|
|
- <div style="margin-top:5rem"><div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/hy.png"></img></div><div style="float:left;margin-left:8rem"><span class="line_font">黑烟设备</span></div></div>
|
|
|
- <br/>
|
|
|
- <div style="margin-top:8rem"><div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/ais.png"></img></div><div style="float:left;margin-left:8rem"><span class="line_font">光谱设备</span></div></div>
|
|
|
- <br/>
|
|
|
- <div style="margin-top:8rem"><div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/so2.png"></img></div><div style="float:left;margin-left:8rem"><span class="line_font">嗅探设备</span></div></div>
|
|
|
- <br/>
|
|
|
- <!-- <div style="margin-top:75rem"><div></div><span class="line_font">支路</span></div> -->
|
|
|
+ <div class="icon_div" style="right: 263rem;">
|
|
|
+ <div style="margin-top:5rem">
|
|
|
+ <div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/hy.png"></img></div>
|
|
|
+ <div style="float:left;margin-left:8rem"><span class="line_font">黑烟设备</span></div>
|
|
|
+ </div>
|
|
|
+ <br/>
|
|
|
+ <div style="margin-top:8rem">
|
|
|
+ <div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/ais.png"></img></div>
|
|
|
+ <div style="float:left;margin-left:8rem"><span class="line_font">嗅探设备</span></div>
|
|
|
+ </div>
|
|
|
+ <br/>
|
|
|
+ <div style="margin-top:8rem">
|
|
|
+ <div style="float:left;margin-left:5rem"><img src="../../assets/images/icon/so2.png"></img></div>
|
|
|
+ <div style="float:left;margin-left:8rem"><span class="line_font">光谱设备</span></div>
|
|
|
+ </div>
|
|
|
+ <br/>
|
|
|
+ <!-- <div style="margin-top:75rem"><div></div><span class="line_font">支路</span></div> -->
|
|
|
</div>
|
|
|
|
|
|
<div class="radio_div" style="max-width:44rem">
|
|
|
- <el-radio-group v-model="caddr" @change="clickcg">
|
|
|
- <el-radio v-for="item in addrlist" :key="item.name" :label="item.name"></el-radio>
|
|
|
- </el-radio-group>
|
|
|
+ <el-radio-group v-model="caddr" @change="clickcg">
|
|
|
+ <el-radio v-for="item in addrlist" :key="item.name" :label="item.name"></el-radio>
|
|
|
+ </el-radio-group>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -362,14 +380,13 @@ import TileLayer from "ol/layer/Tile";
|
|
|
import View from "ol/View";
|
|
|
import WMTS from "ol/source/WMTS";
|
|
|
import WMTSTileGrid from "ol/tilegrid/WMTS";
|
|
|
-import { fromLonLat, get as getProjection, transform } from "ol/proj";
|
|
|
-import { getWidth } from "ol/extent";
|
|
|
-
|
|
|
-import { Vector as SourceVec, OSM } from "ol/source";
|
|
|
-import { Feature } from "ol";
|
|
|
-import { Point,LineString } from "ol/geom";
|
|
|
-import { Style, Icon,Stroke } from "ol/style";
|
|
|
-import { Vector as LayerVec } from "ol/layer";
|
|
|
+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 {queryShipByDeviceId} from "@/api/data/deviceData";
|
|
|
|
|
|
let ispro = process.env.NODE_ENV === "production";
|
|
@@ -386,22 +403,22 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
map: null,
|
|
|
- shipName:'',
|
|
|
- deviceShow:false,
|
|
|
- deviceData:'',
|
|
|
+ shipName: '',
|
|
|
+ deviceShow: false,
|
|
|
+ deviceData: '',
|
|
|
checkList: [],
|
|
|
drawLayer: null,
|
|
|
draw: null,
|
|
|
normalPer: 0.1,
|
|
|
normalCount: 1,
|
|
|
- activeName:'first',
|
|
|
- tabledatas:[],
|
|
|
-
|
|
|
- d_activeName:'d_first',
|
|
|
- tableData: [],
|
|
|
- addrlist:[{name:"南京四桥",location:[1,1]}],
|
|
|
- caddr:"南京四桥",
|
|
|
- shipShow: false,
|
|
|
+ activeName: 'first',
|
|
|
+ tabledatas: [],
|
|
|
+
|
|
|
+ d_activeName: 'd_first',
|
|
|
+ tableData: [],
|
|
|
+ addrlist: [{name: "南京四桥", location: [1, 1]}],
|
|
|
+ caddr: "南京四桥",
|
|
|
+ shipShow: false,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -413,34 +430,34 @@ export default {
|
|
|
}
|
|
|
mapv = this.map;
|
|
|
|
|
|
- this.map.on("click", function(e) {
|
|
|
+ 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"){
|
|
|
- console.log(tadata);
|
|
|
- if(tadata.type == "ship"){
|
|
|
- that.shipShow = true;
|
|
|
- that.deviceShow = false;
|
|
|
- that.shipName = tadata.data
|
|
|
- }else if(tadata.type == "device"){
|
|
|
- that.deviceShow = true;
|
|
|
- that.shipShow = false;
|
|
|
- that.deviceData = tadata.data
|
|
|
- }
|
|
|
- // alert("我是点:"+tadata.data)
|
|
|
- }
|
|
|
- //含有lnglat 参数的点标记触发事件
|
|
|
+ function (feature) {
|
|
|
+ return feature;
|
|
|
+ });
|
|
|
+ if (feature) { //这里说明我们点击的是点标记,
|
|
|
+ let tadata = feature.get("tadata");//我们可以通过给点标记传不同的值,来判断点击不同的点标记触发的事件。
|
|
|
+ if (tadata) {
|
|
|
+ if (tadata.sectionId == "line") {
|
|
|
+ alert("我是线:" + tadata.towerNumber)
|
|
|
}
|
|
|
+ if (tadata.sectionId == "point") {
|
|
|
+ console.log(tadata);
|
|
|
+ if (tadata.type == "ship") {
|
|
|
+ that.shipShow = true;
|
|
|
+ that.deviceShow = false;
|
|
|
+ that.shipName = tadata.data
|
|
|
+ } else if (tadata.type == "device") {
|
|
|
+ that.deviceShow = true;
|
|
|
+ that.shipShow = false;
|
|
|
+ that.deviceData = tadata.data
|
|
|
+ }
|
|
|
+ // alert("我是点:"+tadata.data)
|
|
|
+ }
|
|
|
+ //含有lnglat 参数的点标记触发事件
|
|
|
}
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
// this.addpoint();
|
|
@@ -448,25 +465,25 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
//[[1111,1111]]
|
|
|
- handleClick1:function(tab, event){
|
|
|
+ handleClick1: function (tab, event) {
|
|
|
|
|
|
var sect = tab.name;
|
|
|
- if(sect == "d_first"){
|
|
|
+ if (sect == "d_first") {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- var q= {
|
|
|
- deviceId:this.deviceData.deviceId,
|
|
|
- illegalStatus:sect=="d_second"?2:3,
|
|
|
- index:this.deviceData.source
|
|
|
+ var q = {
|
|
|
+ deviceId: this.deviceData.deviceId,
|
|
|
+ illegalStatus: sect == "d_second" ? 2 : 3,
|
|
|
+ index: this.deviceData.source
|
|
|
}
|
|
|
|
|
|
this.tabledatas = [];
|
|
|
- queryShipByDeviceId(q).then(data => {
|
|
|
+ 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));
|
|
|
+ element["values"] = element.illegalType == "heiyan" ? element.rcgSoot : (element.illegalType == "guangpu" ? element.so2Percent : (element.illegalType == "xiutan" ? element.so2Percent : 0));
|
|
|
this.tabledatas.push(element);
|
|
|
});
|
|
|
|
|
@@ -476,29 +493,29 @@ export default {
|
|
|
//dd
|
|
|
|
|
|
},
|
|
|
- clickcg:(value)=>{
|
|
|
- //
|
|
|
+ clickcg: (value) => {
|
|
|
+ //
|
|
|
that.addrlist.forEach(element => {
|
|
|
- if(element.name==value){
|
|
|
-
|
|
|
- var lo = that.transpoints(element.location,0)[0];
|
|
|
+ if (element.name == value) {
|
|
|
+
|
|
|
+ var lo = that.transpoints(element.location, 0)[0];
|
|
|
console.log(lo)
|
|
|
mapv.getView().setCenter(lo);
|
|
|
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
});
|
|
|
|
|
|
},
|
|
|
- setaddrlist(list){
|
|
|
+ setaddrlist(list) {
|
|
|
this.addrlist = list;
|
|
|
this.caddr = list[0].name;
|
|
|
},
|
|
|
|
|
|
- handleClick(tab, event) {
|
|
|
+ handleClick(tab, event) {
|
|
|
console.log(tab, event);
|
|
|
},
|
|
|
- transpoints: function(points, type) {
|
|
|
+ transpoints: function (points, type) {
|
|
|
if (false) {
|
|
|
return points;
|
|
|
} else {
|
|
@@ -517,7 +534,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- initdev: function() {
|
|
|
+ initdev: function () {
|
|
|
const proj3857 = getProjection("EPSG:3857");
|
|
|
const tileGrid = new WMTSTileGrid({
|
|
|
tileSize: [256, 256],
|
|
@@ -573,10 +590,10 @@ export default {
|
|
|
);
|
|
|
|
|
|
this.map = map;
|
|
|
- map.getView().setCenter(this.transpoints([[118.642876,31.970445]],0)[0]);
|
|
|
+ map.getView().setCenter(this.transpoints([[118.642876, 31.970445]], 0)[0]);
|
|
|
map.getView().setZoom(13);
|
|
|
},
|
|
|
- initprod: function() {
|
|
|
+ initprod: function () {
|
|
|
const proj3857 = getProjection("EPSG:4326");
|
|
|
const tileGrid = new WMTSTileGrid({
|
|
|
tileSize: [256, 256],
|
|
@@ -650,49 +667,50 @@ export default {
|
|
|
target: "map",
|
|
|
layers: [ign],
|
|
|
view: new View({
|
|
|
- zoom:2
|
|
|
+ zoom: 2
|
|
|
})
|
|
|
});
|
|
|
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);
|
|
|
+ map.getView().setCenter(this.transpoints([[118.642876, 31.970445]], 0)[0]);
|
|
|
+ map.getView().setZoom(13);
|
|
|
},
|
|
|
|
|
|
- addline:function(){
|
|
|
+ addline: function () {
|
|
|
|
|
|
- var points = this.transpoints([[118.78, 32.04],[118.88, 32.14]], 0)
|
|
|
+ var points = this.transpoints([[118.78, 32.04], [118.88, 32.14]], 0)
|
|
|
|
|
|
- let line= new Feature({
|
|
|
+ let line = new Feature({
|
|
|
tadata: {
|
|
|
sectionId: "line",
|
|
|
towerNumber: 22
|
|
|
},
|
|
|
- geometry:new LineString(points)});//这里要注意写fromLonLat,很重要
|
|
|
+ geometry: new LineString(points)
|
|
|
+ });//这里要注意写fromLonLat,很重要
|
|
|
line.setStyle(new Style({
|
|
|
- stroke: new Stroke({
|
|
|
- width: 3,
|
|
|
- color: "#008000"
|
|
|
- })
|
|
|
- }));
|
|
|
- this.linevectorLayer = new LayerVec({
|
|
|
- source: new SourceVec({
|
|
|
- features: [line] //要绘制多段线,直接push到这里面就行了
|
|
|
- })
|
|
|
- });
|
|
|
- this.map.addLayer(this.linevectorLayer);//这里是执行,执行之后点就出来了
|
|
|
+ stroke: new Stroke({
|
|
|
+ width: 3,
|
|
|
+ color: "#008000"
|
|
|
+ })
|
|
|
+ }));
|
|
|
+ this.linevectorLayer = new LayerVec({
|
|
|
+ source: new SourceVec({
|
|
|
+ features: [line] //要绘制多段线,直接push到这里面就行了
|
|
|
+ })
|
|
|
+ });
|
|
|
+ this.map.addLayer(this.linevectorLayer);//这里是执行,执行之后点就出来了
|
|
|
|
|
|
},
|
|
|
|
|
|
- addpoint: function(addrArry,data,img,type) {
|
|
|
+ addpoint: function (addrArry, data, img, type) {
|
|
|
var lnglat = this.transpoints(addrArry, 0)[0];
|
|
|
|
|
|
let tamarker = new Feature({
|
|
|
tadata: {
|
|
|
sectionId: "point",
|
|
|
towerNumber: 22,
|
|
|
- data:data,
|
|
|
- type:type
|
|
|
+ data: data,
|
|
|
+ type: type
|
|
|
}, //这里是用来传值用的,在接下来的一章里(事件)中我会讲到。
|
|
|
geometry: new Point(lnglat) //这里是点坐标的位置,这里要注意fromLonLat
|
|
|
});
|
|
@@ -701,7 +719,7 @@ export default {
|
|
|
image: new Icon({
|
|
|
color: "#eee",
|
|
|
crossOrigin: "anonymous",
|
|
|
- src: require("../../assets/images/icon/"+img) //本地的样式
|
|
|
+ src: require("../../assets/images/icon/" + img) //本地的样式
|
|
|
})
|
|
|
})
|
|
|
); //这里是样式
|
|
@@ -720,14 +738,16 @@ export default {
|
|
|
#map {
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
/*隐藏ol的一些自带元素*/
|
|
|
.ol-attribution,
|
|
|
.ol-zoom {
|
|
|
display: none;
|
|
|
}
|
|
|
-.contentFont{
|
|
|
- font-size: 6rem;
|
|
|
- line-height: 16rem;
|
|
|
+
|
|
|
+.contentFont {
|
|
|
+ font-size: 6rem;
|
|
|
+ line-height: 16rem;
|
|
|
}
|
|
|
|
|
|
.shipDiv {
|
|
@@ -738,9 +758,10 @@ export default {
|
|
|
min-height: 130rem;
|
|
|
background-color: white;
|
|
|
}
|
|
|
- .el-tabs__header{
|
|
|
- margin: 0!important;
|
|
|
- }
|
|
|
+
|
|
|
+.el-tabs__header {
|
|
|
+ margin: 0 !important;
|
|
|
+}
|
|
|
|
|
|
.shipTitle {
|
|
|
padding-top: 4rem;
|
|
@@ -787,7 +808,7 @@ export default {
|
|
|
line-height: 3rem
|
|
|
}
|
|
|
|
|
|
-.icon_div{
|
|
|
+.icon_div {
|
|
|
position: absolute;
|
|
|
top: 330rem;
|
|
|
right: 160rem;
|
|
@@ -796,7 +817,7 @@ export default {
|
|
|
background-color: white;
|
|
|
}
|
|
|
|
|
|
-.radio_div{
|
|
|
+.radio_div {
|
|
|
position: absolute;
|
|
|
top: 50rem;
|
|
|
left: 120rem;
|
|
@@ -805,10 +826,12 @@ export default {
|
|
|
background-color: white;
|
|
|
padding-right: 4rem;
|
|
|
}
|
|
|
-.radio_div>div{
|
|
|
+
|
|
|
+.radio_div > div {
|
|
|
line-height: 10rem;
|
|
|
}
|
|
|
-.el-tabs__header{
|
|
|
+
|
|
|
+.el-tabs__header {
|
|
|
margin: 0 !important;
|
|
|
}
|
|
|
</style>
|