Newer
Older
DH_Apicture / src / components / Map / poumian.vue
@zhangqy zhangqy on 29 Nov 24 KB first commit
  1. <template>
  2. <div id="poumianPage">
  3. <div id="map11" ref="rootmap">
  4. <!--属性面板-->
  5. <div class="page-panel mapPanel" id="popuppoumian" v-if="poumianPopVis">
  6. <!-- <a-icon type="close" class="close-icon" @click="closepopup()"/> -->
  7. <div class="panel-head">
  8. <div class="title">{{ bianhaoName }}</div>
  9. </div>
  10. <div class="panel-body">
  11. <div
  12. class="panel-list-item"
  13. v-for="item in realTimeData"
  14. :key="item.key"
  15. >
  16. <div class="label">{{ item.key }}</div>
  17. <div class="value">{{ item.value }}m</div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. <!-- 暂无数据 -->
  23. <!-- <div class="noData"
  24. v-if="noData">暂无剖面数据
  25. </div> -->
  26. </div>
  27. </template>
  28. <script>
  29. import "ol/ol.css";
  30. import { Point, Polygon, LineString } from "ol/geom";
  31. import { Map, View, Feature } from "ol";
  32. import Overlay from "ol/Overlay.js";
  33.  
  34. import SourceVector from "ol/source/Vector";
  35. import LayerVector from "ol/layer/Vector";
  36. import Style from "ol/style/Style";
  37. import Fill from "ol/style/Fill";
  38. import Text from "ol/style/Text";
  39.  
  40. import Stroke from "ol/style/Stroke";
  41. import dragzoom from "ol/interaction/DragZoom";
  42. import DragPan from "ol/interaction/DragPan";
  43.  
  44. import MouseWheelZoom from "ol/interaction/MouseWheelZoom";
  45. import DoubleClickZoom from "ol/interaction/DoubleClickZoom";
  46.  
  47. import Icon from "ol/style/Icon";
  48. import { defaults } from "ol/control";
  49.  
  50. export default {
  51. props: {
  52. reflashData: {
  53. type: Object,
  54. default: () => new Object(),
  55. },
  56. },
  57. data() {
  58. return {
  59. map: null,
  60. pointMin: [0.01, 0.37, 0.41, 0.17],
  61. pointMax: [4.6, 4.7, 4.8, 4.9],
  62. lineMin: [0.3, 0.5, 0.7, 0.8],
  63. lineMax: [1.4, 1.6, 1.8, 2.0],
  64. lineLeng: [30, 10, 28],
  65. pointCoordX: [],
  66. editSource: null,
  67. editVectorLayer: null,
  68. menu_overlay: null,
  69. poumianPopVis: false,
  70. noData: false,
  71. bianhaoName: "",
  72. realTimeData: [],
  73. featurehighlight: null,
  74. Pointfeaturehighlight: null,
  75. mouseCurrentFeature: null,
  76. };
  77. },
  78. mounted() {
  79. let self = this;
  80. /* self.bus.$off("reflashData");
  81. self.bus.$on("reflashData", self.reflashData);*/
  82. },
  83. methods: {
  84. reflashData1({
  85. pointMin,
  86. pointMax,
  87. lineMin,
  88. lineMax,
  89. lineLeng,
  90. pointName,
  91. lineName,
  92. linegeom1,
  93. lineDepth,
  94. }) {
  95. // 没有值时显示暂无数据
  96. if (pointMin.length == 0) {
  97. this.noData = true;
  98. }
  99. ///开始赋值
  100. this.pointMin = pointMin;
  101. this.pointMax = pointMax;
  102. this.lineMin = lineMin;
  103. this.lineMax = lineMax;
  104. this.lineLeng = lineLeng;
  105. this.pointName = pointName;
  106. this.lineName = lineName;
  107. this.linegeom1 = linegeom1;
  108. this.lineDepth = lineDepth;
  109. // debugger;
  110.  
  111. if (!!!this.map) this.createMap();
  112.  
  113. let timeout = setTimeout(() => {
  114. //开始计算
  115. this.computeData();
  116. clearTimeout(timeout);
  117. }, 1000);
  118. },
  119. //创建地图
  120. createMap() {
  121. // 时间未改变且因子也没变化,只需要重新绘制
  122. this.$nextTick(function () {
  123. setTimeout(() => {
  124. this.map.updateSize();
  125. }, 500);
  126. });
  127. //加载地图自定义图标
  128. var view = new View({
  129. projection: "EPSG:3857", //使用这个坐标系
  130. center: [50, 30],
  131. zoom: 22,
  132. maxZoom: 22,
  133. });
  134. this.map = new Map({
  135. controls: defaults({
  136. attribution: false,
  137. zoom: false,
  138. rotate: false,
  139. }),
  140. target: "map11",
  141. view: view,
  142. });
  143.  
  144. let pan = null;
  145. this.map.getInteractions().forEach((element) => {
  146. if (element instanceof DragPan) {
  147. pan = element;
  148. pan.setActive(false);
  149. }
  150. if (element instanceof dragzoom) {
  151. pan = element;
  152. pan.setActive(false);
  153. }
  154. if (element instanceof MouseWheelZoom) {
  155. pan = element;
  156. pan.setActive(false);
  157. }
  158. if (element instanceof DoubleClickZoom) {
  159. pan = element;
  160. pan.setActive(false);
  161. }
  162. });
  163. //添加属性面板
  164. this.menu_overlay = new Overlay({
  165. element: document.getElementById("popuppoumian"),
  166. positioning: "bottom-center",
  167. offset: [0, -20],
  168. });
  169. this.menu_overlay.setVisible(false);
  170. this.map.addOverlay(this.menu_overlay);
  171. //鼠标事件
  172. //鼠标移动事件
  173. this.map.on("pointermove", (e) => {
  174. if (e.map.hasFeatureAtPixel(e.pixel)) {
  175. e.map.getTargetElement().style.cursor = "pointer";
  176. } else {
  177. e.map.getTargetElement().style.cursor = "";
  178. }
  179. if (this.menu_overlay) this.menu_overlay.setPosition(undefined);
  180. e.preventDefault();
  181. var pixel = this.map.getEventPixel(e.originalEvent);
  182. var feature = this.map.forEachFeatureAtPixel(
  183. pixel,
  184. function (feature, layer) {
  185. return feature;
  186. }
  187. );
  188. //设置高亮feature为null
  189. if (this.featurehighlight)
  190. this.featurehighlight.setStyle(this.getLineStyle());
  191.  
  192. if (this.Pointfeaturehighlight)
  193. this.Pointfeaturehighlight.setStyle(this.getDownWhitePipeLineStyle());
  194. //站点
  195. if (feature) {
  196. if (feature.name) {
  197. this.bianhaoName = feature.name;
  198.  
  199. if (feature.hasOwnProperty("rimElev")) {
  200. this.featurehighlight = feature;
  201. feature.setStyle(this.getHighLightStyle());
  202. this.realTimeData = [
  203. {
  204. key: "底高程",
  205. value: feature.invertElev,
  206. },
  207. {
  208. key: "地面高程",
  209. value: feature.rimElev,
  210. },
  211. ];
  212. } else {
  213. this.Pointfeaturehighlight = feature;
  214. feature.setStyle(this.getHighLightPointStyle());
  215.  
  216. this.realTimeData = [
  217. {
  218. key: "管径",
  219. value: feature.linegeom1,
  220. },
  221. {
  222. key: "管长",
  223. value: feature.lineLeng,
  224. },
  225. {
  226. key: "埋深",
  227. value: feature.lineDepth,
  228. },
  229. ];
  230. }
  231.  
  232. this.poumianPopVis = true;
  233.  
  234. this.menu_overlay.setPosition([
  235. parseFloat(e.coordinate[0]),
  236. parseFloat(e.coordinate[1]),
  237. ]);
  238. }
  239. }
  240. });
  241. //map点击地图图标事件
  242.  
  243. //鼠标点击事件
  244. this.map.on("click", (e) => {
  245. if (this.menu_overlay) this.menu_overlay.setPosition(undefined);
  246.  
  247. e.preventDefault();
  248. var pixel = this.map.getEventPixel(e.originalEvent);
  249. var feature = this.map.forEachFeatureAtPixel(
  250. pixel,
  251. function (feature, layer) {
  252. return feature;
  253. }
  254. );
  255.  
  256. //站点
  257. if (feature) {
  258. if (feature.name) {
  259. if (feature.hasOwnProperty("rimElev")) {
  260. this.HighLightLinecoor(feature.values_.geometry.flatCoordinates);
  261. } else {
  262. this.HighLightPointcoor(feature.values_.geometry.flatCoordinates);
  263. }
  264. }
  265. }
  266. });
  267. },
  268. computeData() {
  269. if (this.editSource) this.editSource.clear();
  270. if (this.editVectorLayer) this.map.removeLayer(this.editVectorLayer);
  271.  
  272. //新建矢量图层
  273. this.editSource = new SourceVector({
  274. wrapX: false,
  275. });
  276.  
  277. this.editVectorLayer = new LayerVector({
  278. source: this.editSource,
  279. Declutter: true,
  280. });
  281.  
  282. this.map.addLayer(this.editVectorLayer);
  283.  
  284. let dualSum = 0.0;
  285. this.pointCoordX = [];
  286. this.pointCoordX.push(0);
  287. this.pointCoordX.push(
  288. ...this.lineLeng.map((length) => (dualSum += length))
  289. );
  290. this.drawJCJpoint(this.pointCoordX);
  291. },
  292. //检查井、管线渲染
  293. drawJCJpoint(pointCoordX) {
  294. //获取Y值最大扩展比例系数
  295. console.log(this.pointMax);
  296. console.log(this.lineMin);
  297. console.log(this.pointMin);
  298. var jcjmax = Math.max(...this.pointMax);
  299. var linezhemin = Math.min(...this.lineMin);
  300. var pointzhemin = Math.min(...this.pointMin);
  301.  
  302. console.log(jcjmax);
  303. console.log(linezhemin);
  304. console.log(pointzhemin);
  305.  
  306. var linemax = this.pointCoordX[this.pointCoordX.length - 1];
  307. var cutNum = (jcjmax - pointzhemin) / (linemax * 0.6);
  308.  
  309. console.log(pointCoordX);
  310. console.log(this.pointName);
  311.  
  312. for (var i = 0; i < pointCoordX.length; i++) {
  313. var start = [pointCoordX[i], this.pointMin[i] / cutNum];
  314. var end = [pointCoordX[i], this.pointMax[i] / cutNum];
  315. var jcjLine = new LineString([start, end]);
  316.  
  317. var feature = new Feature(jcjLine);
  318. feature.name = this.pointName[i]; //编号
  319. feature.invertElev = this.pointMin[i]; //节点底高程
  320. feature.rimElev = this.pointMax[i]; //地面高程
  321.  
  322. feature.setStyle(this.getLineStyle());
  323. this.editSource.addFeature(feature);
  324. }
  325.  
  326. //绘制管线深色块下面的图层
  327. var downArea = [];
  328. downArea.push([pointCoordX[0], pointzhemin / cutNum]);
  329.  
  330. for (var k = 0; k < this.lineMin.length; k++) {
  331. console.log([pointCoordX[k], this.lineMin[k]]);
  332. downArea.push([pointCoordX[k], this.lineMin[k] / cutNum]);
  333. }
  334.  
  335. downArea.push([
  336. pointCoordX[pointCoordX.length - 1],
  337. pointzhemin / cutNum,
  338. ]);
  339. downArea.push([pointCoordX[0], pointzhemin / cutNum]);
  340.  
  341. var polygondown = new Polygon([downArea]);
  342. var featuredown = new Feature(polygondown);
  343. featuredown.setStyle(this.getDownPolygonStyle());
  344. this.editSource.addFeature(featuredown);
  345.  
  346. //绘制管线深色块上面的图层
  347. var upArea = [];
  348. for (var j = 0; j < this.lineMax.length; j++) {
  349. upArea.push([pointCoordX[j], this.lineMax[j] / cutNum]);
  350.  
  351. if (j > 0) {
  352. var cor1 = [pointCoordX[j - 1], this.lineMin[j - 1] / cutNum];
  353. var cor2 = [pointCoordX[j - 1], this.lineMax[j - 1] / cutNum];
  354. var cor3 = [pointCoordX[j], this.lineMax[j] / cutNum];
  355. var cor4 = [pointCoordX[j], this.lineMin[j] / cutNum];
  356. var polygonpipeline = new Polygon([[cor1, cor2, cor3, cor4, cor1]]);
  357. var featurepipeline = new Feature(polygonpipeline);
  358.  
  359. featurepipeline.name = this.lineName[j - 1]; //编号
  360. featurepipeline.linegeom1 = this.linegeom1[j - 1]; //管径
  361. featurepipeline.lineLeng = this.lineLeng[j - 1]; //管长
  362. featurepipeline.lineDepth = this.lineDepth[j - 1]; //管长
  363.  
  364. featurepipeline.setStyle(this.getDownWhitePipeLineStyle());
  365. this.editSource.addFeature(featurepipeline);
  366. }
  367. }
  368.  
  369. for (var m = pointCoordX.length - 1; m > -1; m--) {
  370. var point;
  371. if (this.pointMax[m] > this.lineMax[m])
  372. point = [pointCoordX[m], this.pointMax[m] / cutNum];
  373. else point = [pointCoordX[m], this.lineMax[m] / cutNum];
  374.  
  375. upArea.push(point);
  376. }
  377.  
  378. var polygonup = new Polygon([upArea]);
  379. var featureup = new Feature(polygonup);
  380. featureup.setStyle(this.getUpPolygonStyle());
  381. this.editSource.addFeature(featureup);
  382.  
  383. //加载边框
  384. var xmin = 0.0;
  385. var ymin = pointzhemin / cutNum;
  386. var xmax = pointCoordX[pointCoordX.length - 1];
  387. //var ymax=pointCoordX[pointCoordX.length-1]*0.6;
  388. var ymax = jcjmax / cutNum;
  389.  
  390. for (var i = 0; i < pointCoordX.length; i++) {
  391. console.log(pointCoordX);
  392. console.log(this.lineName);
  393.  
  394. //检查井编号
  395. console.log("标注位置:" + this.pointName[i]);
  396. console.log([pointCoordX[i], pointzhemin / cutNum]);
  397.  
  398. if (i > 0 && this.lineLeng[i - 1] < 30 && this.lineLeng[i] < 30)
  399. continue;
  400.  
  401. var pointmark = new Point([pointCoordX[i], ymin]);
  402. var featuremark = new Feature(pointmark);
  403. featuremark.setStyle(this.getpointMarkStyle(this.pointName[i]));
  404. this.editSource.addFeature(featuremark);
  405.  
  406. /* var featuremark2 = new Feature(pointmark);
  407. featuremark2.setStyle(this.getpointMarkStyle2(this.pointMin[i]+""))
  408. this.editSource.addFeature(featuremark2) */
  409.  
  410. if (i > 0) {
  411. //管线编号
  412. console.log("管线标注位置:" + this.lineName[i - 1]);
  413. var linemark = new Point([
  414. (pointCoordX[i - 1] + pointCoordX[i]) / 2,
  415. ymax,
  416. ]);
  417. var featurelinemark = new Feature(linemark);
  418. featurelinemark.setStyle(this.getlineMarkStyle(this.lineName[i - 1]));
  419. // this.editSource.addFeature(featurelinemark);
  420. }
  421. }
  422.  
  423. //绘制边框
  424. var box = new Polygon([
  425. [
  426. [0, ymin],
  427. [xmax, ymin],
  428. [xmax, ymax],
  429. [0, ymax],
  430. [0, ymin],
  431. ],
  432. ]);
  433. var feature = new Feature(box);
  434. feature.setStyle(this.getboxStyle());
  435. this.editSource.addFeature(feature);
  436.  
  437. //绘制网格线
  438.  
  439. //0-xmax pointzhemin-jcjmax
  440. //第一个y=0网上的横条
  441.  
  442. if (jcjmax > 0 && jcjmax <= 0.5) {
  443. var start1 = [0, jcjmax / cutNum];
  444. var end1 = [pointCoordX[pointCoordX.length - 1], jcjmax / cutNum];
  445. var wgLine1 = new LineString([start1, end1]);
  446.  
  447. var feature1 = new Feature(wgLine1);
  448.  
  449. feature1.setStyle(this.getWangeLineStyle());
  450. this.editSource.addFeature(feature1);
  451.  
  452. var linemark1 = new Point(end1);
  453. var featurelinemark1 = new Feature(linemark1);
  454. featurelinemark1.setStyle(this.getwanggeRightMarkStyle(jcjmax + ""));
  455. this.editSource.addFeature(featurelinemark1);
  456. } else if (jcjmax > 0.5) {
  457. var Num = Math.ceil(jcjmax / 0.5);
  458. var startnum;
  459. if (pointzhemin <= 0) startnum = 0;
  460. else startnum = Math.ceil(pointzhemin / 0.5);
  461.  
  462. for (var n = startnum; n < Num; n++) {
  463. var start = [0, (n * 0.5) / cutNum];
  464. var end = [pointCoordX[pointCoordX.length - 1], (n * 0.5) / cutNum];
  465. var wgLine = new LineString([start, end]);
  466.  
  467. var feature = new Feature(wgLine);
  468.  
  469. feature.setStyle(this.getWangeLineStyle());
  470. this.editSource.addFeature(feature);
  471.  
  472. var linemark = new Point(end);
  473. var featurelinemark = new Feature(linemark);
  474. featurelinemark.setStyle(this.getwanggeRightMarkStyle(n * 0.5 + ""));
  475. this.editSource.addFeature(featurelinemark);
  476. }
  477. }
  478.  
  479. //绘制网格线
  480.  
  481. //0-xmax pointzhemin-jcjmax
  482. //第一个y=0网下的横条 pointzhemin
  483.  
  484. if (pointzhemin < 0 && pointzhemin >= -0.5) {
  485. var start2 = [0, pointzhemin / cutNum];
  486. var end2 = [pointCoordX[pointCoordX.length - 1], pointzhemin / cutNum];
  487. var wgLine2 = new LineString([start2, end2]);
  488.  
  489. var feature2 = new Feature(wgLine2);
  490.  
  491. feature2.setStyle(this.getWangeLineStyle());
  492. this.editSource.addFeature(feature2);
  493.  
  494. var linemark2 = new Point(end2);
  495. var featurelinemark2 = new Feature(linemark2);
  496. featurelinemark2.setStyle(
  497. this.getwanggeRightMarkStyle(pointzhemin + "")
  498. );
  499. this.editSource.addFeature(featurelinemark2);
  500. } else if (pointzhemin < -0.5) {
  501. var fushu = -pointzhemin;
  502. var Num = Math.ceil(fushu / 0.5);
  503. for (var n = 0; n < Num; n++) {
  504. var start3 = [0, (-n * 0.5) / cutNum];
  505. var end3 = [pointCoordX[pointCoordX.length - 1], (-n * 0.5) / cutNum];
  506. var wgLine3 = new LineString([start3, end3]);
  507.  
  508. var feature3 = new Feature(wgLine3);
  509.  
  510. feature3.setStyle(this.getWangeLineStyle());
  511. this.editSource.addFeature(feature3);
  512.  
  513. var linemark3 = new Point(end3);
  514. var featurelinemark3 = new Feature(linemark3);
  515. featurelinemark3.setStyle(
  516. this.getwanggeRightMarkStyle(-n * 0.5 + "")
  517. );
  518. this.editSource.addFeature(featurelinemark3);
  519. }
  520. }
  521.  
  522. //绘制网格线
  523.  
  524. //0-xmax pointzhemin-jcjmax
  525. //第一个x=0网右的竖条 pointzhemin
  526.  
  527. var maxLen = this.pointCoordX[this.pointCoordX.length - 1];
  528. if (maxLen > 0 && maxLen <= 50) {
  529. var start4 = [maxLen, pointzhemin / cutNum];
  530. var end4 = [maxLen, ymax];
  531. var wgLine4 = new LineString([start4, end4]);
  532.  
  533. var feature4 = new Feature(wgLine4);
  534.  
  535. feature4.setStyle(this.getWangeLineStyle());
  536. this.editSource.addFeature(feature4);
  537.  
  538. var linemark4 = new Point(start4);
  539. var featurelinemark4 = new Feature(linemark4);
  540. featurelinemark4.setStyle(
  541. this.getwanggeTopMarkStyle(maxLen.toFixed(1) + "")
  542. );
  543. this.editSource.addFeature(featurelinemark4);
  544. } else if (maxLen > 50) {
  545. var Num = Math.ceil(maxLen / 50);
  546. for (var n = 0; n < Num; n++) {
  547. var start5 = [n * 50, pointzhemin / cutNum];
  548. var end5 = [n * 50, ymax];
  549. var wgLine5 = new LineString([start5, end5]);
  550.  
  551. var feature5 = new Feature(wgLine5);
  552.  
  553. feature5.setStyle(this.getWangeLineStyle());
  554. this.editSource.addFeature(feature5);
  555.  
  556. var linemark5 = new Point(start5);
  557. var featurelinemark5 = new Feature(linemark5);
  558. featurelinemark5.setStyle(this.getwanggeTopMarkStyle(n * 50 + ""));
  559. this.editSource.addFeature(featurelinemark5);
  560. }
  561.  
  562. var start6 = [maxLen, pointzhemin / cutNum];
  563.  
  564. var linemark6 = new Point(start6);
  565. var featurelinemark6 = new Feature(linemark6);
  566. featurelinemark6.setStyle(
  567. this.getwanggeTopMarkStyle(maxLen.toFixed(1) + "")
  568. );
  569. this.editSource.addFeature(featurelinemark6);
  570. }
  571.  
  572. //加载定位范围的隐藏边框,用于固定视图
  573. /* var xminView=-xmax*0.1;
  574. var yminView=ymin*0.6;
  575. var xmaxView=xmax*1.2
  576. var ymaxView=ymax*1.05
  577.  
  578. var boxView=new Polygon([[[xminView,ymin+yminView],[xmaxView,ymin+yminView],[xmaxView,ymaxView],[xminView,ymaxView],[xminView,ymin+yminView]]]);
  579. */
  580.  
  581. var leftright = xmax * 0.1;
  582. var upbuttom = (ymax - ymin) * 0.1;
  583.  
  584. /* var xminView=-xmax*0.1;
  585. var xmaxView=xmax*1.2
  586.  
  587. var yminView=(ymax-ymin)*0.2;
  588. var ymaxView=ymax*1.05 */
  589.  
  590. var boxView = new Polygon([
  591. [
  592. [-leftright, ymin - upbuttom],
  593. [xmax + leftright, ymin - upbuttom],
  594. [xmax + leftright, ymax + upbuttom],
  595. [-leftright, ymax + upbuttom],
  596. [-leftright, ymin - upbuttom],
  597. ],
  598. ]);
  599.  
  600. var featureView = new Feature(boxView);
  601. featureView.setStyle(this.getViewboxStyle());
  602. this.editSource.addFeature(featureView);
  603.  
  604. //定位地图
  605. var center = featureView.getGeometry().getExtent();
  606. console.log(center);
  607. this.map.getView().fit(center, this.map.getSize());
  608.  
  609. /* var zoomtag=this.map.getView().getZoom()
  610. this.map.getView().setMaxZoom(zoomtag)
  611. this.map.getView().setMinZoom(zoomtag) */
  612.  
  613. setTimeout(() => {
  614. this.map.updateSize();
  615. }, 100);
  616. },
  617. getpointMarkStyle2(pointMin) {
  618. console.log(pointMin);
  619. return new Style({
  620. text: new Text({
  621. text: pointMin,
  622. font: "normal 10px 微软雅黑",
  623. fill: new Fill({
  624. color: "aqua",
  625. }),
  626. offsetY: 50,
  627. textAlign: "center",
  628. textBaseline: "bottom",
  629. }),
  630. zIndex: 999999,
  631. });
  632. },
  633. getpointMarkStyle(text) {
  634. return new Style({
  635. text: new Text({
  636. text: text,
  637. font: "normal 10px 微软雅黑",
  638. fill: new Fill({
  639. color: "aqua",
  640. }),
  641. offsetY: 40,
  642. textAlign: "center",
  643. textBaseline: "bottom",
  644. }),
  645. zIndex: 999999,
  646. });
  647. },
  648. getwanggeTopMarkStyle(text) {
  649. return new Style({
  650. text: new Text({
  651. text: text,
  652. font: "normal 10px 微软雅黑",
  653. fill: new Fill({
  654. color: "aqua",
  655. }),
  656. offsetY: 20,
  657. textAlign: "center",
  658. textBaseline: "bottom",
  659. }),
  660. zIndex: 999999,
  661. });
  662. },
  663. getwanggeRightMarkStyle(text) {
  664. return new Style({
  665. text: new Text({
  666. text: text,
  667. font: "normal 10px 微软雅黑",
  668. fill: new Fill({
  669. color: "aqua",
  670. }),
  671. offsetX: 20,
  672. offsetY: 5,
  673. textAlign: "center",
  674. textBaseline: "bottom",
  675. }),
  676. zIndex: 999999,
  677. });
  678. },
  679. getlineMarkStyle(text) {
  680. return new Style({
  681. text: new Text({
  682. text: text,
  683. font: "normal 10px 微软雅黑",
  684. fill: new Fill({
  685. color: "aqua",
  686. }),
  687. offsetY: -20,
  688. textAlign: "center",
  689. textBaseline: "bottom",
  690. }),
  691. zIndex: 999999,
  692. });
  693. },
  694. getUpPolygonStyle() {
  695. return new Style({
  696. stroke: new Stroke({
  697. color: "rgb(33,49,81)",
  698. lineCap: "butt",
  699. width: 3,
  700. }),
  701. fill: new Fill({
  702. color: "rgb(33,49,81)",
  703. }),
  704. zIndex: 999997,
  705. });
  706. },
  707. getDownWhitePipeLineStyle() {
  708. return new Style({
  709. stroke: new Stroke({
  710. color: "black",
  711. lineCap: "butt",
  712. width: 1,
  713. }),
  714. fill: new Fill({
  715. color: "rgb(158,183,235)",
  716. }),
  717. });
  718. },
  719. getDownPolygonStyle() {
  720. return new Style({
  721. stroke: new Stroke({
  722. color: "rgb(33,49,81)",
  723. lineCap: "butt",
  724. width: 3,
  725. }),
  726. fill: new Fill({
  727. color: "rgb(33,49,81)",
  728. }),
  729. zIndex: 999997,
  730. });
  731. },
  732. getboxStyle() {
  733. return new Style({
  734. stroke: new Stroke({
  735. color: "gray",
  736. lineCap: "butt",
  737. width: 2,
  738. }),
  739. });
  740. },
  741. //隐藏样式的边框视角
  742. getViewboxStyle() {
  743. return new Style({});
  744. },
  745. //设置点线面style
  746. getPointStyle() {
  747. return new Style({
  748. image: new Icon({}),
  749. });
  750. },
  751. //网格线
  752. getWangeLineStyle() {
  753. return new Style({
  754. stroke: new Stroke({
  755. color: "#666",
  756. lineCap: "butt",
  757. width: 0.2,
  758. }),
  759. zIndex: 999999999997,
  760. });
  761. },
  762. //检查井线条
  763. getLineStyle() {
  764. return new Style({
  765. stroke: new Stroke({
  766. color: "#0088ff",
  767. lineCap: "butt",
  768. width: 3,
  769. }),
  770. zIndex: 999999999999,
  771. });
  772. },
  773. //高亮面样式
  774. getHighLightPointStyle(feature) {
  775. return new Style({
  776. fill: new Fill({
  777. //矢量图层填充颜色,以及透明度
  778. color: "rgb(0,170,100)",
  779. }),
  780. /* stroke: new Stroke({
  781. color: "#33ffff",
  782. lineCap: "butt",
  783. width: 0.0001,
  784. }), */
  785. zIndex: 9,
  786. });
  787. },
  788. //高亮线样式
  789. getHighLightStyle(feature) {
  790. return new Style({
  791. //填充色
  792. fill: new Fill({
  793. color: "rgb(0,170,100)",
  794. }),
  795. //边线颜色
  796. stroke: new Stroke({
  797. color: "rgb(0,170,100)",
  798. width: 2,
  799. }),
  800. zIndex: 9999999999999,
  801. });
  802. },
  803. },
  804. watch: {
  805. reflashData: {
  806. deep: true,
  807. immediate: true,
  808. handler: function (newV, oldV) {
  809. if (!!newV.pointMin.length) {
  810. let timeout = setTimeout(() => {
  811. clearTimeout(timeout);
  812. this.$nextTick(() => this.reflashData1(newV));
  813. }, 1000);
  814. }
  815. },
  816. },
  817. },
  818. };
  819. </script>
  820. <style lang="scss" scoped>
  821. #poumianPage {
  822. position: relative;
  823. width: 100%;
  824. height: 100%;
  825. }
  826.  
  827. #map11 {
  828. height: 100%;
  829. width: 100%;
  830. overflow: auto;
  831. position: absolute;
  832. right: 0;
  833. background-color: rgba(255, 255, 255, 0);
  834. }
  835.  
  836. .page-modal-no-footer {
  837. ::v-deep .ant-modal-body {
  838. height: 450px;
  839. }
  840. }
  841.  
  842. .mapPanel {
  843. position: absolute;
  844. top: 10px;
  845. left: 10px;
  846. width: 100%;
  847. height: 185px;
  848. overflow: auto;
  849. z-index: 99;
  850. .panel-head {
  851. margin-top: 10px;
  852. font-weight: bold;
  853. color: #00eeff;
  854. }
  855. .panel-body {
  856. .label {
  857. color: rgb(164, 226, 93);
  858. }
  859. }
  860. }
  861. .noData {
  862. text-align: center;
  863. font-size: 16px;
  864. color: #fdfdfd;
  865. position: absolute;
  866. top: 40%;
  867. width: 100%;
  868. z-index: 100;
  869. }
  870.  
  871. .page-panel {
  872. position: absolute;
  873. width: 200px;
  874. padding: 0 15px;
  875. background: rgba(69, 92, 126, 0.7);
  876. color: white;
  877. border: 1px solid #3b5082;
  878. border-top: 2px solid #9c9c9c;
  879. bottom: 30px;
  880. }
  881.  
  882. .ol-viewport {
  883. background: #07264c !important;
  884. }
  885. </style>