|
|
@@ -1,17 +1,59 @@
|
|
|
<template>
|
|
|
<div class="sm-function-module-content">
|
|
|
<div class="flexbox">
|
|
|
- <input class="sm-input sm-input-long" v-model="input3" />
|
|
|
- <button class="tbtn tbn1" type="button" @click="treeQuery">查询</button>
|
|
|
+ <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: 400px; width: 100%">
|
|
|
- <Table
|
|
|
- style="width: 100%"
|
|
|
- border
|
|
|
- :columns="columns7"
|
|
|
+ <div class="flexbox" style="height: 300px; width: 100%">
|
|
|
+ <el-table
|
|
|
+ :show-header="false"
|
|
|
:data="tableData"
|
|
|
- @on-row-click="handleRowClick"
|
|
|
- ></Table>
|
|
|
+ height="300"
|
|
|
+ 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>
|
|
|
@@ -21,59 +63,68 @@ export default {
|
|
|
name: "PlacenameLocation",
|
|
|
data() {
|
|
|
return {
|
|
|
- columns7: [
|
|
|
- {
|
|
|
- title: "地址名称",
|
|
|
- key: "name",
|
|
|
- render: (h, params) => {
|
|
|
- return h("div", [
|
|
|
- h("Icon", {
|
|
|
- props: {
|
|
|
- type: "ios-location",
|
|
|
- },
|
|
|
- }),
|
|
|
- h("strong", params.row.attributes.name),
|
|
|
- ]);
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
-
|
|
|
- tableData: window.POI.features,
|
|
|
- input3: "",
|
|
|
+ tableData: [],
|
|
|
+ poiSearchText: "",
|
|
|
MapViewer: window.viewer,
|
|
|
+ total: 100,
|
|
|
+ page: 1,
|
|
|
+ size: 10,
|
|
|
+ billboardHeight: 10,
|
|
|
};
|
|
|
},
|
|
|
created() {},
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ this.poiquery();
|
|
|
+ },
|
|
|
methods: {
|
|
|
- treeQuery() {
|
|
|
- if (this.input3) {
|
|
|
- this.tableData = window.POI.features.filter((c) =>
|
|
|
- c.attributes.name.toLowerCase().includes(this.input3.toLowerCase())
|
|
|
- );
|
|
|
- } else {
|
|
|
- this.tableData = window.POI.features;
|
|
|
- }
|
|
|
+ handlePageChange(cur, a, b) {
|
|
|
+ this.page = cur;
|
|
|
+ this.poiquery();
|
|
|
+ },
|
|
|
+ handleSizeChange(cur, a, b) {
|
|
|
+ this.size = cur;
|
|
|
+ this.poiquery();
|
|
|
+ },
|
|
|
+ poiquery() {
|
|
|
+ window
|
|
|
+ .axios({
|
|
|
+ url: "http://" + window.hostconfig + ":8080/apply/yzt/search/poi",
|
|
|
+ method: "post",
|
|
|
+ data: {
|
|
|
+ name: this.poiSearchText,
|
|
|
+ limit: this.size,
|
|
|
+ offset: (this.page - 1) * this.size,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ this.total = res.data.data.count;
|
|
|
+ this.tableData = res.data.data.data;
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ this.$message.error(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clear() {
|
|
|
+ viewer.entities.removeAll();
|
|
|
+ this.poiSearchText = "";
|
|
|
},
|
|
|
handleRowClick(row) {
|
|
|
- this.flyTo(
|
|
|
- { destination: { x: row.geometry.x, y: row.geometry.y, z: 1000 } },
|
|
|
- true
|
|
|
- );
|
|
|
+ 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(
|
|
|
- parseFloat(row.geometry.x),
|
|
|
- parseFloat(row.geometry.y),
|
|
|
- parseFloat(500)
|
|
|
+ row.x,
|
|
|
+ row.y,
|
|
|
+ this.billboardHeight
|
|
|
),
|
|
|
billboard: {
|
|
|
image: "./static/images/location.png",
|
|
|
width: 30,
|
|
|
height: 40,
|
|
|
},
|
|
|
- name: "Mapimage" + row.geometry.x + row.geometry.y,
|
|
|
+ name: "Mapimage" + row.x + row.y,
|
|
|
});
|
|
|
},
|
|
|
/**
|
|
|
@@ -96,15 +147,9 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
- input3: function (val) {
|
|
|
- debugger;
|
|
|
- if (val) {
|
|
|
- this.tableData = window.POI.features.filter((c) =>
|
|
|
- c.attributes.name.toLowerCase().includes(val.toLowerCase())
|
|
|
- );
|
|
|
- } else {
|
|
|
- this.tableData = window.POI.features;
|
|
|
- }
|
|
|
+ poiSearchText: function () {
|
|
|
+ this.page = 1;
|
|
|
+ this.poiquery();
|
|
|
},
|
|
|
},
|
|
|
};
|
