|
|
@@ -80,7 +80,7 @@ import {defaults as defaultInteractions} from 'ol/interaction'
|
|
|
import Feature from 'ol/Feature'
|
|
|
import * as control from 'ol/control'
|
|
|
import {Style, Icon, Stroke} from 'ol/style'
|
|
|
-import {Vector as VectorSource} from 'ol/source'
|
|
|
+import {Cluster, Vector as VectorSource} from 'ol/source'
|
|
|
import TileSource from 'ol/source/TileWMS'
|
|
|
import XYZ from 'ol/source/XYZ'
|
|
|
import Overlay from 'ol/Overlay'
|
|
|
@@ -216,8 +216,11 @@ export default {
|
|
|
*/
|
|
|
initMap: function () {
|
|
|
// PNG范围
|
|
|
- let leftTop = [104.134737921, 30.6924231322]
|
|
|
- let rightBottom = [104.155317192, 30.6466570878]
|
|
|
+ let leftTop = [11592187.449797414, 3592590.200040145]
|
|
|
+ let rightBottom = [11594508.118271504, 3587434.465393465]
|
|
|
+ // 经纬度
|
|
|
+ // let leftTop = [104.13439162531515, 30.690273107307597]
|
|
|
+ // let rightBottom = [104.15523854491164, 30.650437034690334]
|
|
|
rightBottom = this.getExtentFromPNG(leftTop, rightBottom)
|
|
|
leftTop = olProj.fromLonLat(leftTop)
|
|
|
rightBottom = olProj.fromLonLat(rightBottom)
|
|
|
@@ -279,20 +282,53 @@ export default {
|
|
|
interactions: defaultInteractions({
|
|
|
pinchRotate: false // 移动端禁止地图旋转
|
|
|
}),
|
|
|
+
|
|
|
view: new View({
|
|
|
center: center,
|
|
|
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()
|
|
|
+ setTimeout(function () { map.updateSize() })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @description:开启聚合
|
|
|
+ */
|
|
|
+ addCluster: function (layerName, layerStyle) {
|
|
|
+ let layer = map.getLayers().array_
|
|
|
+ for (let i = 0; i < layer.length; i++) {
|
|
|
+ if (layer[i].className_ === layerName) {
|
|
|
+ var targetLayer = layer[i]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (targetLayer) {
|
|
|
+ let features = targetLayer.getSource().getFeatures()
|
|
|
+ let source = new VectorSource({
|
|
|
+ features: features
|
|
|
+ })
|
|
|
+ let clusterSource = new Cluster({
|
|
|
+ distance: 20,
|
|
|
+ source: source
|
|
|
+ })
|
|
|
+ targetLayer.setSource(clusterSource)
|
|
|
+ let style = (feature) => {
|
|
|
+ let lastFeature = feature.get('features')[feature.get('features').length - 1]
|
|
|
+ feature.set('id', lastFeature.values_.id)
|
|
|
+ feature.set('type', lastFeature.values_.type)
|
|
|
+ let style = layerStyle
|
|
|
+ return style
|
|
|
+ }
|
|
|
+ targetLayer.setStyle(style)
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
@@ -371,6 +407,7 @@ export default {
|
|
|
title: title,
|
|
|
class: 'layer',
|
|
|
className: title,
|
|
|
+ // extent: this.extent,
|
|
|
source: new VectorSource({
|
|
|
})
|
|
|
})
|
|
|
@@ -402,6 +439,9 @@ export default {
|
|
|
// 要素装载入图层
|
|
|
// 1.起始点
|
|
|
layer.getSource().addFeature(feature)
|
|
|
+ // if (!isLocate) {
|
|
|
+ // layer.getSource().addFeature(feature)
|
|
|
+ // }
|
|
|
// 2.关联线
|
|
|
let fe = null
|
|
|
if (isRelate && msg.relate) {
|
|
|
@@ -420,11 +460,9 @@ export default {
|
|
|
locatedFeature = fe
|
|
|
feaType = 'relate'
|
|
|
}
|
|
|
-
|
|
|
this.locateAtFeature(locatedFeature, feaType)
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
/**
|
|
|
* @description:根据 GeoJSON 格式数据绘制要素
|
|
|
* tips:目前支持类型：Point,MultiLineString
|
|
|
@@ -571,6 +609,7 @@ export default {
|
|
|
res.data.forEach(item => {
|
|
|
that.printFeature('reportLayer', item, 'report')
|
|
|
})
|
|
|
+ this.addCluster('reportLayer', this.reportStyles.Point)
|
|
|
})
|
|
|
},
|
|
|
|
|
|
@@ -589,6 +628,7 @@ export default {
|
|
|
res.data.forEach(item => {
|
|
|
that.printFeature('noticeLayer', item, 'notice')
|
|
|
})
|
|
|
+ this.addCluster('noticeLayer', this.noticeStyles.Point)
|
|
|
})
|
|
|
},
|
|
|
|
|
|
@@ -604,6 +644,7 @@ export default {
|
|
|
res.data.forEach(e => {
|
|
|
that.printFeature('cultureLayer', e, 'culture')
|
|
|
})
|
|
|
+ this.addCluster('cultureLayer', this.cultureStyles.Point)
|
|
|
})
|
|
|
},
|
|
|
|
|
|
@@ -618,6 +659,7 @@ export default {
|
|
|
res.data.forEach(e => {
|
|
|
that.printFeature('otherLayer', e, 'other')
|
|
|
})
|
|
|
+ this.addCluster('otherLayer', this.moreStyles.Point)
|
|
|
})
|
|
|
},
|
|
|
|
|
|
@@ -852,42 +894,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- /**
|
|
|
- * @description:底图切换
|
|
|
- * @param {string} name:识别字符串
|
|
|
- */
|
|
|
- basemapChange: function (name) {
|
|
|
- switch (name) {
|
|
|
- case 'all':
|
|
|
- this.setMapVisible(['cdut', 'tiandi', 'tiandi-label'])
|
|
|
- break
|
|
|
- case 'cdut':
|
|
|
- this.setMapVisible(['cdut'])
|
|
|
- break
|
|
|
- case 'tiandi':
|
|
|
- this.setMapVisible(['tiandi', 'tiandi-label'])
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * @description：设置图层可见性
|
|
|
- * @param {Array} titles:装有图层title的数组
|
|
|
- */
|
|
|
- setMapVisible: function (titles) {
|
|
|
- var layers = map.getLayers().array_
|
|
|
- for (var i = 0; i < layers.length; i++) {
|
|
|
- if (layers[i].values_.class !== 'basemap') {
|
|
|
- continue
|
|
|
- }
|
|
|
- if (titles.indexOf(layers[i].values_.title) > -1) {
|
|
|
- layers[i].setVisible(true)
|
|
|
- } else {
|
|
|
- layers[i].setVisible(false)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
// LayerSelector related
|
|
|
// 底图选择 和 消息选择 的图层切换
|
|
|
getCheckedMap: function (checkMapList) {
|
|
|
@@ -1032,7 +1038,6 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
mounted () {
|
|
|
this.initMap()
|
|
|
this.initPopupOverLay()
|
|
|
@@ -1045,7 +1050,6 @@ export default {
|
|
|
this.mapClick()
|
|
|
this.sloganListener()
|
|
|
},
|
|
|
-
|
|
|
watch: {
|
|
|
drawType: function () {
|
|
|
DrawShape.closeDrawShape()
|
|
|
@@ -1058,7 +1062,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
filters: {
|
|
|
// 超过100位显示省略号
|
|
|
ellipsis: function (value) {
|
