index.vue 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <view class="orderPage">
  3. <hcCounts v-show="!showlist" ref="hcRef" @golist="golist"></hcCounts>
  4. <view v-show="showlist">
  5. <MapView ref="mapRef"></MapView>
  6. <hcList ref="hclistRef" v-show="!isdetail" @returnCount="returnCount" @addmap="addGeoJson"
  7. @goDetail="goDetail"></hcList>
  8. <hcDetails ref="detailsRef" v-show="isdetail" @returnList="returnList"></hcDetails>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. import hcCounts from "./index/common/hcCounts.vue";
  14. import hcList from "./index/common/hcList.vue";
  15. import hcDetails from "./index/common/hcDetails.vue";
  16. import MapView from "./check/MapView.vue";
  17. import parse from "wellknown";
  18. import VectorLayer from "ol/layer/Vector";
  19. import VectorSource from "ol/source/Vector";
  20. import {
  21. Style,
  22. Icon
  23. } from "ol/style";
  24. import Stroke from "ol/style/Stroke";
  25. import GeoJSON from "ol/format/GeoJSON";
  26. export default {
  27. name: "list",
  28. components: {
  29. hcCounts,
  30. MapView,
  31. hcList,
  32. hcDetails,
  33. },
  34. data() {
  35. return {
  36. showlist: false,
  37. isdetail: false,
  38. curPageResultLayer: {}
  39. };
  40. },
  41. onLoad() {},
  42. created() {},
  43. mounted() {},
  44. onReady() {
  45. },
  46. methods: {
  47. golist(a, hccount) {
  48. this.showlist = true;
  49. this.$refs.hclistRef.golist(a, hccount);
  50. },
  51. returnCount() {
  52. this.showlist = false;
  53. this.$refs.hcRef.getList();
  54. },
  55. returnList() {
  56. this.isdetail = false;
  57. this.$refs.hcRef.getList();
  58. },
  59. goDetail(val) {
  60. this.isdetail = true
  61. this.$refs.detailsRef.handleClick(val);
  62. },
  63. flyto(item) {
  64. // window.map["mapDiv"]
  65. this.$refs.mapRef.maps['container'].getView().animate({
  66. center: [item.lzb, item.bzb],
  67. zoom: 16.5,
  68. duration: 2000, // 动画持续时间,单位毫秒
  69. });
  70. },
  71. //创建监测图斑列表实体
  72. addGeoJson(maplist, name = 'container', isfly = true) {
  73. maplist.forEach((titem, i) => {
  74. if (titem.geom && titem.geom != "") {
  75. if (typeof titem.geom === "string") {
  76. // let geom = this.tableData[i].geom;
  77. titem.geom = parse(titem.geom);
  78. }
  79. let features = new GeoJSON().readFeatures(titem.geom);
  80. var tempName = name + i;
  81. this.curPageResultLayer[tempName] = new VectorLayer({
  82. source: new VectorSource({
  83. features: features,
  84. }),
  85. style: function(feature) {
  86. return new Style({
  87. stroke: new Stroke({
  88. //边界样式
  89. color: "rgba(0, 0, 255, 1)",
  90. width: 2,
  91. }),
  92. });
  93. },
  94. zIndex: 9999,
  95. });
  96. this.$refs.mapRef.maps[name].addLayer(this.curPageResultLayer[tempName]);
  97. }
  98. });
  99. let map = this.$refs.mapRef.maps[name]
  100. console.log(map.getSize(), name, isfly)
  101. if (isfly) {
  102. // this.flyto(maplist[0])
  103. let fullExtent = this.curPageResultLayer[
  104. name + (maplist.length - 1)
  105. ]
  106. .getSource()
  107. .getExtent();
  108. console.log(fullExtent, name, isfly)
  109. map.getView().fit(fullExtent, {
  110. duration: 3, //动画的持续时间,
  111. callback: null,
  112. //size: map.getSize(),
  113. padding: [0, 0, 0, 0],
  114. //constrainResolution: false, // 允许视图超出分辨率限制
  115. });
  116. }
  117. },
  118. },
  119. };
  120. </script>
  121. <style lang="scss">
  122. .orderPage {
  123. padding: 30rpx;
  124. //background: azure;
  125. padding-bottom: 50px;
  126. position: relative;
  127. height: 100vh;
  128. }
  129. </style>