real3d-portalsite/src/components/Query/PlacenameLocation/PlacenameLocation.vue

<template>
  <div class="sm-panel sm-function-module-content" v-if="PlacenameLocationShow" v-drag>
    <div class="sm-panel-header">
      <span>{{ Resource.PlacenameLocation }}</span>
      <span class="closeBtn" @click="toggleVisibility">&times;</span>
    </div>
    <div class="flexbox">
      <el-input
        placeholder="请输入查询关键字"
        prefix-icon="el-icon-search"
        v-model="poiSearchText"
        size="small"
      >
      </el-input>
      <el-button
        @click="clear"
        type="primary"
        size="small"
        style="margin-left: 5px"
        >清除</el-button
      >
    </div>
    <div class="flexbox" style="height: 260px; width: 100%">
      <el-table
        :show-header="false"
        :data="tableData"
        height="260"
        border
        style="width: 100%"
        @row-click="handleRowClick"
      >
        <el-table-column prop="name" label="兴趣点" width="310">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="180" v-if="false">
        </el-table-column>
        <el-table-column
          prop="x"
          label="经度"
          width="180"
          v-if="false"
        ></el-table-column>
        <el-table-column
          prop="y"
          label="纬度"
          width="180"
          v-if="false"
        ></el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="size"
        layout="total, sizes, prev, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { PoiQuery } from "@/api/map";
export default {
  name: "PlacenameLocation",
  data() {
    return {
      tableData: [],
      poiSearchText: "",
      MapViewer: window.viewer,
      total: 100,
      page: 1,
      size: 10,
      billboardHeight: 10,
    };
  },
  created() {},
  mounted() {
    this.poiquery();
  },
  computed: {
    PlacenameLocationShow() {
      return store.state.toolBar[10];
    },
  },
  methods: {
    toggleVisibility() {
      store.setToolBarAction(10);
      this.clear();
    },
    handlePageChange(cur, a, b) {
      this.page = cur;
      this.poiquery();
    },
    handleSizeChange(cur, a, b) {
      this.size = cur;
      this.poiquery();
    },
    poiquery() {
      PoiQuery({
        name: this.poiSearchText,
        limit: this.size,
        offset: (this.page - 1) * this.size,
      }).then((res) => {
        if (res.statuscode == 200) {
          this.total = res.data.count;
          this.tableData = res.data.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    clear() {
      viewer.entities.removeAll();
      this.poiSearchText = "";
    },
    handleRowClick(row) {
      row.x = parseFloat(row.x);
      row.y = parseFloat(row.y);
      this.flyTo({ destination: { x: row.x, y: row.y, z: 1000 } }, true);
      viewer.entities.removeAll();
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(
          row.x,
          row.y,
          this.billboardHeight
        ),
        billboard: {
          image: "./static/images/location.png",
          width: 30,
          height: 40,
        },
        name: "Mapimage" + row.x + row.y,
      });
    },
    /**
     * 飞行定位
     * @param {{destination:object,orientation:object|undefined}} param0
     * @param {boolean} isLonLat -是否是经纬度坐标
     */
    flyTo({ destination, orientation }, isLonLat = false) {
      if (isLonLat)
        destination = Cesium.Cartesian3.fromDegrees(
          destination.x,
          destination.y,
          destination.z || 0
        );

      viewer.camera.flyTo({
        destination,
        orientation,
      });
    },
  },
  watch: {
    poiSearchText: function () {
      this.page = 1;
      this.poiquery();
    },
  },
};
</script>