| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { fuzzyQuery } from '../../../api/firmInfo/firmInfo' |
| | | |
| | | // 搜索栏相关 |
| | | let isShowSearchSKValBox = false |
| | | let searchVal = '' |
| | | let searchSKValList = [] |
| | | let searchVal = ref('') |
| | | let searchSKValList = ref([]) |
| | | |
| | | const onSearch = () => { |
| | | if (searchVal == '') { |
| | | if (searchVal.value == '') { |
| | | isShowSearchSKValBox = false |
| | | // 清空 |
| | | clearPoint() |
| | | } else { |
| | | isShowSearchSKValBox = true |
| | | getFuzzyQuery() |
| | | } |
| | | } |
| | | |
| | | function getFuzzyQuery() { |
| | | fuzzyQuery({ |
| | | name: searchVal.value |
| | | }).then(res => { |
| | | // console.log(res.data.data) |
| | | searchSKValList.value = res.data.data |
| | | }) |
| | | } |
| | | |
| | | const onFocus = () => { |
| | |
| | | |
| | | const sKValItemClick = (item) => { |
| | | isShowSearchSKValBox = false |
| | | if (item.lat && item.lng) { |
| | | handleCheckChange(item) |
| | | } else { |
| | | console.log('没有经纬度') |
| | | } |
| | | } |
| | | let addTileLayers = {} |
| | | const handleCheckChange = (item) => { |
| | | console.log(item) |
| | | // 先清空,在添加 |
| | | clearPoint() |
| | | if (!addTileLayers[item.name]) { |
| | | addTileLayers[item.name] = new DC.HtmlLayer(item.name) |
| | | window.$viewer.addLayer(addTileLayers[item.name]) |
| | | let iconEl = '' |
| | | if ('showPanel' in item && item.showPanel == false) { |
| | | if (item.backgroundIcon) { |
| | | iconEl = ` |
| | | <div class="map-name">${i[item.showParams] || item.name}</div> |
| | | <div class="map-icon"> |
| | | <img src="${item.backgroundIcon}"> |
| | | </div> |
| | | ` |
| | | } |
| | | } else { |
| | | iconEl = `<div class="marsBlueGradientPnl"> |
| | | <div>${item.name}</div> </div>` |
| | | } |
| | | let divIcon = new DC.DivIcon( |
| | | new DC.Position(item.lng, item.lat, 0), |
| | | `<div class="public-map-popup"> |
| | | ${iconEl} |
| | | </div>` |
| | | ) |
| | | |
| | | divIcon.attrParams = item |
| | | |
| | | let incident = () => { } |
| | | |
| | | if (item.incident) incident = item.incident |
| | | |
| | | divIcon.on(DC.MouseEventType.CLICK, incident) |
| | | |
| | | addTileLayers[item.name].addOverlay(divIcon) |
| | | window.$viewer.flyToPosition(new DC.Position(item.lng, item.lat, 2000, 0, -90, 0)) |
| | | |
| | | } else { |
| | | console.log('已存在*******************************') |
| | | window.$viewer.removeLayer(addTileLayers[item.name]) |
| | | } |
| | | } |
| | | |
| | | |
| | | function clearPoint() { |
| | | let arr = Object.keys(addTileLayers) |
| | | arr.forEach(i => { |
| | | addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i]) |
| | | }) |
| | | } |
| | | |
| | | onUnmounted(() => { |
| | | let arr = Object.keys(addTileLayers) |
| | | arr.forEach(i => { |
| | | addTileLayers[i] && window.$viewer.removeLayer(addTileLayers[i]) |
| | | }) |
| | | }) |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | color: #ffffff; |
| | | cursor: pointer; |
| | | height: 20px; |
| | | margin: 3px; |
| | | line-height: 20px; |
| | | padding-left: 10px; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | ul>li:hover { |