|
|
@@ -99,7 +99,7 @@ import more from '../assets/icon/more.svg'
|
|
|
import DrawShape from '../../static/js/startDrawShape'
|
|
|
|
|
|
// card
|
|
|
-import phoneCard from './Card.vue'
|
|
|
+import phoneCard from './card.vue'
|
|
|
|
|
|
// slogan
|
|
|
import slogan from './slogan.vue'
|
|
|
@@ -166,6 +166,23 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
+ otherStyles: { // 更多 标注 样式
|
|
|
+ Point: new Style({
|
|
|
+ image: new Icon({
|
|
|
+ crossOrigin: 'anonymous',
|
|
|
+ src: more,
|
|
|
+ scale: 0.25
|
|
|
+ })
|
|
|
+ }),
|
|
|
+ LineString: new Style({
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: '#f51a51',
|
|
|
+ width: 6
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
// popup的overlay对象
|
|
|
popup: null,
|
|
|
popupData: { // PC端 地图弹出框信息
|
|
|
@@ -202,19 +219,22 @@ export default {
|
|
|
let leftTop = [104.134737921, 30.6924231322]
|
|
|
let rightBottom = [104.155317192, 30.6466570878]
|
|
|
rightBottom = this.getExtentFromPNG(leftTop, rightBottom)
|
|
|
- // console.log('top:' + leftTop)
|
|
|
- // console.log('bottom:' + rightBottom)
|
|
|
leftTop = olProj.fromLonLat(leftTop)
|
|
|
rightBottom = olProj.fromLonLat(rightBottom)
|
|
|
// 根据设备的不同设置地图范围
|
|
|
const MOBILE = [leftTop[0], rightBottom[1], rightBottom[0], leftTop[1]]
|
|
|
- // const MOBILE = [11591641.84, 3587409, 11594985.96, 3594153.87]
|
|
|
- const PC = [11589871, 3589520, 11599383, 3592463]
|
|
|
+ // const PC = [11591064, 3589994, 11595665, 3592078]
|
|
|
+ const PC = [11591064, 3589994, 11596565, 3592078]
|
|
|
let extent = this.$store.state.isMobile ? MOBILE : PC
|
|
|
let center = [
|
|
|
- (leftTop[0] + rightBottom[0]) / 2,
|
|
|
- (leftTop[1] + rightBottom[1]) / 2
|
|
|
+ (extent[0] + extent[2]) / 2,
|
|
|
+ (extent[1] + extent[3]) / 2
|
|
|
]
|
|
|
+ // let center = [
|
|
|
+ // (leftTop[0] + rightBottom[0]) / 2,
|
|
|
+ // (leftTop[1] + rightBottom[1]) / 2
|
|
|
+ // ]
|
|
|
+ let zoom = this.$store.state.isMobile ? 14.5 : 15.5
|
|
|
|
|
|
map = new Map({
|
|
|
target: 'mapview',
|
|
|
@@ -226,18 +246,18 @@ export default {
|
|
|
source: new XYZ({
|
|
|
url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=a7baca459fe5be059d34849072e84fd0'
|
|
|
}),
|
|
|
- visible: true,
|
|
|
- nameCN: '在线地图'
|
|
|
+ visible: true
|
|
|
+ // nameCN: '在线地图'
|
|
|
}),
|
|
|
// 天地图 地图标注
|
|
|
new TileLayer({
|
|
|
class: 'basemap',
|
|
|
- title: 'tiandi-label',
|
|
|
+ title: 'tiandi',
|
|
|
source: new XYZ({
|
|
|
url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=a7baca459fe5be059d34849072e84fd0'
|
|
|
}),
|
|
|
- visible: true,
|
|
|
- nameCN: '天地图标注'
|
|
|
+ visible: true
|
|
|
+ // nameCN: '天地图标注'
|
|
|
}),
|
|
|
// 文化地图
|
|
|
new TileLayer({
|
|
|
@@ -252,8 +272,8 @@ export default {
|
|
|
},
|
|
|
servertype: 'geoserver',
|
|
|
transition: 0
|
|
|
- }),
|
|
|
- nameCN: '文化地图'
|
|
|
+ })
|
|
|
+ // nameCN: '文化地图'
|
|
|
})
|
|
|
],
|
|
|
interactions: defaultInteractions({
|
|
|
@@ -261,16 +281,16 @@ export default {
|
|
|
}),
|
|
|
view: new View({
|
|
|
center: center,
|
|
|
- zoom: 14.5,
|
|
|
+ zoom: zoom,
|
|
|
extent: extent,
|
|
|
maxZoom: 18.5
|
|
|
}),
|
|
|
- controls: control.defaults({
|
|
|
- // zoom: false
|
|
|
- })
|
|
|
- // controls: control.defaults().extend([
|
|
|
- // new control.MousePosition()
|
|
|
- // ])
|
|
|
+ // controls: control.defaults({
|
|
|
+ // // zoom: false
|
|
|
+ // }),
|
|
|
+ controls: control.defaults().extend([
|
|
|
+ new control.MousePosition()
|
|
|
+ ])
|
|
|
})
|
|
|
map.updateSize()
|
|
|
},
|
|
|
@@ -315,7 +335,7 @@ export default {
|
|
|
* @description:构建popup覆盖层
|
|
|
* @returns {void}
|
|
|
*/
|
|
|
- initOverLay: function () {
|
|
|
+ initPopupOverLay: function () {
|
|
|
var container = document.getElementById('pcPopup')
|
|
|
|
|
|
this.popup = new Overlay({
|
|
|
@@ -349,13 +369,13 @@ export default {
|
|
|
// 首次调用，创建图层
|
|
|
layer = new VectorLayer({
|
|
|
title: title,
|
|
|
+ class: 'layer',
|
|
|
className: title,
|
|
|
source: new VectorSource({
|
|
|
})
|
|
|
})
|
|
|
map.addLayer(layer)
|
|
|
}
|
|
|
-
|
|
|
// GeoJSON格式转换为ol.feature格式，样式装载
|
|
|
var geometry = msg.geometry
|
|
|
var style
|
|
|
@@ -369,6 +389,9 @@ export default {
|
|
|
case 'culture':
|
|
|
style = this.cultureStyles
|
|
|
break
|
|
|
+ case 'other':
|
|
|
+ style = this.otherStyles
|
|
|
+ break
|
|
|
}
|
|
|
var feature = this.GeoJSON_to_Feature(geometry, style)
|
|
|
|
|
|
@@ -627,9 +650,13 @@ export default {
|
|
|
case 'culture':
|
|
|
data = await that.loadCultureByID(id)
|
|
|
break
|
|
|
+ case 'other':
|
|
|
+ data = await that.loadOthersByID(id)
|
|
|
+ break
|
|
|
}
|
|
|
that.printFeature('markLayer', data, type, true, true, true)
|
|
|
that.isShow = true
|
|
|
+ bus.$emit('closeList')
|
|
|
} else {
|
|
|
that.closePopup()
|
|
|
}
|
|
|
@@ -730,6 +757,28 @@ export default {
|
|
|
return res
|
|
|
},
|
|
|
|
|
|
+ /**
|
|
|
+ * @description:通过id 查询载入'其他'信息
|
|
|
+ */
|
|
|
+ loadOthersByID: async function (id) {
|
|
|
+ var that = this
|
|
|
+ var res
|
|
|
+
|
|
|
+ await this.$axios
|
|
|
+ .post('/others/detail', {
|
|
|
+ id: id
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ that.popupData.info = response.data
|
|
|
+ that.popupData.type = '活动通知'
|
|
|
+ res = response.data
|
|
|
+
|
|
|
+ res = response.data
|
|
|
+ })
|
|
|
+
|
|
|
+ return res
|
|
|
+ },
|
|
|
+
|
|
|
/**
|
|
|
* @description:设置并聚焦到popup的显示位置
|
|
|
* @param {ol.coordinate}坐标
|
|
|
@@ -843,12 +892,12 @@ export default {
|
|
|
// 底图选择 和 消息选择 的图层切换
|
|
|
getCheckedMap: function (checkMapList) {
|
|
|
this.checkMapList = checkMapList
|
|
|
- util.map.setMapVisible(map, checkMapList)
|
|
|
+ util.map.setMapVisible(map, checkMapList, 'basemap')
|
|
|
},
|
|
|
|
|
|
getCheckedTag: function (checkTagList) {
|
|
|
this.checkTagList = checkTagList
|
|
|
- // util.map.setMapVisible(map, checkTagList)
|
|
|
+ util.map.setMapVisible(map, checkTagList, 'layer')
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
@@ -866,7 +915,7 @@ export default {
|
|
|
function onMouseWheel (ev) {
|
|
|
window.setTimeout(function () {
|
|
|
let zoom = map.getView().getZoom()
|
|
|
- // console.log('zoom:' + zoom)
|
|
|
+ console.log('zoom:' + zoom)
|
|
|
if (zoom > 15.3) {
|
|
|
// slogan[0].style.display = 'none'
|
|
|
that.slogan.isShow = false
|
|
|
@@ -941,6 +990,12 @@ export default {
|
|
|
data = res
|
|
|
})
|
|
|
break
|
|
|
+ case 'other':
|
|
|
+ await that.loadOthersByID(id)
|
|
|
+ .then(res => {
|
|
|
+ data = res
|
|
|
+ })
|
|
|
+ break
|
|
|
}
|
|
|
that.printFeature('markLayer', data, msg.type, true, true, true)
|
|
|
|
|
|
@@ -955,9 +1010,13 @@ export default {
|
|
|
bus.$on('refreshMap', () => {
|
|
|
map.removeLayer(that.getLayerByTitle('noticeLayer'))
|
|
|
map.removeLayer(that.getLayerByTitle('reportLayer'))
|
|
|
+ map.removeLayer(that.getLayerByTitle('cultureLayer'))
|
|
|
+ map.removeLayer(that.getLayerByTitle('otherLayer'))
|
|
|
map.removeLayer(that.getLayerByTitle('markLayer'))
|
|
|
that.loadRecentNotices(7)
|
|
|
that.loadRecentReports(7)
|
|
|
+ that.loadCulture()
|
|
|
+ that.loadOthers()
|
|
|
that.closePopup()
|
|
|
})
|
|
|
|
|
|
@@ -973,20 +1032,18 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
mounted () {
|
|
|
this.initMap()
|
|
|
- this.initOverLay()
|
|
|
+ this.initPopupOverLay()
|
|
|
this.busOnAction()
|
|
|
this.loadRecentReports(7)
|
|
|
this.loadRecentNotices(7)
|
|
|
- // this.loadOthers()
|
|
|
+ this.loadOthers()
|
|
|
this.loadCulture()
|
|
|
this.openCluster()
|
|
|
this.mapClick()
|
|
|
this.sloganListener()
|
|
|
},
|
|
|
-
|
|
|
watch: {
|
|
|
drawType: function () {
|
|
|
DrawShape.closeDrawShape()
|
|
|
@@ -999,7 +1056,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
filters: {
|
|
|
// 超过100位显示省略号
|
|
|
ellipsis: function (value) {
|
