|
|
@@ -50,6 +50,9 @@
|
|
|
<div class="gis-content">
|
|
|
<RouterViewCom/>
|
|
|
</div>
|
|
|
+ <div ref="ref_qyDom" class="qy-info">
|
|
|
+ {{qyParams.qyInfo.name}}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -80,6 +83,12 @@ import BaseCom from './tools/base.vue'
|
|
|
import ExampleCom from './tools/example.vue'
|
|
|
import * as source from "ol/source";
|
|
|
import * as layer from "ol/layer";
|
|
|
+import * as style from "ol/style";
|
|
|
+import * as format from "ol/format";
|
|
|
+import QyStyle from '../map-info/style/qy'
|
|
|
+import CommonStyle from '../map-info/style/common'
|
|
|
+import * as ol from "ol";
|
|
|
+import { v4 } from "uuid";
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
@@ -109,6 +118,13 @@ export default defineComponent({
|
|
|
toolsParams: {
|
|
|
element: null,
|
|
|
position: null
|
|
|
+ },
|
|
|
+ qyParams: {
|
|
|
+ layer: <any>null,
|
|
|
+ source: <any>null,
|
|
|
+ tempFeature: <any>null,
|
|
|
+ overlay: <any>null,
|
|
|
+ qyInfo: {}
|
|
|
}
|
|
|
})
|
|
|
const ToolsMapper = [
|
|
|
@@ -125,7 +141,35 @@ export default defineComponent({
|
|
|
const mapLoad = (map, func) => {
|
|
|
state.map = map
|
|
|
state.mapFunc = func
|
|
|
- // initWMSElement()
|
|
|
+ state.map.on('singleclick', e => {
|
|
|
+ let flag = false
|
|
|
+ map.forEachFeatureAtPixel(e.pixel, (f) => {
|
|
|
+ if (!flag) {
|
|
|
+ flag = true
|
|
|
+ // 恢复上一个要素的样式
|
|
|
+ if (state.qyParams.tempFeature) {
|
|
|
+ if (state.qyParams.tempFeature.get('isAnalysis')) {
|
|
|
+ state.qyParams.tempFeature.setStyle(state.qyParams.tempFeature.get('analysisStyle'))
|
|
|
+ } else {
|
|
|
+ state.qyParams.tempFeature.setStyle(state.qyParams.tempFeature.get('defaultStyle'))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 新的要素
|
|
|
+ if (f.get('isAnalysis')) {
|
|
|
+ f.setStyle(f.get('analysisActiveStyle'))
|
|
|
+ } else {
|
|
|
+ f.setStyle(f.get('activeStyle'))
|
|
|
+ }
|
|
|
+ state.qyParams.qyInfo = f.get('info')
|
|
|
+ state.qyParams.overlay.setPosition(f.getGeometry().getCoordinates())
|
|
|
+ // 备份新的要素
|
|
|
+ state.qyParams.tempFeature = f
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ hitTolerance: 0,
|
|
|
+ });
|
|
|
+ })
|
|
|
+ initQYLayer()
|
|
|
}
|
|
|
const menuCpt = computed(() => {
|
|
|
return router.options.routes.filter(v => v.name === store.state.gis.menuRootName)[0].children?.filter(v => !v.meta.noMenu)
|
|
|
@@ -140,27 +184,6 @@ export default defineComponent({
|
|
|
{name: 123},
|
|
|
{name: 123},
|
|
|
]
|
|
|
- // if (state.showBayonet) {
|
|
|
- // state.searchAllList.bayonet.forEach(v => {
|
|
|
- // if (v.name?.includes(queryString)) {
|
|
|
- // arr.push(v)
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- // if (state.showVideo) {
|
|
|
- // state.searchAllList.video.forEach(v => {
|
|
|
- // if (v.name?.includes(queryString)) {
|
|
|
- // arr.push(v)
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- // if (state.showElement) {
|
|
|
- // state.searchAllList.element.forEach(v => {
|
|
|
- // if (v.name?.includes(queryString)) {
|
|
|
- // arr.push(v)
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
cb(arr)
|
|
|
} else {
|
|
|
cb([])
|
|
|
@@ -187,34 +210,56 @@ export default defineComponent({
|
|
|
state.toolsType = (state.toolsType === item.value ? '' : item.value)
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- const initWMSElement = () => {
|
|
|
- const _tileWMS = new source.TileWMS({
|
|
|
- url: `http://192.168.31.19:7074/queryTile`,
|
|
|
- params: {
|
|
|
- 'FORMAT': 'image/png8',
|
|
|
- 'VERSION': '1.1.1',
|
|
|
- "exceptions": 'application/vnd.ogc.se_inimage',
|
|
|
- 'CQL_FILTER': "(mergeTarget in ('110'))",
|
|
|
- layers: 'geo_fk_ship',
|
|
|
- refresh: new Date().getTime()
|
|
|
+ const ref_qyDom = ref()
|
|
|
+ const initQYLayer = () => {
|
|
|
+ const arr: any = []
|
|
|
+ for (let i = 0; i < 105; i++) {
|
|
|
+ const obj = {
|
|
|
+ name: '企业企业企业企业企业_' + i,
|
|
|
+ wkt: `POINT(${that.$util.randomNum(108.738329, 110.912130, 6)} ${that.$util.randomNum(18.154784, 20, 6)})`,
|
|
|
+ }
|
|
|
+ if (i % 2 === 0) {
|
|
|
+ obj.type = 'lgszyjkscsb'
|
|
|
+ } else if (i % 2 === 1) {
|
|
|
+ obj.type = 'jgzzmgs'
|
|
|
+ } else if (i % 2 === 2) {
|
|
|
+ obj.type = 'lgsjkyfl'
|
|
|
}
|
|
|
+ arr.push(obj)
|
|
|
+ }
|
|
|
+ const features = arr.map(v => {
|
|
|
+ const feat: any = new format.WKT().readFeature(v.wkt)
|
|
|
+ feat.set('defaultStyle', QyStyle.qyStyle(v.type))
|
|
|
+ feat.set('activeStyle', [...CommonStyle.activeStyle(), ...QyStyle.qyStyle(v.type)])
|
|
|
+ feat.set('analysisStyle', [...CommonStyle.analysisStyle(), ...QyStyle.qyStyle(v.type)])
|
|
|
+ feat.set('analysisActiveStyle', [...CommonStyle.activeStyle(), ...CommonStyle.analysisStyle(), ...QyStyle.qyStyle(v.type)])
|
|
|
+ feat.set('isAnalysis', false)
|
|
|
+ feat.set('info', v)
|
|
|
+ feat.setStyle(feat.get('defaultStyle'))
|
|
|
+ return feat
|
|
|
})
|
|
|
- const elementLayer = new layer.Tile({
|
|
|
- source: _tileWMS,
|
|
|
- zIndex: 2,
|
|
|
- homeLayer: 'WMSElement'
|
|
|
+ state.qyParams.source = new source.Vector({
|
|
|
+ features: features,
|
|
|
+ wrapX: false
|
|
|
})
|
|
|
- state.map.addLayer(elementLayer)
|
|
|
- state.map.on('singleclick', e => {
|
|
|
- console.log(e)
|
|
|
- const viewResolution = e.map.getView().getResolution()
|
|
|
- const url = e.map.getLayers().getArray().filter(v => v.get('homeLayer') === 'WMSElement')[0]?.getSource().getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:4326', {
|
|
|
- INFO_FORMAT: 'application/json'
|
|
|
- })
|
|
|
- console.log(url)
|
|
|
+ state.qyParams.layer = new layer.VectorImage({
|
|
|
+ source: state.qyParams.source,
|
|
|
+ zIndex: 10
|
|
|
})
|
|
|
-
|
|
|
+ state.map.addLayer(state.qyParams.layer)
|
|
|
+ // 详情
|
|
|
+ state.qyParams.overlay = new ol.Overlay({
|
|
|
+ id: v4(),
|
|
|
+ element: ref_qyDom.value,
|
|
|
+ autoPan: false,
|
|
|
+ offset: [0, -60],
|
|
|
+ positioning: 'bottom-center',
|
|
|
+ stopEvent: true,
|
|
|
+ autoPanAnimation: {
|
|
|
+ duration: 250
|
|
|
+ }
|
|
|
+ })
|
|
|
+ state.map.addOverlay(state.qyParams.overlay)
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
// state.toolsCom = AnalysisCom
|
|
|
@@ -229,6 +274,7 @@ export default defineComponent({
|
|
|
searchHandleMapSearch,
|
|
|
searchToMapLocation,
|
|
|
toolsHandleClick,
|
|
|
+ ref_qyDom,
|
|
|
}
|
|
|
},
|
|
|
})
|
|
|
@@ -410,5 +456,23 @@ export default defineComponent({
|
|
|
.gis-content {
|
|
|
z-index: 4;
|
|
|
}
|
|
|
+ .qy-info {
|
|
|
+ $bgColor: #2860CE;
|
|
|
+ width: 315px;
|
|
|
+ height: 158px;
|
|
|
+ background-color: $bgColor;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: -10px;
|
|
|
+ border-top: 10px solid $bgColor;
|
|
|
+ border-left: 10px solid transparent;
|
|
|
+ border-right: 10px solid transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
CzRger
