index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703
  1. <template>
  2. <div style="width:100%;height:100%">
  3. <div id="map" ref="rootmap"></div>
  4. <div class="shipDiv" v-show="deviceShow">
  5. <div class="shipTitle">
  6. <span style="float:left">{{deviceName}}</span>
  7. <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="deviceShow=false"></i>
  8. </div>
  9. <div style="padding—left:10rem" class="shipContent">
  10. <el-row :gutter="3" style="margin-top:13rem">
  11. <el-col :span="4">
  12. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595;">设备名称:</div>
  13. </el-col>
  14. <el-col :span="8">
  15. <div class="grid-content bg-purple contentFont" style="float:left">{{deviceName}}</div>
  16. </el-col>
  17. <el-col :span="4">
  18. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
  19. </el-col>
  20. <el-col :span="8">
  21. <div class="grid-content bg-purple contentFont" style="float:left">南京三桥</div>
  22. </el-col>
  23. </el-row>
  24. <el-row :gutter="3" style="margin-top:3rem">
  25. <el-col :span="4">
  26. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">设备状态:</div>
  27. </el-col>
  28. <el-col :span="8">
  29. <div class="grid-content bg-purple contentFont" style="float:left">在线</div>
  30. </el-col>
  31. <el-col :span="4">
  32. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">管辖机构:</div>
  33. </el-col>
  34. <el-col :span="8">
  35. <div class="grid-content bg-purple contentFont" style="float:left">南京海事局</div>
  36. </el-col>
  37. </el-row>
  38. <el-row :gutter="3" style="margin-top:3rem">
  39. <el-col :span="4">
  40. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">更新时间:</div>
  41. </el-col>
  42. <el-col :span="8">
  43. <div class="grid-content bg-purple contentFont" style="float:left">2021-09-30 10:12:11</div>
  44. </el-col>
  45. <el-col :span="4">
  46. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经纬度:</div>
  47. </el-col>
  48. <el-col :span="8">
  49. <div class="grid-content bg-purple contentFont" style="float:left">118.32,32.04</div>
  50. </el-col>
  51. </el-row>
  52. <!-- <el-row :gutter="3" style="margin-top:3rem">
  53. <el-col :span="4">
  54. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div>
  55. </el-col>
  56. <el-col :span="8">
  57. <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
  58. </el-col>
  59. <el-col :span="4">
  60. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航向:</div>
  61. </el-col>
  62. <el-col :span="8">
  63. <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
  64. </el-col>
  65. </el-row>
  66. <el-row :gutter="3" style="margin-top:3rem">
  67. <el-col :span="4">
  68. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风向:</div>
  69. </el-col>
  70. <el-col :span="8">
  71. <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
  72. </el-col>
  73. <el-col :span="4">
  74. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风速:</div>
  75. </el-col>
  76. <el-col :span="8">
  77. <div class="grid-content bg-purple contentFont" style="float:left">11111</div>
  78. </el-col> -->
  79. </el-row>
  80. <!-- <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" icon="el-icon-location-information">历史轨迹</el-button> -->
  81. </div>
  82. </div>
  83. <div class="shipDiv" v-show="shipShow">
  84. <div class="shipTitle">
  85. <span style="float:left">{{shipName}}</span>
  86. <i class="el-icon-close" style="font-size:9rem;margin-top:2rem;float:right" @click="shipShow=false"></i>
  87. </div>
  88. <div style="padding—left:10rem" class="shipContent">
  89. <el-tabs v-model="activeName" @tab-click="handleClick">
  90. <el-tab-pane label="AIS信息" name="first">
  91. <el-row :gutter="3" style="margin-top:3rem">
  92. <el-col :span="4">
  93. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">MMSI:</div>
  94. </el-col>
  95. <el-col :span="8">
  96. <div class="grid-content bg-purple contentFont" style="float:left">3202342354</div>
  97. </el-col>
  98. <el-col :span="4">
  99. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">监测点:</div>
  100. </el-col>
  101. <el-col :span="8">
  102. <div class="grid-content bg-purple contentFont" style="float:left">南京三桥</div>
  103. </el-col>
  104. </el-row>
  105. <el-row :gutter="3" style="margin-top:3rem">
  106. <el-col :span="4">
  107. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">经度:</div>
  108. </el-col>
  109. <el-col :span="8">
  110. <div class="grid-content bg-purple contentFont" style="float:left">182.78</div>
  111. </el-col>
  112. <el-col :span="4">
  113. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">纬度:</div>
  114. </el-col>
  115. <el-col :span="8">
  116. <div class="grid-content bg-purple contentFont" style="float:left">32.04</div>
  117. </el-col>
  118. </el-row>
  119. <el-row :gutter="3" style="margin-top:3rem">
  120. <el-col :span="4">
  121. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航速:</div>
  122. </el-col>
  123. <el-col :span="8">
  124. <div class="grid-content bg-purple contentFont" style="float:left">20 km/h</div>
  125. </el-col>
  126. <el-col :span="4">
  127. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">对地航向:</div>
  128. </el-col>
  129. <el-col :span="8">
  130. <div class="grid-content bg-purple contentFont" style="float:left">东南</div>
  131. </el-col>
  132. </el-row>
  133. <el-row :gutter="3" style="margin-top:3rem">
  134. <el-col :span="4">
  135. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风向:</div>
  136. </el-col>
  137. <el-col :span="8">
  138. <div class="grid-content bg-purple contentFont" style="float:left">北</div>
  139. </el-col>
  140. <el-col :span="4">
  141. <div class="grid-content bg-purple contentFont" style="float:right;color:#959595">风速:</div>
  142. </el-col>
  143. <el-col :span="8">
  144. <div class="grid-content bg-purple contentFont" style="float:left">3 m/s</div>
  145. </el-col>
  146. </el-row>
  147. <el-button style="margin-top:5rem;margin-left:10rem;background-color:#0d25a5;color:white;font-size:7rem" icon="el-icon-location-information">历史轨迹</el-button>
  148. </el-tab-pane>
  149. <el-tab-pane label="主要监测数据" name="second">
  150. <el-table
  151. :header-cell-style="{ background: '#e4eafc'}"
  152. ref="singleTable"
  153. :data="tableData"
  154. highlight-current-row
  155. style="width: 100%"
  156. class="tableSc">
  157. <el-table-column
  158. type="index"
  159. label="序号"
  160. width="50">
  161. </el-table-column>
  162. <el-table-column
  163. property="name"
  164. label="监测点"
  165. width="100">
  166. </el-table-column>
  167. <el-table-column
  168. :label="'硫含量'"
  169. >
  170. <template slot-scope="scope">
  171. <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑ {{ ((scope.row.value - normalPer) / normalPer * 100).toFixed(0) }}%</div>
  172. <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
  173. </template>
  174. </el-table-column>
  175. <el-table-column
  176. :label="'黑度'">
  177. <template slot-scope="scope">
  178. <div v-if="scope.row.count > normalCount" style="color:red">{{ scope.row.count }}度 ↑ {{ ((scope.row.count - normalCount) / normalCount * 100).toFixed(0) }}%</div>
  179. <div v-if=" scope.row.count <= normalCount">{{ scope.row.count }}度</div>
  180. </template>
  181. </el-table-column>
  182. <el-table-column
  183. property="date"
  184. label="监测时间">
  185. </el-table-column>
  186. </el-table>
  187. </el-tab-pane>
  188. <el-tab-pane label="其它监测数据" name="thrid">
  189. <el-table
  190. :header-cell-style="{ background: '#e4eafc'}"
  191. ref="singleTable"
  192. :data="tableData"
  193. highlight-current-row
  194. style="width: 100%"
  195. class="tableSc"
  196. height=200>
  197. <el-table-column
  198. type="index"
  199. label="序号"
  200. width="50">
  201. </el-table-column>
  202. <el-table-column
  203. property="name"
  204. label="监测点"
  205. >
  206. </el-table-column>
  207. <el-table-column
  208. :label="'SO2浓度'"
  209. >
  210. <template slot-scope="scope">
  211. <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑</div>
  212. <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
  213. </template>
  214. </el-table-column>
  215. <el-table-column
  216. :label="'NO2浓度'"
  217. >
  218. <template slot-scope="scope">
  219. <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑</div>
  220. <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
  221. </template>
  222. </el-table-column>
  223. <el-table-column
  224. :label="'CO2浓度'"
  225. >
  226. <template slot-scope="scope">
  227. <div v-if="scope.row.value > normalPer" style="color:red">{{ scope.row.value }}% ↑</div>
  228. <div v-if=" scope.row.value <= normalPer">{{ scope.row.value }}%</div>
  229. </template>
  230. </el-table-column>
  231. <el-table-column
  232. :label="'硫碳比'">
  233. <template slot-scope="scope">
  234. <div v-if="scope.row.count > normalCount" style="color:red">{{ scope.row.count }}度 ↑</div>
  235. <div v-if=" scope.row.count <= normalCount">{{ scope.row.count }}度</div>
  236. </template>
  237. </el-table-column>
  238. <el-table-column
  239. property="date"
  240. label="监测时间">
  241. </el-table-column>
  242. </el-table>
  243. </el-tab-pane>
  244. </el-tabs>
  245. </div>
  246. </div>
  247. <div class="icon_div">
  248. <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>
  249. <br/>
  250. <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>
  251. <br/>
  252. <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>
  253. <!-- <div style="margin-top:75rem"><div></div><span class="line_font">支路</span></div> -->
  254. </div>
  255. <div class="icon_div" style="right: 263rem;">
  256. <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>
  257. <br/>
  258. <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>
  259. <br/>
  260. <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>
  261. <br/>
  262. <!-- <div style="margin-top:75rem"><div></div><span class="line_font">支路</span></div> -->
  263. </div>
  264. <div class="radio_div">
  265. <el-checkbox-group v-model="checkList">
  266. <el-checkbox label="热力图"></el-checkbox>
  267. <el-checkbox label="设备"></el-checkbox>
  268. </el-checkbox-group>
  269. </div>
  270. </div>
  271. </template>
  272. <script>
  273. import "ol/ol.css";
  274. import Map from "ol/Map";
  275. import TileLayer from "ol/layer/Tile";
  276. import View from "ol/View";
  277. import WMTS from "ol/source/WMTS";
  278. import WMTSTileGrid from "ol/tilegrid/WMTS";
  279. import { fromLonLat, get as getProjection, transform } from "ol/proj";
  280. import { getWidth } from "ol/extent";
  281. import { Vector as SourceVec, OSM } from "ol/source";
  282. import { Feature } from "ol";
  283. import { Point,LineString } from "ol/geom";
  284. import { Style, Icon,Stroke } from "ol/style";
  285. import { Vector as LayerVec } from "ol/layer";
  286. let ispro = process.env.NODE_ENV === "production";
  287. // ispro = false;
  288. export default {
  289. props: {
  290. src: {
  291. type: String,
  292. required: false
  293. }
  294. },
  295. data() {
  296. return {
  297. map: null,
  298. shipName:'',
  299. deviceShow:false,
  300. deviceName:'',
  301. checkList: [],
  302. drawLayer: null,
  303. draw: null,
  304. normalPer: 0.1,
  305. normalCount: 1,
  306. activeName:'first',
  307. tableData: [{
  308. date: '2016-05-02',
  309. name: '南京四桥',
  310. address: '上海市普陀区金沙江路 1518 弄',
  311. value: 0.19,
  312. count: 1.9,
  313. }, {
  314. date: '2016-05-04',
  315. name: '南京四桥',
  316. value: 0.1,
  317. count: 1.3,
  318. address: '上海市普陀区金沙江路 1517 弄'
  319. }, {
  320. date: '2016-05-01',
  321. name: '南京四桥',
  322. value: 0.2,
  323. count: 2,
  324. address: '上海市普陀区金沙江路 1519 弄'
  325. }, {
  326. date: '2016-05-03',
  327. name: '南京四桥',
  328. value: 0.08,
  329. count: 0.6,
  330. address: '上海市普陀区金沙江路 1516 弄'
  331. }],
  332. shipShow: false,
  333. };
  334. },
  335. mounted() {
  336. var that = this;
  337. if (ispro) {
  338. this.initprod();
  339. } else {
  340. this.initdev();
  341. }
  342. this.map.on("click", function(e) {
  343. console.log(e)
  344. var feature = that.map.forEachFeatureAtPixel(e.pixel,
  345. function(feature) {
  346. return feature;
  347. });
  348. if (feature) { //这里说明我们点击的是点标记,
  349. let tadata = feature.get("tadata");//我们可以通过给点标记传不同的值,来判断点击不同的点标记触发的事件。
  350. if (tadata) {
  351. if(tadata.sectionId=="line"){
  352. alert("我是线:"+tadata.towerNumber)
  353. }
  354. if(tadata.sectionId=="point"){
  355. console.log(tadata);
  356. if(tadata.type == "ship"){
  357. console.log(111111);
  358. that.shipShow = true;
  359. that.deviceShow = false;
  360. that.shipName = tadata.data
  361. }else if(tadata.type == "device"){
  362. that.deviceShow = true;
  363. that.shipShow = false;
  364. that.deviceName = tadata.data
  365. }
  366. // alert("我是点:"+tadata.data)
  367. }
  368. //含有lnglat 参数的点标记触发事件
  369. }
  370. }
  371. });
  372. // this.addpoint();
  373. // this.addline();
  374. },
  375. methods: {
  376. //[[1111,1111]]
  377. handleClick(tab, event) {
  378. console.log(tab, event);
  379. },
  380. transpoints: function(points, type) {
  381. if (false) {
  382. return points;
  383. } else {
  384. if (type == 1) {
  385. var pp = [];
  386. points.forEach(point => {
  387. pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
  388. });
  389. return pp;
  390. } else {
  391. var pp = [];
  392. points.forEach(point => {
  393. pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
  394. });
  395. return pp;
  396. }
  397. }
  398. },
  399. initdev: function() {
  400. const proj3857 = getProjection("EPSG:3857");
  401. const tileGrid = new WMTSTileGrid({
  402. tileSize: [256, 256],
  403. origin: [-2.003750834e7, 2.003750834e7],
  404. extent: [-2.003750834e7, -2.003750834e7, 2.003750834e7, 2.003750834e7],
  405. resolutions: [
  406. 76.43702827453613,
  407. 38.218514137268066,
  408. 19.109257068634033,
  409. 9.554628534317017,
  410. 4.777314267158508
  411. ],
  412. matrixIds: [
  413. "EPSG:3857:10",
  414. "EPSG:3857:11",
  415. "EPSG:3857:12",
  416. "EPSG:3857:13",
  417. "EPSG:3857:14"
  418. ]
  419. });
  420. const ign_source = new WMTS({
  421. url: "http://geo.xt.wenhq.top:8083/geoserver/gwc/service/wmts?",
  422. layer: "test:nj10",
  423. matrixSet: "EPSG:3857",
  424. format: "image/png",
  425. projection: proj3857,
  426. tileGrid: tileGrid,
  427. style: ""
  428. });
  429. const ign = new TileLayer({
  430. source: ign_source
  431. });
  432. const map = new Map({
  433. target: "map",
  434. layers: [ign],
  435. view: new View({
  436. center: [0, 0],
  437. zoom: 2
  438. })
  439. });
  440. map
  441. .getView()
  442. .fit(
  443. [
  444. 13149614.849955281,
  445. 3639625.538826909,
  446. 13306157.88388332,
  447. 3874440.0897189667
  448. ],
  449. map.getSize()
  450. );
  451. this.map = map;
  452. map.getView().setCenter(this.transpoints([[118.642876,31.970445]],0)[0]);
  453. map.getView().setZoom(13);
  454. },
  455. initprod: function() {
  456. const proj3857 = getProjection("EPSG:4326");
  457. const tileGrid = new WMTSTileGrid({
  458. tileSize: [256, 256],
  459. origin: [-180.0, 90.0],
  460. extent: [-180.0, -90.0, 180.0, 90.0],
  461. resolutions: [
  462. 0.703125,
  463. 0.3515625,
  464. 0.17578125,
  465. 0.087890625,
  466. 0.0439453125,
  467. 0.02197265625,
  468. 0.010986328125,
  469. 0.0054931640625,
  470. 0.00274658203125,
  471. 0.001373291015625,
  472. 6.866455078125e-4,
  473. 3.4332275390625e-4,
  474. 1.71661376953125e-4,
  475. 8.58306884765625e-5,
  476. 4.291534423828125e-5,
  477. 2.1457672119140625e-5,
  478. 1.0728836059570312e-5,
  479. 5.364418029785156e-6,
  480. 2.682209014892578e-6,
  481. 1.341104507446289e-6,
  482. 6.705522537231445e-7,
  483. 3.3527612686157227e-7
  484. ],
  485. matrixIds: [
  486. "EPSG:4326:0",
  487. "EPSG:4326:1",
  488. "EPSG:4326:2",
  489. "EPSG:4326:3",
  490. "EPSG:4326:4",
  491. "EPSG:4326:5",
  492. "EPSG:4326:6",
  493. "EPSG:4326:7",
  494. "EPSG:4326:8",
  495. "EPSG:4326:9",
  496. "EPSG:4326:10",
  497. "EPSG:4326:11",
  498. "EPSG:4326:12",
  499. "EPSG:4326:13",
  500. "EPSG:4326:14",
  501. "EPSG:4326:15",
  502. "EPSG:4326:16",
  503. "EPSG:4326:17",
  504. "EPSG:4326:18",
  505. "EPSG:4326:19",
  506. "EPSG:4326:20",
  507. "EPSG:4326:21"
  508. ]
  509. });
  510. const ign_source = new WMTS({
  511. url:
  512. "http://198.17.1.146:9999/geoserver/gwc/service/wmts?CJAUTH=CJUSER",
  513. layer: "CJ:G_CJ",
  514. matrixSet: "EPSG:4326",
  515. format: "image/png",
  516. projection: proj3857,
  517. tileGrid: tileGrid,
  518. style: ""
  519. });
  520. const ign = new TileLayer({
  521. source: ign_source
  522. });
  523. const map = new Map({
  524. target: "map",
  525. layers: [ign],
  526. view: new View({
  527. zoom:2
  528. })
  529. });
  530. map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
  531. this.map = map;
  532. map.getView().setCenter(this.transpoints([[118.642876,31.970445]],0)[0]);
  533. map.getView().setZoom(13);
  534. },
  535. addline:function(){
  536. var points = this.transpoints([[118.78, 32.04],[118.88, 32.14]], 0)
  537. let line= new Feature({
  538. tadata: {
  539. sectionId: "line",
  540. towerNumber: 22
  541. },
  542. geometry:new LineString(points)});//这里要注意写fromLonLat,很重要
  543. line.setStyle(new Style({
  544. stroke: new Stroke({
  545. width: 3,
  546. color: "#008000"
  547. })
  548. }));
  549. this.linevectorLayer = new LayerVec({
  550. source: new SourceVec({
  551. features: [line] //要绘制多段线,直接push到这里面就行了
  552. })
  553. });
  554. this.map.addLayer(this.linevectorLayer);//这里是执行,执行之后点就出来了
  555. },
  556. addpoint: function(addrArry,data,img,type) {
  557. var lnglat = this.transpoints(addrArry, 0)[0];
  558. let tamarker = new Feature({
  559. tadata: {
  560. sectionId: "point",
  561. towerNumber: 22,
  562. data:data,
  563. type:type
  564. }, //这里是用来传值用的,在接下来的一章里(事件)中我会讲到。
  565. geometry: new Point(lnglat) //这里是点坐标的位置,这里要注意fromLonLat
  566. });
  567. tamarker.setStyle(
  568. new Style({
  569. image: new Icon({
  570. color: "#eee",
  571. crossOrigin: "anonymous",
  572. src: require("../../assets/images/icon/"+img) //本地的样式
  573. })
  574. })
  575. ); //这里是样式
  576. var markerta = new LayerVec({
  577. source: new SourceVec({
  578. features: [tamarker] //这里放的就是之前的那个点,如果要放置多个点直接push到这里面就行了
  579. })
  580. });
  581. this.map.addLayer(markerta); //这里是执行,执行之后点就出来了
  582. }
  583. }
  584. };
  585. </script>
  586. <style scoped>
  587. #map {
  588. height: 100%;
  589. }
  590. /*隐藏ol的一些自带元素*/
  591. .ol-attribution,
  592. .ol-zoom {
  593. display: none;
  594. }
  595. .contentFont{
  596. font-size: 6rem;
  597. line-height: 16rem;
  598. }
  599. .shipDiv {
  600. position: absolute;
  601. top: 250rem;
  602. left: 140rem;
  603. width: 240rem;
  604. min-height: 130rem;
  605. background-color: white;
  606. }
  607. .el-tabs__header{
  608. margin: 0!important;
  609. }
  610. .shipTitle {
  611. padding-top: 4rem;
  612. padding-left: 10rem;
  613. padding-right: 10rem;
  614. width: 100%;
  615. height: 20rem;
  616. background-color: #0d25a5;
  617. color: white;
  618. font-size: 7rem
  619. }
  620. .shipContent >>> .el-tabs__item {
  621. font-weight: bold;
  622. color: #A8A8A8
  623. }
  624. .shipContent >>> .el-tabs__item.is-active {
  625. color: #0d25a5
  626. }
  627. .shipContent >>> .el-tabs__active-bar {
  628. margin-left: 10rem
  629. }
  630. .shipContent >>> .el-tabs__nav {
  631. padding-left: 10rem
  632. }
  633. .shipContent >>> .el-tabs__active-bar {
  634. background-color: #0d25a5
  635. }
  636. .tableSc >>> tr {
  637. padding: 0;
  638. height: 3rem;
  639. line-height: 3rem;
  640. font-size: 5rem;
  641. }
  642. .tableSc >>> td {
  643. padding: 0;
  644. height: 3rem;
  645. line-height: 3rem
  646. }
  647. .icon_div{
  648. position: absolute;
  649. top: 330rem;
  650. right: 160rem;
  651. width: 70rem;
  652. min-height: 40rem;
  653. background-color: white;
  654. }
  655. .radio_div{
  656. position: absolute;
  657. top: 50rem;
  658. left: 120rem;
  659. width: 40rem;
  660. height: 30rem;
  661. padding-top: 2rem;
  662. padding-left: 5rem;
  663. background-color: white;
  664. }
  665. .radio_div>div{
  666. line-height: 10rem;
  667. }
  668. </style>