vue + openlayers 实现省市区的描边界与区域填充 (后续)

<div class="cityList">
     <div :class="numIndex === i ? 'item tdSelected' : 'item'"
          v-for="(item, i) in cityList" :key="i"
          @click=" tabClick(i); childClick(item);">
                {{ item.features[0].properties.name }}
     </div>
</div>

.cityList {
            width: 98%;
            text-align: center;
            border-collapse: separate;
            border-spacing: 8px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .item {
              padding: 4px 0;
              box-sizing: border-box;
              width: 32%;
              background-color: #eeeeee;
              cursor: pointer;
              margin-bottom: 8px;
              margin-right: 2px;
            }
            :hover {
              background-color: rgb(28, 98, 185);
              color: white;
              cursor: pointer;
            }
            .tdSelected {
              background-color: rgb(28, 98, 185) !important;
              color: white;
            }
          }

import areaGeo from "@/util/provinces.json";
data() {
    return {
      cityList: areaGeo,
      numIndex: 0,
    };
  },

mounted() {
    this.childClick(areaGeo[0]); // 默认展示第一条数据
    this.tabClick(0);
  },

methods: {
    childClick(item) {
      this.$emit("child-by-value", item);
    },
  },

此处往上，为子组件内容，使用子组件向父组件传值的方式，进行传值。

<template>
  <div class="openlayers">
    <CityLeft @child-by-value="childByValue"></CityLeft>
    <div id="Map" ref="map"></div>
  </div>
</template>

import CityLeft from "./cityLeft.vue";
data() {
    return {
      featuresArr: [],//Features集合
    };
  },
components: {
  CityLeft: CityLeft,
},
methods: {
    childByValue(val) {
      // console.log("val", val);
      if (val.length == 0) {
        return false;
      }
      let features = [];

      let lineData = val.features[0];
      let routeFeature = "";
      if (lineData.geometry.type == "MultiPolygon") {
        routeFeature = new Feature({
          geometry: new MultiPolygon(lineData.geometry.coordinates),
        });
      } else if (lineData.geometry.type == "Polygon") {
        routeFeature = new Feature({
          geometry: new Polygon(lineData.geometry.coordinates),
        });
      }
      routeFeature.setStyle(
        new Style({
          fill: new Fill({
            color: "#4e98f444", //填充颜色
          }),
          stroke: new Stroke({
            width: 3, //边界宽度
            color: [71, 137, 227, 1], //边界颜色
          }),
        })
      );
      features.push(routeFeature);
      
      // 设置图层
      let routeLayer = new VectorLayer({
        source: new VectorSource({
          features: features,
        }),
      });

      // 只显示某一个行政区域
      this.featuresArr.push(routeLayer);

      if(this.map){
        //清除所有的Features(不包括当前选中)
        this.featuresArr.slice(0,this.featuresArr.length-1).map((item)=>{
          item.getSource().getFeatures().forEach((feature)=>{
            item.getSource().removeFeature(feature);
          }) 
        })
        //清除所有的mark
        this.map.getOverlays().clear();

        // 设置地图中心点 与 缩放级别
        this.map.getView().setCenter(lineData.properties.center);
        this.map.getView().setZoom(9);
      }

      // 添加图层
      setTimeout(() => {
        this.map.addLayer(routeLayer);
      }, 100);
    },
  },