123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136 |
- <template>
- <view class="orderPage">
- <hcCounts v-show="!showlist" ref="hcRef" @golist="golist"></hcCounts>
- <view v-show="showlist">
- <MapView ref="mapRef"></MapView>
- <hcList ref="hclistRef" v-show="!isdetail" @returnCount="returnCount" @addmap="addGeoJson"
- @goDetail="goDetail"></hcList>
- <hcDetails ref="detailsRef" v-show="isdetail" @returnList="returnList"></hcDetails>
- </view>
- </view>
- </template>
- <script>
- import hcCounts from "./index/common/hcCounts.vue";
- import hcList from "./index/common/hcList.vue";
- import hcDetails from "./index/common/hcDetails.vue";
- import MapView from "./check/MapView.vue";
- import parse from "wellknown";
- import VectorLayer from "ol/layer/Vector";
- import VectorSource from "ol/source/Vector";
- import {
- Style,
- Icon
- } from "ol/style";
- import Stroke from "ol/style/Stroke";
- import GeoJSON from "ol/format/GeoJSON";
- export default {
- name: "list",
- components: {
- hcCounts,
- MapView,
- hcList,
- hcDetails,
- },
- data() {
- return {
- showlist: false,
- isdetail: false,
- curPageResultLayer: {}
- };
- },
- onLoad() {},
- created() {},
- mounted() {},
- onReady() {
- },
- methods: {
- golist(a, hccount) {
- this.showlist = true;
- this.$refs.hclistRef.golist(a, hccount);
- },
- returnCount() {
- this.showlist = false;
- this.$refs.hcRef.getList();
- },
- returnList() {
- this.isdetail = false;
- this.$refs.hcRef.getList();
- },
- goDetail(val) {
- this.isdetail = true
- this.$refs.detailsRef.handleClick(val);
- },
- flyto(item) {
- // window.map["mapDiv"]
- this.$refs.mapRef.maps['container'].getView().animate({
- center: [item.lzb, item.bzb],
- zoom: 16.5,
- duration: 2000, // 动画持续时间,单位毫秒
- });
- },
- //创建监测图斑列表实体
- addGeoJson(maplist, name = 'container', isfly = true) {
- maplist.forEach((titem, i) => {
- if (titem.geom && titem.geom != "") {
- if (typeof titem.geom === "string") {
- // let geom = this.tableData[i].geom;
- titem.geom = parse(titem.geom);
- }
- let features = new GeoJSON().readFeatures(titem.geom);
- var tempName = name + i;
- this.curPageResultLayer[tempName] = new VectorLayer({
- source: new VectorSource({
- features: features,
- }),
- style: function(feature) {
- return new Style({
- stroke: new Stroke({
- //边界样式
- color: "rgba(0, 0, 255, 1)",
- width: 2,
- }),
- });
- },
- zIndex: 9999,
- });
- this.$refs.mapRef.maps[name].addLayer(this.curPageResultLayer[tempName]);
- }
- });
- let map = this.$refs.mapRef.maps[name]
- console.log(map.getSize(), name, isfly)
- if (isfly) {
- // this.flyto(maplist[0])
- let fullExtent = this.curPageResultLayer[
- name + (maplist.length - 1)
- ]
- .getSource()
- .getExtent();
- console.log(fullExtent, name, isfly)
- map.getView().fit(fullExtent, {
- duration: 3, //动画的持续时间,
- callback: null,
- //size: map.getSize(),
- padding: [0, 0, 0, 0],
- //constrainResolution: false, // 允许视图超出分辨率限制
- });
- }
- },
- },
- };
- </script>
- <style lang="scss">
- .orderPage {
- padding: 30rpx;
- //background: azure;
- padding-bottom: 50px;
- position: relative;
- height: 100vh;
- }
- </style>
|