diff --git a/src/assets/global_images/add.png b/src/assets/global_images/add.png new file mode 100644 index 0000000..60b68c7 --- /dev/null +++ b/src/assets/global_images/add.png Binary files differ diff --git a/src/assets/global_images/add.png b/src/assets/global_images/add.png new file mode 100644 index 0000000..60b68c7 --- /dev/null +++ b/src/assets/global_images/add.png Binary files differ diff --git a/src/assets/global_images/reset.png b/src/assets/global_images/reset.png new file mode 100644 index 0000000..f8ef703 --- /dev/null +++ b/src/assets/global_images/reset.png Binary files differ diff --git a/src/assets/global_images/add.png b/src/assets/global_images/add.png new file mode 100644 index 0000000..60b68c7 --- /dev/null +++ b/src/assets/global_images/add.png Binary files differ diff --git a/src/assets/global_images/reset.png b/src/assets/global_images/reset.png new file mode 100644 index 0000000..f8ef703 --- /dev/null +++ b/src/assets/global_images/reset.png Binary files differ diff --git a/src/views/baseSource/compEdit.vue b/src/views/baseSource/compEdit.vue index 7776ac7..a1b69d6 100644 --- a/src/views/baseSource/compEdit.vue +++ b/src/views/baseSource/compEdit.vue @@ -10,7 +10,9 @@ @@ -47,7 +49,7 @@ components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList }, data() { return { - loading: false, // 加载动画 + searchLoading: false, // 加载动画 addMode: false, // 添加元素状态 map: null, // 地图对象 drawLayer: null, // 绘制图层（框选） @@ -425,8 +427,11 @@ }, // 地图查询功能 search(keyword) { - console.log('search') - // this.cansearch = false + if (keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户 + this.$message.warning('请输入查询关键字') + return + } + this.searchLoading = true var that = this const results = [] // 存放查询结果列表 // 遍历所有图层进行查询 @@ -465,11 +470,22 @@ // 如果是最后一个图层 if (i === (partsLength - 1)) { that.searchList = results + this.searchLoading = false // that.drawIcon() } }) } }, + // 清空查询 + clearSearch() { + this.searchList = [] + if (this.currentSearchMarkers.length > 0) { + for (const marker of this.currentSearchMarkers) { + this.map.removeLayer(marker) + } + this.currentSearchMarkers = [] + } + }, // 查询结果页面变化，重绘icon changeSearchPage(data) { console.log('changeSearchPage') diff --git a/src/assets/global_images/add.png b/src/assets/global_images/add.png new file mode 100644 index 0000000..60b68c7 --- /dev/null +++ b/src/assets/global_images/add.png Binary files differ diff --git a/src/assets/global_images/reset.png b/src/assets/global_images/reset.png new file mode 100644 index 0000000..f8ef703 --- /dev/null +++ b/src/assets/global_images/reset.png Binary files differ diff --git a/src/views/baseSource/compEdit.vue b/src/views/baseSource/compEdit.vue index 7776ac7..a1b69d6 100644 --- a/src/views/baseSource/compEdit.vue +++ b/src/views/baseSource/compEdit.vue @@ -10,7 +10,9 @@ @@ -47,7 +49,7 @@ components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList }, data() { return { - loading: false, // 加载动画 + searchLoading: false, // 加载动画 addMode: false, // 添加元素状态 map: null, // 地图对象 drawLayer: null, // 绘制图层（框选） @@ -425,8 +427,11 @@ }, // 地图查询功能 search(keyword) { - console.log('search') - // this.cansearch = false + if (keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户 + this.$message.warning('请输入查询关键字') + return + } + this.searchLoading = true var that = this const results = [] // 存放查询结果列表 // 遍历所有图层进行查询 @@ -465,11 +470,22 @@ // 如果是最后一个图层 if (i === (partsLength - 1)) { that.searchList = results + this.searchLoading = false // that.drawIcon() } }) } }, + // 清空查询 + clearSearch() { + this.searchList = [] + if (this.currentSearchMarkers.length > 0) { + for (const marker of this.currentSearchMarkers) { + this.map.removeLayer(marker) + } + this.currentSearchMarkers = [] + } + }, // 查询结果页面变化，重绘icon changeSearchPage(data) { console.log('changeSearchPage') diff --git a/src/views/baseSource/components/addTool.vue b/src/views/baseSource/components/addTool.vue index 940a5bd..4bd0865 100644 --- a/src/views/baseSource/components/addTool.vue +++ b/src/views/baseSource/components/addTool.vue @@ -5,7 +5,9 @@ --> @@ -55,6 +57,10 @@ padding: 0px; -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; + img{ + height: 15px; + width: 15px; + } } } diff --git a/src/assets/global_images/add.png b/src/assets/global_images/add.png new file mode 100644 index 0000000..60b68c7 --- /dev/null +++ b/src/assets/global_images/add.png Binary files differ diff --git a/src/assets/global_images/reset.png b/src/assets/global_images/reset.png new file mode 100644 index 0000000..f8ef703 --- /dev/null +++ b/src/assets/global_images/reset.png Binary files differ diff --git a/src/views/baseSource/compEdit.vue b/src/views/baseSource/compEdit.vue index 7776ac7..a1b69d6 100644 --- a/src/views/baseSource/compEdit.vue +++ b/src/views/baseSource/compEdit.vue @@ -10,7 +10,9 @@ @@ -47,7 +49,7 @@ components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList }, data() { return { - loading: false, // 加载动画 + searchLoading: false, // 加载动画 addMode: false, // 添加元素状态 map: null, // 地图对象 drawLayer: null, // 绘制图层（框选） @@ -425,8 +427,11 @@ }, // 地图查询功能 search(keyword) { - console.log('search') - // this.cansearch = false + if (keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户 + this.$message.warning('请输入查询关键字') + return + } + this.searchLoading = true var that = this const results = [] // 存放查询结果列表 // 遍历所有图层进行查询 @@ -465,11 +470,22 @@ // 如果是最后一个图层 if (i === (partsLength - 1)) { that.searchList = results + this.searchLoading = false // that.drawIcon() } }) } }, + // 清空查询 + clearSearch() { + this.searchList = [] + if (this.currentSearchMarkers.length > 0) { + for (const marker of this.currentSearchMarkers) { + this.map.removeLayer(marker) + } + this.currentSearchMarkers = [] + } + }, // 查询结果页面变化，重绘icon changeSearchPage(data) { console.log('changeSearchPage') diff --git a/src/views/baseSource/components/addTool.vue b/src/views/baseSource/components/addTool.vue index 940a5bd..4bd0865 100644 --- a/src/views/baseSource/components/addTool.vue +++ b/src/views/baseSource/components/addTool.vue @@ -5,7 +5,9 @@ --> @@ -55,6 +57,10 @@ padding: 0px; -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; + img{ + height: 15px; + width: 15px; + } } } diff --git a/src/views/baseSource/components/clearTool.vue b/src/views/baseSource/components/clearTool.vue index 00aad35..3a049d0 100644 --- a/src/views/baseSource/components/clearTool.vue +++ b/src/views/baseSource/components/clearTool.vue @@ -5,7 +5,9 @@ --> @@ -44,8 +46,8 @@ -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; img{ - height: 18px; - width: 18px; + height: 15px; + width: 15px; } } } diff --git a/src/assets/global_images/add.png b/src/assets/global_images/add.png new file mode 100644 index 0000000..60b68c7 --- /dev/null +++ b/src/assets/global_images/add.png Binary files differ diff --git a/src/assets/global_images/reset.png b/src/assets/global_images/reset.png new file mode 100644 index 0000000..f8ef703 --- /dev/null +++ b/src/assets/global_images/reset.png Binary files differ diff --git a/src/views/baseSource/compEdit.vue b/src/views/baseSource/compEdit.vue index 7776ac7..a1b69d6 100644 --- a/src/views/baseSource/compEdit.vue +++ b/src/views/baseSource/compEdit.vue @@ -10,7 +10,9 @@ @@ -47,7 +49,7 @@ components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList }, data() { return { - loading: false, // 加载动画 + searchLoading: false, // 加载动画 addMode: false, // 添加元素状态 map: null, // 地图对象 drawLayer: null, // 绘制图层（框选） @@ -425,8 +427,11 @@ }, // 地图查询功能 search(keyword) { - console.log('search') - // this.cansearch = false + if (keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户 + this.$message.warning('请输入查询关键字') + return + } + this.searchLoading = true var that = this const results = [] // 存放查询结果列表 // 遍历所有图层进行查询 @@ -465,11 +470,22 @@ // 如果是最后一个图层 if (i === (partsLength - 1)) { that.searchList = results + this.searchLoading = false // that.drawIcon() } }) } }, + // 清空查询 + clearSearch() { + this.searchList = [] + if (this.currentSearchMarkers.length > 0) { + for (const marker of this.currentSearchMarkers) { + this.map.removeLayer(marker) + } + this.currentSearchMarkers = [] + } + }, // 查询结果页面变化，重绘icon changeSearchPage(data) { console.log('changeSearchPage') diff --git a/src/views/baseSource/components/addTool.vue b/src/views/baseSource/components/addTool.vue index 940a5bd..4bd0865 100644 --- a/src/views/baseSource/components/addTool.vue +++ b/src/views/baseSource/components/addTool.vue @@ -5,7 +5,9 @@ --> @@ -55,6 +57,10 @@ padding: 0px; -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; + img{ + height: 15px; + width: 15px; + } } } diff --git a/src/views/baseSource/components/clearTool.vue b/src/views/baseSource/components/clearTool.vue index 00aad35..3a049d0 100644 --- a/src/views/baseSource/components/clearTool.vue +++ b/src/views/baseSource/components/clearTool.vue @@ -5,7 +5,9 @@ --> @@ -44,8 +46,8 @@ -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; img{ - height: 18px; - width: 18px; + height: 15px; + width: 15px; } } } diff --git a/src/views/baseSource/components/searchItem.vue b/src/views/baseSource/components/searchItem.vue index bee0c97..a0c73f3 100644 --- a/src/views/baseSource/components/searchItem.vue +++ b/src/views/baseSource/components/searchItem.vue @@ -53,8 +53,8 @@ align-items: center; padding: 10px; margin: 10px 2px; - -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ - box-shadow: 0px 1px 3px #d9d9d9; + border:1px solid #d9d9d9; + border-radius: 3px; .list-item-left{ width:30px; height: 100%; @@ -94,6 +94,8 @@ } .list-item:hover{ cursor: pointer; - background-color: #f0f0f0; + /*background-color: #f0f0f0;*/ + -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ + box-shadow: 0px 1px 3px #d9d9d9; } diff --git a/src/assets/global_images/add.png b/src/assets/global_images/add.png new file mode 100644 index 0000000..60b68c7 --- /dev/null +++ b/src/assets/global_images/add.png Binary files differ diff --git a/src/assets/global_images/reset.png b/src/assets/global_images/reset.png new file mode 100644 index 0000000..f8ef703 --- /dev/null +++ b/src/assets/global_images/reset.png Binary files differ diff --git a/src/views/baseSource/compEdit.vue b/src/views/baseSource/compEdit.vue index 7776ac7..a1b69d6 100644 --- a/src/views/baseSource/compEdit.vue +++ b/src/views/baseSource/compEdit.vue @@ -10,7 +10,9 @@ @@ -47,7 +49,7 @@ components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList }, data() { return { - loading: false, // 加载动画 + searchLoading: false, // 加载动画 addMode: false, // 添加元素状态 map: null, // 地图对象 drawLayer: null, // 绘制图层（框选） @@ -425,8 +427,11 @@ }, // 地图查询功能 search(keyword) { - console.log('search') - // this.cansearch = false + if (keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户 + this.$message.warning('请输入查询关键字') + return + } + this.searchLoading = true var that = this const results = [] // 存放查询结果列表 // 遍历所有图层进行查询 @@ -465,11 +470,22 @@ // 如果是最后一个图层 if (i === (partsLength - 1)) { that.searchList = results + this.searchLoading = false // that.drawIcon() } }) } }, + // 清空查询 + clearSearch() { + this.searchList = [] + if (this.currentSearchMarkers.length > 0) { + for (const marker of this.currentSearchMarkers) { + this.map.removeLayer(marker) + } + this.currentSearchMarkers = [] + } + }, // 查询结果页面变化，重绘icon changeSearchPage(data) { console.log('changeSearchPage') diff --git a/src/views/baseSource/components/addTool.vue b/src/views/baseSource/components/addTool.vue index 940a5bd..4bd0865 100644 --- a/src/views/baseSource/components/addTool.vue +++ b/src/views/baseSource/components/addTool.vue @@ -5,7 +5,9 @@ --> @@ -55,6 +57,10 @@ padding: 0px; -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; + img{ + height: 15px; + width: 15px; + } } } diff --git a/src/views/baseSource/components/clearTool.vue b/src/views/baseSource/components/clearTool.vue index 00aad35..3a049d0 100644 --- a/src/views/baseSource/components/clearTool.vue +++ b/src/views/baseSource/components/clearTool.vue @@ -5,7 +5,9 @@ --> @@ -44,8 +46,8 @@ -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; img{ - height: 18px; - width: 18px; + height: 15px; + width: 15px; } } } diff --git a/src/views/baseSource/components/searchItem.vue b/src/views/baseSource/components/searchItem.vue index bee0c97..a0c73f3 100644 --- a/src/views/baseSource/components/searchItem.vue +++ b/src/views/baseSource/components/searchItem.vue @@ -53,8 +53,8 @@ align-items: center; padding: 10px; margin: 10px 2px; - -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ - box-shadow: 0px 1px 3px #d9d9d9; + border:1px solid #d9d9d9; + border-radius: 3px; .list-item-left{ width:30px; height: 100%; @@ -94,6 +94,8 @@ } .list-item:hover{ cursor: pointer; - background-color: #f0f0f0; + /*background-color: #f0f0f0;*/ + -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ + box-shadow: 0px 1px 3px #d9d9d9; } diff --git a/src/views/baseSource/components/searchList.vue b/src/views/baseSource/components/searchList.vue index 39bfa16..19345ed 100644 --- a/src/views/baseSource/components/searchList.vue +++ b/src/views/baseSource/components/searchList.vue @@ -12,19 +12,22 @@
- 共找到 {{ totalData.length }} 条个查询结果 + +
-
- +
+
@@ -37,6 +40,10 @@ name: 'SearchList', components: { SearchItem }, props: { + loading: { + type: Boolean, + default: false + }, totalData: { type: Array, default: () => { @@ -80,16 +87,25 @@ if (newval.length === 0) { this.searchCountShow = false this.dataShow = false + this.clear() } } }, methods: { search() { + if (this.keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户 + this.$message.warning('请输入查询关键字') + return + } this.offset = 1 this.searchCountShow = true this.dataShow = true this.$emit('search', this.keyword) }, + // 清除查询 + clear() { + this.$emit('clear') + }, hideSearch() { // this.searchCountShow = false this.dataShow = false @@ -101,8 +117,8 @@ this.data = this.totalData.slice(startIndex, startIndex + this.pageSize) this.$emit('change', this.data) }, - itemClick(item) { - this.$emit('item-click', item) + itemClick(item, index) { + this.$emit('item-click', item, index) } } } diff --git a/src/assets/global_images/add.png b/src/assets/global_images/add.png new file mode 100644 index 0000000..60b68c7 --- /dev/null +++ b/src/assets/global_images/add.png Binary files differ diff --git a/src/assets/global_images/reset.png b/src/assets/global_images/reset.png new file mode 100644 index 0000000..f8ef703 --- /dev/null +++ b/src/assets/global_images/reset.png Binary files differ diff --git a/src/views/baseSource/compEdit.vue b/src/views/baseSource/compEdit.vue index 7776ac7..a1b69d6 100644 --- a/src/views/baseSource/compEdit.vue +++ b/src/views/baseSource/compEdit.vue @@ -10,7 +10,9 @@ @@ -47,7 +49,7 @@ components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList }, data() { return { - loading: false, // 加载动画 + searchLoading: false, // 加载动画 addMode: false, // 添加元素状态 map: null, // 地图对象 drawLayer: null, // 绘制图层（框选） @@ -425,8 +427,11 @@ }, // 地图查询功能 search(keyword) { - console.log('search') - // this.cansearch = false + if (keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户 + this.$message.warning('请输入查询关键字') + return + } + this.searchLoading = true var that = this const results = [] // 存放查询结果列表 // 遍历所有图层进行查询 @@ -465,11 +470,22 @@ // 如果是最后一个图层 if (i === (partsLength - 1)) { that.searchList = results + this.searchLoading = false // that.drawIcon() } }) } }, + // 清空查询 + clearSearch() { + this.searchList = [] + if (this.currentSearchMarkers.length > 0) { + for (const marker of this.currentSearchMarkers) { + this.map.removeLayer(marker) + } + this.currentSearchMarkers = [] + } + }, // 查询结果页面变化，重绘icon changeSearchPage(data) { console.log('changeSearchPage') diff --git a/src/views/baseSource/components/addTool.vue b/src/views/baseSource/components/addTool.vue index 940a5bd..4bd0865 100644 --- a/src/views/baseSource/components/addTool.vue +++ b/src/views/baseSource/components/addTool.vue @@ -5,7 +5,9 @@ --> @@ -55,6 +57,10 @@ padding: 0px; -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; + img{ + height: 15px; + width: 15px; + } } } diff --git a/src/views/baseSource/components/clearTool.vue b/src/views/baseSource/components/clearTool.vue index 00aad35..3a049d0 100644 --- a/src/views/baseSource/components/clearTool.vue +++ b/src/views/baseSource/components/clearTool.vue @@ -5,7 +5,9 @@ --> @@ -44,8 +46,8 @@ -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; img{ - height: 18px; - width: 18px; + height: 15px; + width: 15px; } } } diff --git a/src/views/baseSource/components/searchItem.vue b/src/views/baseSource/components/searchItem.vue index bee0c97..a0c73f3 100644 --- a/src/views/baseSource/components/searchItem.vue +++ b/src/views/baseSource/components/searchItem.vue @@ -53,8 +53,8 @@ align-items: center; padding: 10px; margin: 10px 2px; - -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ - box-shadow: 0px 1px 3px #d9d9d9; + border:1px solid #d9d9d9; + border-radius: 3px; .list-item-left{ width:30px; height: 100%; @@ -94,6 +94,8 @@ } .list-item:hover{ cursor: pointer; - background-color: #f0f0f0; + /*background-color: #f0f0f0;*/ + -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ + box-shadow: 0px 1px 3px #d9d9d9; } diff --git a/src/views/baseSource/components/searchList.vue b/src/views/baseSource/components/searchList.vue index 39bfa16..19345ed 100644 --- a/src/views/baseSource/components/searchList.vue +++ b/src/views/baseSource/components/searchList.vue @@ -12,19 +12,22 @@
- 共找到 {{ totalData.length }} 条个查询结果 + +
-
- +
+
@@ -37,6 +40,10 @@ name: 'SearchList', components: { SearchItem }, props: { + loading: { + type: Boolean, + default: false + }, totalData: { type: Array, default: () => { @@ -80,16 +87,25 @@ if (newval.length === 0) { this.searchCountShow = false this.dataShow = false + this.clear() } } }, methods: { search() { + if (this.keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户 + this.$message.warning('请输入查询关键字') + return + } this.offset = 1 this.searchCountShow = true this.dataShow = true this.$emit('search', this.keyword) }, + // 清除查询 + clear() { + this.$emit('clear') + }, hideSearch() { // this.searchCountShow = false this.dataShow = false @@ -101,8 +117,8 @@ this.data = this.totalData.slice(startIndex, startIndex + this.pageSize) this.$emit('change', this.data) }, - itemClick(item) { - this.$emit('item-click', item) + itemClick(item, index) { + this.$emit('item-click', item, index) } } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 953cb75..71147d8 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -5,6 +5,8 @@ @@ -38,6 +40,7 @@ data() { return { keyword: '', // 查询关键字 + searchLoading: false, // 查询状态 map: null, // 地图对象 drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 @@ -53,7 +56,7 @@ searchIconList: [] // 查询结果的Icon列表 } }, - computed:{ + computed: { ...mapGetters([ 'baseUrl', 'partsUrl', @@ -64,7 +67,6 @@ }, destroyed() { window.removeEventListener('click', this.handleKeyup, true) - this.socket.close() }, mounted() { this.init() @@ -85,7 +87,7 @@ if (tips) this.$message.warning('请输入查询关键字') return } // 其他不予处理 - var that = this + this.searchLoading = true const results = [] // 存放查询结果列表 // 遍历所有图层进行查询 const partsLength = this.parts.length // 全部部件图层数量 @@ -95,9 +97,9 @@ var query = esri.query({ url: part.options.url }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 - if (keyword) { + if (this.keyword) { // 拼接查询语句 - queryString = str.map(item => `(${item} like '%${keyword}%')`).join(' OR ') + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') console.log(queryString) } else { return @@ -126,10 +128,21 @@ // 如果是最后一个图层 if (i === (partsLength - 1)) { this.searchList = results + this.searchLoading = false } }) } }, + // 清空查询 + clearSearch() { + this.searchList = [] + if (this.currentSearchMarkers.length > 0) { + for (const marker of this.currentSearchMarkers) { + this.map.removeLayer(marker) + } + this.currentSearchMarkers = [] + } + }, // 查询结果页面变化，重绘icon changeSearchPage(data) { // 清除原来绘制的点 @@ -145,12 +158,11 @@ var icon = this.searchIconList[i] const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) - this.currentSearchMarkers.push(item) - item.on('click', function(e) { - console.log(e) - if (e.target.dragging._marker._popup) { - e.target.dragging._marker.unbindPopup() + item.on('click', e => { + if (item.getPopup()) { + item.unbindPopup() } + // 绑定弹窗 const properties = feature.properties var str = `
@@ -163,13 +175,13 @@
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
` var popup = L.popup().setContent(str) - e.target.dragging._marker.bindPopup(popup).openPopup() - // e.target.dragging._marker.openPopup() + item.bindPopup(popup).openPopup(e.latlng) }) + this.currentSearchMarkers.push(item) } // 中心置为第一个点的中心 if (this.currentSearchMarkers[0]) { - this.clickSearchItem(data[0]) + this.clickSearchItem(data[0], 0) } }, // 点击查询列表项，将位置放在中间 @@ -183,6 +195,7 @@ zoom = 19 } this.map.flyTo(latlng, zoom) + // this.currentSearchMarkers[index].openPopup() } }, // 移除框选区域 @@ -195,7 +208,10 @@ }, // 绘制选框 drawBox(type) { - this.drawDelete() + if (this.drawLayer) { + this.drawLayer.layer.remove() + } + this.bounds = null this.$nextTick(() => { this.map.pm.enableDraw(type, { snappable: false @@ -252,36 +268,25 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - const that = this // 添加底图 for (let i = 0; i <= 21; i++) { const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } this.maps.push(esri.featureLayer(item).addTo(map)) } - // TODO: 添加部件：可优化为读取配置文件里的部件图层信息 - // 添加部件, - // const partsLayer = this.baseConfig.partsLayer - for (let i = 1; i <= 40; i++) { - let item = { url: `${this.baseUrl}${this.partsUrl}/${i}`, minZoom: 18 } - console.log(item) - if (i === 15) { - item = { - url: `${this.baseUrl}${this.partsUrl}/${i}`, - minZoom: 18, - style: function(feature) { - return { color: '#ff0000', opacity: 0.75, weight: 5 } - } - } - } - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - that.currentItem = e.layer.feature - that.searchLayerByUrl(e.layer.options.url) - // 弹窗样式 - var str = `
+ // 添加部件图层 + const partsLayer = this.baseConfig.partsLayer + for (const parent of partsLayer) { // 遍历大类 + const childs = parent.children + for (const child of childs) { // 遍历小类 + const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } + console.log(item) + var layer = esri.featureLayer(item).addTo(map) + // 点击部件事件 + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + // 弹窗样式 + var str = `
${properties['小类名称']}
@@ -291,12 +296,12 @@
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) + var popup = L.popup().setContent(str) + e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() + }) + this.parts.push(layer) + } } - // this.map.setZoom(15) }, // 初始化图标 initIcons() { diff --git a/src/assets/global_images/add.png b/src/assets/global_images/add.png new file mode 100644 index 0000000..60b68c7 --- /dev/null +++ b/src/assets/global_images/add.png Binary files differ diff --git a/src/assets/global_images/reset.png b/src/assets/global_images/reset.png new file mode 100644 index 0000000..f8ef703 --- /dev/null +++ b/src/assets/global_images/reset.png Binary files differ diff --git a/src/views/baseSource/compEdit.vue b/src/views/baseSource/compEdit.vue index 7776ac7..a1b69d6 100644 --- a/src/views/baseSource/compEdit.vue +++ b/src/views/baseSource/compEdit.vue @@ -10,7 +10,9 @@ @@ -47,7 +49,7 @@ components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList }, data() { return { - loading: false, // 加载动画 + searchLoading: false, // 加载动画 addMode: false, // 添加元素状态 map: null, // 地图对象 drawLayer: null, // 绘制图层（框选） @@ -425,8 +427,11 @@ }, // 地图查询功能 search(keyword) { - console.log('search') - // this.cansearch = false + if (keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户 + this.$message.warning('请输入查询关键字') + return + } + this.searchLoading = true var that = this const results = [] // 存放查询结果列表 // 遍历所有图层进行查询 @@ -465,11 +470,22 @@ // 如果是最后一个图层 if (i === (partsLength - 1)) { that.searchList = results + this.searchLoading = false // that.drawIcon() } }) } }, + // 清空查询 + clearSearch() { + this.searchList = [] + if (this.currentSearchMarkers.length > 0) { + for (const marker of this.currentSearchMarkers) { + this.map.removeLayer(marker) + } + this.currentSearchMarkers = [] + } + }, // 查询结果页面变化，重绘icon changeSearchPage(data) { console.log('changeSearchPage') diff --git a/src/views/baseSource/components/addTool.vue b/src/views/baseSource/components/addTool.vue index 940a5bd..4bd0865 100644 --- a/src/views/baseSource/components/addTool.vue +++ b/src/views/baseSource/components/addTool.vue @@ -5,7 +5,9 @@ --> @@ -55,6 +57,10 @@ padding: 0px; -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; + img{ + height: 15px; + width: 15px; + } } } diff --git a/src/views/baseSource/components/clearTool.vue b/src/views/baseSource/components/clearTool.vue index 00aad35..3a049d0 100644 --- a/src/views/baseSource/components/clearTool.vue +++ b/src/views/baseSource/components/clearTool.vue @@ -5,7 +5,9 @@ --> @@ -44,8 +46,8 @@ -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; img{ - height: 18px; - width: 18px; + height: 15px; + width: 15px; } } } diff --git a/src/views/baseSource/components/searchItem.vue b/src/views/baseSource/components/searchItem.vue index bee0c97..a0c73f3 100644 --- a/src/views/baseSource/components/searchItem.vue +++ b/src/views/baseSource/components/searchItem.vue @@ -53,8 +53,8 @@ align-items: center; padding: 10px; margin: 10px 2px; - -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ - box-shadow: 0px 1px 3px #d9d9d9; + border:1px solid #d9d9d9; + border-radius: 3px; .list-item-left{ width:30px; height: 100%; @@ -94,6 +94,8 @@ } .list-item:hover{ cursor: pointer; - background-color: #f0f0f0; + /*background-color: #f0f0f0;*/ + -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ + box-shadow: 0px 1px 3px #d9d9d9; } diff --git a/src/views/baseSource/components/searchList.vue b/src/views/baseSource/components/searchList.vue index 39bfa16..19345ed 100644 --- a/src/views/baseSource/components/searchList.vue +++ b/src/views/baseSource/components/searchList.vue @@ -12,19 +12,22 @@
- 共找到 {{ totalData.length }} 条个查询结果 + +
-
- +
+
@@ -37,6 +40,10 @@ name: 'SearchList', components: { SearchItem }, props: { + loading: { + type: Boolean, + default: false + }, totalData: { type: Array, default: () => { @@ -80,16 +87,25 @@ if (newval.length === 0) { this.searchCountShow = false this.dataShow = false + this.clear() } } }, methods: { search() { + if (this.keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户 + this.$message.warning('请输入查询关键字') + return + } this.offset = 1 this.searchCountShow = true this.dataShow = true this.$emit('search', this.keyword) }, + // 清除查询 + clear() { + this.$emit('clear') + }, hideSearch() { // this.searchCountShow = false this.dataShow = false @@ -101,8 +117,8 @@ this.data = this.totalData.slice(startIndex, startIndex + this.pageSize) this.$emit('change', this.data) }, - itemClick(item) { - this.$emit('item-click', item) + itemClick(item, index) { + this.$emit('item-click', item, index) } } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 953cb75..71147d8 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -5,6 +5,8 @@ @@ -38,6 +40,7 @@ data() { return { keyword: '', // 查询关键字 + searchLoading: false, // 查询状态 map: null, // 地图对象 drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 @@ -53,7 +56,7 @@ searchIconList: [] // 查询结果的Icon列表 } }, - computed:{ + computed: { ...mapGetters([ 'baseUrl', 'partsUrl', @@ -64,7 +67,6 @@ }, destroyed() { window.removeEventListener('click', this.handleKeyup, true) - this.socket.close() }, mounted() { this.init() @@ -85,7 +87,7 @@ if (tips) this.$message.warning('请输入查询关键字') return } // 其他不予处理 - var that = this + this.searchLoading = true const results = [] // 存放查询结果列表 // 遍历所有图层进行查询 const partsLength = this.parts.length // 全部部件图层数量 @@ -95,9 +97,9 @@ var query = esri.query({ url: part.options.url }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 - if (keyword) { + if (this.keyword) { // 拼接查询语句 - queryString = str.map(item => `(${item} like '%${keyword}%')`).join(' OR ') + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') console.log(queryString) } else { return @@ -126,10 +128,21 @@ // 如果是最后一个图层 if (i === (partsLength - 1)) { this.searchList = results + this.searchLoading = false } }) } }, + // 清空查询 + clearSearch() { + this.searchList = [] + if (this.currentSearchMarkers.length > 0) { + for (const marker of this.currentSearchMarkers) { + this.map.removeLayer(marker) + } + this.currentSearchMarkers = [] + } + }, // 查询结果页面变化，重绘icon changeSearchPage(data) { // 清除原来绘制的点 @@ -145,12 +158,11 @@ var icon = this.searchIconList[i] const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) - this.currentSearchMarkers.push(item) - item.on('click', function(e) { - console.log(e) - if (e.target.dragging._marker._popup) { - e.target.dragging._marker.unbindPopup() + item.on('click', e => { + if (item.getPopup()) { + item.unbindPopup() } + // 绑定弹窗 const properties = feature.properties var str = `
@@ -163,13 +175,13 @@
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
` var popup = L.popup().setContent(str) - e.target.dragging._marker.bindPopup(popup).openPopup() - // e.target.dragging._marker.openPopup() + item.bindPopup(popup).openPopup(e.latlng) }) + this.currentSearchMarkers.push(item) } // 中心置为第一个点的中心 if (this.currentSearchMarkers[0]) { - this.clickSearchItem(data[0]) + this.clickSearchItem(data[0], 0) } }, // 点击查询列表项，将位置放在中间 @@ -183,6 +195,7 @@ zoom = 19 } this.map.flyTo(latlng, zoom) + // this.currentSearchMarkers[index].openPopup() } }, // 移除框选区域 @@ -195,7 +208,10 @@ }, // 绘制选框 drawBox(type) { - this.drawDelete() + if (this.drawLayer) { + this.drawLayer.layer.remove() + } + this.bounds = null this.$nextTick(() => { this.map.pm.enableDraw(type, { snappable: false @@ -252,36 +268,25 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - const that = this // 添加底图 for (let i = 0; i <= 21; i++) { const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } this.maps.push(esri.featureLayer(item).addTo(map)) } - // TODO: 添加部件：可优化为读取配置文件里的部件图层信息 - // 添加部件, - // const partsLayer = this.baseConfig.partsLayer - for (let i = 1; i <= 40; i++) { - let item = { url: `${this.baseUrl}${this.partsUrl}/${i}`, minZoom: 18 } - console.log(item) - if (i === 15) { - item = { - url: `${this.baseUrl}${this.partsUrl}/${i}`, - minZoom: 18, - style: function(feature) { - return { color: '#ff0000', opacity: 0.75, weight: 5 } - } - } - } - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - that.currentItem = e.layer.feature - that.searchLayerByUrl(e.layer.options.url) - // 弹窗样式 - var str = `
+ // 添加部件图层 + const partsLayer = this.baseConfig.partsLayer + for (const parent of partsLayer) { // 遍历大类 + const childs = parent.children + for (const child of childs) { // 遍历小类 + const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } + console.log(item) + var layer = esri.featureLayer(item).addTo(map) + // 点击部件事件 + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + // 弹窗样式 + var str = `
${properties['小类名称']}
@@ -291,12 +296,12 @@
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) + var popup = L.popup().setContent(str) + e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() + }) + this.parts.push(layer) + } } - // this.map.setZoom(15) }, // 初始化图标 initIcons() { diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index fb86d4b..8a3f857 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -24,7 +24,7 @@ selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 map: null, // 地图对象 maps: [], // 地图图层 - parts: [], // 部件图层 + parts: [] // 部件图层 } }, computed: { @@ -79,36 +79,25 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - const that = this - // 添加底图 + // 添加底图图层 for (let i = 0; i <= 21; i++) { const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } this.maps.push(esri.featureLayer(item).addTo(map)) } - // TODO: 添加部件：可优化为读取配置文件里的部件图层信息 - // 添加部件, - // const partsLayer = this.baseConfig.partsLayer - for (let i = 1; i <= 40; i++) { - let item = { url: `${this.baseUrl}${this.partsUrl}/${i}`, minZoom: 18 } - console.log(item) - if (i === 15) { - item = { - url: `${this.baseUrl}${this.partsUrl}/${i}`, - minZoom: 18, - style: function(feature) { - return { color: '#ff0000', opacity: 0.75, weight: 5 } - } - } - } - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - that.currentItem = e.layer.feature - that.searchLayerByUrl(e.layer.options.url) - // 弹窗样式 - var str = `
+ // 添加部件图层 + const partsLayer = this.baseConfig.partsLayer + for (const parent of partsLayer) { // 遍历大类 + const childs = parent.children + for (const child of childs) { // 遍历小类 + const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } + console.log(item) + var layer = esri.featureLayer(item).addTo(map) + // 点击部件事件 + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + // 弹窗样式 + var str = `
${properties['小类名称']}
@@ -118,12 +107,12 @@
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) + var popup = L.popup().setContent(str) + e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() + }) + this.parts.push(layer) + } } - // this.map.setZoom(this.baseConfig.zoom) } } } diff --git a/src/assets/global_images/add.png b/src/assets/global_images/add.png new file mode 100644 index 0000000..60b68c7 --- /dev/null +++ b/src/assets/global_images/add.png Binary files differ diff --git a/src/assets/global_images/reset.png b/src/assets/global_images/reset.png new file mode 100644 index 0000000..f8ef703 --- /dev/null +++ b/src/assets/global_images/reset.png Binary files differ diff --git a/src/views/baseSource/compEdit.vue b/src/views/baseSource/compEdit.vue index 7776ac7..a1b69d6 100644 --- a/src/views/baseSource/compEdit.vue +++ b/src/views/baseSource/compEdit.vue @@ -10,7 +10,9 @@ @@ -47,7 +49,7 @@ components: { AddTool, DeleteTool, DrawTool, ToolsContainer, EditPartsDialog, LayerChoose, AppContainer, SearchList }, data() { return { - loading: false, // 加载动画 + searchLoading: false, // 加载动画 addMode: false, // 添加元素状态 map: null, // 地图对象 drawLayer: null, // 绘制图层（框选） @@ -425,8 +427,11 @@ }, // 地图查询功能 search(keyword) { - console.log('search') - // this.cansearch = false + if (keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户 + this.$message.warning('请输入查询关键字') + return + } + this.searchLoading = true var that = this const results = [] // 存放查询结果列表 // 遍历所有图层进行查询 @@ -465,11 +470,22 @@ // 如果是最后一个图层 if (i === (partsLength - 1)) { that.searchList = results + this.searchLoading = false // that.drawIcon() } }) } }, + // 清空查询 + clearSearch() { + this.searchList = [] + if (this.currentSearchMarkers.length > 0) { + for (const marker of this.currentSearchMarkers) { + this.map.removeLayer(marker) + } + this.currentSearchMarkers = [] + } + }, // 查询结果页面变化，重绘icon changeSearchPage(data) { console.log('changeSearchPage') diff --git a/src/views/baseSource/components/addTool.vue b/src/views/baseSource/components/addTool.vue index 940a5bd..4bd0865 100644 --- a/src/views/baseSource/components/addTool.vue +++ b/src/views/baseSource/components/addTool.vue @@ -5,7 +5,9 @@ --> @@ -55,6 +57,10 @@ padding: 0px; -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; + img{ + height: 15px; + width: 15px; + } } } diff --git a/src/views/baseSource/components/clearTool.vue b/src/views/baseSource/components/clearTool.vue index 00aad35..3a049d0 100644 --- a/src/views/baseSource/components/clearTool.vue +++ b/src/views/baseSource/components/clearTool.vue @@ -5,7 +5,9 @@ --> @@ -44,8 +46,8 @@ -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ box-shadow: 0px 1px 3px #d9d9d9; img{ - height: 18px; - width: 18px; + height: 15px; + width: 15px; } } } diff --git a/src/views/baseSource/components/searchItem.vue b/src/views/baseSource/components/searchItem.vue index bee0c97..a0c73f3 100644 --- a/src/views/baseSource/components/searchItem.vue +++ b/src/views/baseSource/components/searchItem.vue @@ -53,8 +53,8 @@ align-items: center; padding: 10px; margin: 10px 2px; - -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ - box-shadow: 0px 1px 3px #d9d9d9; + border:1px solid #d9d9d9; + border-radius: 3px; .list-item-left{ width:30px; height: 100%; @@ -94,6 +94,8 @@ } .list-item:hover{ cursor: pointer; - background-color: #f0f0f0; + /*background-color: #f0f0f0;*/ + -moz-box-shadow: 0px 1px 3px #d9d9d9; /* 老的 Firefox */ + box-shadow: 0px 1px 3px #d9d9d9; } diff --git a/src/views/baseSource/components/searchList.vue b/src/views/baseSource/components/searchList.vue index 39bfa16..19345ed 100644 --- a/src/views/baseSource/components/searchList.vue +++ b/src/views/baseSource/components/searchList.vue @@ -12,19 +12,22 @@
- 共找到 {{ totalData.length }} 条个查询结果 + +
-
- +
+
@@ -37,6 +40,10 @@ name: 'SearchList', components: { SearchItem }, props: { + loading: { + type: Boolean, + default: false + }, totalData: { type: Array, default: () => { @@ -80,16 +87,25 @@ if (newval.length === 0) { this.searchCountShow = false this.dataShow = false + this.clear() } } }, methods: { search() { + if (this.keyword === '') { // 如果是空字符串，表示未输入任何查询条件，根据内容提示用户 + this.$message.warning('请输入查询关键字') + return + } this.offset = 1 this.searchCountShow = true this.dataShow = true this.$emit('search', this.keyword) }, + // 清除查询 + clear() { + this.$emit('clear') + }, hideSearch() { // this.searchCountShow = false this.dataShow = false @@ -101,8 +117,8 @@ this.data = this.totalData.slice(startIndex, startIndex + this.pageSize) this.$emit('change', this.data) }, - itemClick(item) { - this.$emit('item-click', item) + itemClick(item, index) { + this.$emit('item-click', item, index) } } } diff --git a/src/views/baseSource/mapSearch.vue b/src/views/baseSource/mapSearch.vue index 953cb75..71147d8 100644 --- a/src/views/baseSource/mapSearch.vue +++ b/src/views/baseSource/mapSearch.vue @@ -5,6 +5,8 @@ @@ -38,6 +40,7 @@ data() { return { keyword: '', // 查询关键字 + searchLoading: false, // 查询状态 map: null, // 地图对象 drawLayer: null, // 绘制图层（框选） bounds: null, // 查询区域 @@ -53,7 +56,7 @@ searchIconList: [] // 查询结果的Icon列表 } }, - computed:{ + computed: { ...mapGetters([ 'baseUrl', 'partsUrl', @@ -64,7 +67,6 @@ }, destroyed() { window.removeEventListener('click', this.handleKeyup, true) - this.socket.close() }, mounted() { this.init() @@ -85,7 +87,7 @@ if (tips) this.$message.warning('请输入查询关键字') return } // 其他不予处理 - var that = this + this.searchLoading = true const results = [] // 存放查询结果列表 // 遍历所有图层进行查询 const partsLength = this.parts.length // 全部部件图层数量 @@ -95,9 +97,9 @@ var query = esri.query({ url: part.options.url }) let queryString = '1=1' // 默认查询语句 // 如果有关键字 - if (keyword) { + if (this.keyword) { // 拼接查询语句 - queryString = str.map(item => `(${item} like '%${keyword}%')`).join(' OR ') + queryString = str.map(item => `(${item} like '%${this.keyword}%')`).join(' OR ') console.log(queryString) } else { return @@ -126,10 +128,21 @@ // 如果是最后一个图层 if (i === (partsLength - 1)) { this.searchList = results + this.searchLoading = false } }) } }, + // 清空查询 + clearSearch() { + this.searchList = [] + if (this.currentSearchMarkers.length > 0) { + for (const marker of this.currentSearchMarkers) { + this.map.removeLayer(marker) + } + this.currentSearchMarkers = [] + } + }, // 查询结果页面变化，重绘icon changeSearchPage(data) { // 清除原来绘制的点 @@ -145,12 +158,11 @@ var icon = this.searchIconList[i] const latlng = L.latLng([feature.geometry.coordinates[1], feature.geometry.coordinates[0]]) var item = L.marker(latlng, { icon: icon, layer: data[i].layer, properties: feature.properties }).addTo(this.map) - this.currentSearchMarkers.push(item) - item.on('click', function(e) { - console.log(e) - if (e.target.dragging._marker._popup) { - e.target.dragging._marker.unbindPopup() + item.on('click', e => { + if (item.getPopup()) { + item.unbindPopup() } + // 绑定弹窗 const properties = feature.properties var str = `
@@ -163,13 +175,13 @@
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
` var popup = L.popup().setContent(str) - e.target.dragging._marker.bindPopup(popup).openPopup() - // e.target.dragging._marker.openPopup() + item.bindPopup(popup).openPopup(e.latlng) }) + this.currentSearchMarkers.push(item) } // 中心置为第一个点的中心 if (this.currentSearchMarkers[0]) { - this.clickSearchItem(data[0]) + this.clickSearchItem(data[0], 0) } }, // 点击查询列表项，将位置放在中间 @@ -183,6 +195,7 @@ zoom = 19 } this.map.flyTo(latlng, zoom) + // this.currentSearchMarkers[index].openPopup() } }, // 移除框选区域 @@ -195,7 +208,10 @@ }, // 绘制选框 drawBox(type) { - this.drawDelete() + if (this.drawLayer) { + this.drawLayer.layer.remove() + } + this.bounds = null this.$nextTick(() => { this.map.pm.enableDraw(type, { snappable: false @@ -252,36 +268,25 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - const that = this // 添加底图 for (let i = 0; i <= 21; i++) { const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } this.maps.push(esri.featureLayer(item).addTo(map)) } - // TODO: 添加部件：可优化为读取配置文件里的部件图层信息 - // 添加部件, - // const partsLayer = this.baseConfig.partsLayer - for (let i = 1; i <= 40; i++) { - let item = { url: `${this.baseUrl}${this.partsUrl}/${i}`, minZoom: 18 } - console.log(item) - if (i === 15) { - item = { - url: `${this.baseUrl}${this.partsUrl}/${i}`, - minZoom: 18, - style: function(feature) { - return { color: '#ff0000', opacity: 0.75, weight: 5 } - } - } - } - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - that.currentItem = e.layer.feature - that.searchLayerByUrl(e.layer.options.url) - // 弹窗样式 - var str = `
+ // 添加部件图层 + const partsLayer = this.baseConfig.partsLayer + for (const parent of partsLayer) { // 遍历大类 + const childs = parent.children + for (const child of childs) { // 遍历小类 + const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } + console.log(item) + var layer = esri.featureLayer(item).addTo(map) + // 点击部件事件 + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + // 弹窗样式 + var str = `
${properties['小类名称']}
@@ -291,12 +296,12 @@
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) + var popup = L.popup().setContent(str) + e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() + }) + this.parts.push(layer) + } } - // this.map.setZoom(15) }, // 初始化图标 initIcons() { diff --git a/src/views/baseSource/overview.vue b/src/views/baseSource/overview.vue index fb86d4b..8a3f857 100644 --- a/src/views/baseSource/overview.vue +++ b/src/views/baseSource/overview.vue @@ -24,7 +24,7 @@ selectLayers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], // 选中图层列表 map: null, // 地图对象 maps: [], // 地图图层 - parts: [], // 部件图层 + parts: [] // 部件图层 } }, computed: { @@ -79,36 +79,25 @@ map.doubleClickZoom.disable() // 禁止双击 this.map = map // data挂载map window.map = map - const that = this - // 添加底图 + // 添加底图图层 for (let i = 0; i <= 21; i++) { const item = { url: `${this.baseUrl}${this.mapUrl}/${i}` } this.maps.push(esri.featureLayer(item).addTo(map)) } - // TODO: 添加部件：可优化为读取配置文件里的部件图层信息 - // 添加部件, - // const partsLayer = this.baseConfig.partsLayer - for (let i = 1; i <= 40; i++) { - let item = { url: `${this.baseUrl}${this.partsUrl}/${i}`, minZoom: 18 } - console.log(item) - if (i === 15) { - item = { - url: `${this.baseUrl}${this.partsUrl}/${i}`, - minZoom: 18, - style: function(feature) { - return { color: '#ff0000', opacity: 0.75, weight: 5 } - } - } - } - var layer = esri.featureLayer(item).addTo(map) - // 点击部件事件 - layer.on('click', function(e) { - // 获取要素的属性 - const properties = e.layer.feature.properties - that.currentItem = e.layer.feature - that.searchLayerByUrl(e.layer.options.url) - // 弹窗样式 - var str = `
+ // 添加部件图层 + const partsLayer = this.baseConfig.partsLayer + for (const parent of partsLayer) { // 遍历大类 + const childs = parent.children + for (const child of childs) { // 遍历小类 + const item = { url: `${this.baseUrl}${this.partsUrl}/${child.layer}`, minZoom: 18 } + console.log(item) + var layer = esri.featureLayer(item).addTo(map) + // 点击部件事件 + layer.on('click', function(e) { + // 获取要素的属性 + const properties = e.layer.feature.properties + // 弹窗样式 + var str = `
${properties['小类名称']}
@@ -118,12 +107,12 @@
权属单位：${properties['权属单位'] ? properties.权属单位 : '未知'}
详细地址：${properties['详细地址'] ? properties.详细地址 : '未知'}
` - var popup = L.popup().setContent(str) - e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() - }) - this.parts.push(layer) + var popup = L.popup().setContent(str) + e.layer.dragging._marker.bindPopup(popup, { minWidth: 200 }).openPopup() + }) + this.parts.push(layer) + } } - // this.map.setZoom(this.baseConfig.zoom) } } } diff --git a/static/project.config.json b/static/project.config.json index 11ad3c4..b4f0393 100644 --- a/static/project.config.json +++ b/static/project.config.json @@ -14,16 +14,11 @@ "children":[ {"code": "01","name": "上水井盖","layer": 20}, {"code": "02","name": "污水井盖","layer": 24}, - {"code": "03","name": "雨水井盖","layer": 20}, - {"code": "04","name": "雨水篦子","layer": 20}, {"code": "05","name": "电力井盖","layer": 16}, {"code": "06","name": "路灯井盖","layer": 30}, {"code": "07","name": "通信井盖","layer": 19}, - {"code": "08","name": "电视井盖","layer": 20}, - {"code": "09","name": "网络井盖","layer": 20}, - {"code": "10","name": "热力井盖","layer": 20}, {"code": "11","name": "燃气井盖","layer": 34}, - {"code": "11","name": "公安井盖","layer": 6} + {"code": "12","name": "公安井盖","layer": 6} ] }, {