xujingtown_irflcmp_ui/src/components/Layers.vue

<template>
  <div class="layer">
    <div class="title">重点图层</div>
    <div>
      <el-row v-for="(item, index) in arr" :key="index">
        <el-checkbox
          v-model="item.added"
          :label="item.label"
          @change="addedChange(item)"
        />
        <el-switch
          v-model="item.show"
          class="ml-2"
          style="--el-switch-on-color: #409eff; --el-switch-off-color: #ff4949"
          @change="hideChange(item)"
          :disabled="!item.added"
        />
      </el-row>
    </div>
    <el-dialog
      v-if="from != null"
      append-to-body
      v-model="dialogFormVisible"
      title="详细信息"
      width="500"
    >
      <div class="info_container">
        <el-form :model="form">
          <el-form-item
            v-for="(value, key) in from"
            :key="key"
            :label="key"
            :label-width="'120px'"
            >{{ value }}</el-form-item
          >
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            @click="
              dialogFormVisible = false;
              from = null;
            "
            >关闭</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    let arr = [
      {
        label: "公立学校",
        url: "./static/data/西虹桥公立学校.geojson",
        style: {
          point: {
            imgUrl: "/static/image/layer/point.png",
          },
        },
      },
      {
        label: "私立学校",
        url: "./static/data/西虹桥私立学校.geojson",
        style: {
          point: {
            imgUrl: "/static/image/layer/point.png",
          },
        },
      },
      {
        label: "公立医院",
        url: "./static/data/西虹桥公立医疗.geojson",
        style: {
          point: {
            imgUrl: "/static/image/layer/point.png",
          },
        },
      },
      {
        label: "私立医院",
        url: "./static/data/西虹区民营医疗.geojson",
        style: {
          point: {
            imgUrl: "/static/image/layer/point.png",
          },
        },
      },
      {
        label: "养老机构",
        url: "./static/data/西虹桥养老机构.geojson",
        style: {
          point: {
            imgUrl: "/static/image/layer/point.png",
          },
        },
      },
    ];
    arr = arr.map(function (item, index) {
      item.id = "layer" + index;
      item.added = false;
      item.show = true;
      return item;
    });
    return {
      arr: arr,
      from: null,
      dialogFormVisible: false,
    };
  },
  mounted() {
    window.layerQJ = {
      geojsonDataSource: {},
    };
  },
  methods: {
    addedChange(item) {
      console.log(item);
      if (item.added) {
        // 添加图层
        this.addGeoJson(item.url, item.style, item.id);
      } else {
        item.show = true;
        // 移除图层
        if (layerQJ.geojsonDataSource[item.id] != null) {
        }
        viewer.dataSources.remove(layerQJ.geojsonDataSource[item.id]);
        layerQJ.geojsonDataSource[item.id] = null;
        delete layerQJ.geojsonDataSource[item.id];
      }
    },
    hideChange(item) {
      // 控制显隐
      if (item.show) {
        if (layerQJ.geojsonDataSource[item.id])
          layerQJ.geojsonDataSource[item.id].show = true;
      } else {
        if (layerQJ.geojsonDataSource[item.id])
          layerQJ.geojsonDataSource[item.id].show = false;
      }
    },

    openClick() {
      let that = this;
      if (layerQJ.handler) return;
      // 绑定点击事件
      layerQJ.handler = new SkyScenery.ScreenSpaceEventHandler(viewer.canvas);
      layerQJ.handler.setInputAction(function (movement) {
        var pick = viewer.scene.pick(movement.position); // 拾取鼠标所在的entity
        if (SkyScenery.defined(pick)) {
          let entity = pick.id;
          if (!entity) return;
          if (entity.type && entity.type == "layers") {
            let properties = entity.properties.getValue();
            console.log(properties);
            that.from = properties;
            that.dialogFormVisible = true;
            // openEntityPropertiesDialog(properties, entity.layerId);
          }
        }
      }, SkyScenery.ScreenSpaceEventType.LEFT_CLICK);
    },

    // closeClick() {
    //   if (layerQJ.handler) {
    //     layerQJ.handler.removeInputAction(
    //       SkyScenery.ScreenSpaceEventType.LEFT_CLICK
    //     );
    //     layerQJ.handler = null;
    //   }
    //   this.dialogFormVisible = false;
    //   this.from = null;
    // },

    // 加载geojson数据
    addGeoJson(url, options, id) {
      // options = {
      //   point: {
      //     imgUrl: ""
      //   },
      //   polyline: {
      //     color: "#ffffff",
      //     width: 3,
      //     alpha: 0.7
      //   },
      //   polygon: {
      //     outerColor: "#ffffff",
      //     outerWidth: 3,
      //     innerColor: "#ffffff",
      //     alpha: 0.7
      //   }
      // };
      SkyScenery.GeoJsonDataSource.load(url).then(function (dataSource) {
        viewer.dataSources.add(dataSource);
        layerQJ.geojsonDataSource[id] = dataSource;
        var entities = dataSource.entities.values;
        for (var i = 0; i < entities.length; i++) {
          var entity = entities[i];
          if (entity.billboard) {
            entity.billboard = undefined;
            entity.billboard = new SkyScenery.BillboardGraphics({
              image: options.point.imgUrl,
              width: 48,
              height: 48,
              pixelOffset: new SkyScenery.Cartesian2(0, -25),
              heightReference: SkyScenery.HeightReference.CLAMP_TO_GROUND,
            });
          }
          if (entity.polyline) {
            entity.polyline.width = options.polyline.width;
            entity.polyline.material = SkyScenery.Color.fromCssColorString(
              options.polyline.color
            ).withAlpha(options.polyline.alpha); // 颜色
          }
          if (entity.polygon) {
            // entity.polygon.height = 0.2;
            // entity.polygon.outline = true; // 边框是否显示
            // entity.polygon.outlineColor = SkyScenery.Color.fromCssColorString(
            //   options.polygon.outerColor
            // ); // 边框颜色
            // entity.polygon.outlineWidth = options.polygon.outerWidth; // 边框宽度
            // entity.polygon.material = SkyScenery.Color.fromCssColorString(
            //   options.polygon.innerColor
            // ).withAlpha(options.polygon.alpha); // 填充色
            entity.polygon.outline = true;
            entity.polygon.outlineWidth = 5; // 边框宽度
            entity.polygon.height = 5;
            entity.polygon.material = new SkyScenery.ImageMaterialProperty({
              image: "/static/image/b2.png", // 图片路径
              transparent: true, // 是否透明
            });
          }
          entity.type = "layers";
        }
      });
    },
  },
  computed: {
    mapStatus() {
      return this.$store.state.initMap;
    },
  },
  watch: {
    mapStatus(newVal, oldVal) {
      if (newVal) this.openClick();
    },
  },
};
</script>

<style lang="less" scoped>
.layer {
  position: absolute;
  left: 520px;
  top: 200px;
  width: 140px;
  z-index: 1;
  background: #ffffff;
  padding: 10px 15px;
  border-radius: 5px;

  .el-switch {
    margin-left: 20px;
    vertical-align: top;
  }
  .info_container {
    height: 300px;
    overflow: hidden;
    overflow-y: auto;
  }
}
</style>