<template>
|
<!-- <div id="map" style="width: 100vw; height: 100vh" /> -->
|
<div></div>
|
</template>
|
<script>
|
import 'ol/ol.css'
|
import TileLayer from 'ol/layer/Tile'
|
import VectorLayer from 'ol/layer/Vector'
|
import VectorSource from 'ol/source/Vector'
|
import XYZ from 'ol/source/XYZ'
|
import { Map, View, Feature } from 'ol'
|
import { Style, Icon, Circle, Stroke } from 'ol/style'
|
import { Point } from 'ol/geom'
|
import { getVectorContext } from 'ol/render'
|
// eslint-disable-next-line import/no-duplicates
|
import shljPng from '@/assets/img/mountain-on-red.png'
|
|
import store from '@/store/' // 全局状态
|
|
// 边界json数据
|
export default {
|
data () {
|
return {
|
map: store.state.openlayers.map2D,
|
coordinates: [
|
{ x: 106.918082, y: 31.441314 }, // 重庆
|
{ x: 86.3615820033431, y: 41.42448570787448 }, // 新疆
|
{ x: 89.71757707811526, y: 31.02619817424643 }, // 西藏
|
{ x: 116.31694544853109, y: 39.868508850821115 }, // 北京
|
{ x: 103.07940932026341, y: 30.438580338450862 }, // 成都
|
{ x: 116.4, y: 27 } // 成都
|
],
|
radius: 0,
|
speed: 0.16,
|
pointLayer: null
|
}
|
},
|
mounted () {
|
this.pointLayer = new VectorLayer({ source: new VectorSource(), zIndex: 101 })
|
|
this.map.addLayer(this.pointLayer)
|
|
this.addDynamicPoints(this.coordinates)
|
|
this.pointLayer.on('postrender', this.point)
|
},
|
methods: {
|
/**
|
* 批量添加闪烁点
|
*/
|
addDynamicPoints (coordinates) {
|
// 设置图层
|
// 添加图层
|
// 循环添加feature
|
const pointFeature = []
|
for (let i = 0; i < coordinates.length; i++) {
|
// 创建feature，一个feature就是一个点坐标信息
|
const feature = new Feature({
|
geometry: new Point([coordinates[i].x, coordinates[i].y])
|
})
|
|
feature.setStyle(
|
new Style({
|
image: new Icon({
|
scale: 0.22,
|
opacity: 1,
|
src: shljPng
|
// src: require('../../assets/Mark.png')
|
})
|
})
|
)
|
|
pointFeature.push(feature)
|
}
|
// 把要素集合添加到图层
|
this.pointLayer.getSource().addFeatures(pointFeature)
|
// 关键的地方在此：监听postrender事件，在里面重新设置circle的样式
|
},
|
|
point (e) {
|
if (this.radius >= 8) this.radius = 0
|
const pointStyle = new Style({
|
image: new Circle({
|
radius: this.radius,
|
stroke: new Stroke({
|
color: 'rgba(255,0,0,0.5)',
|
width: 2 // 设置宽度
|
})
|
})
|
})
|
// 获取矢量要素上下文
|
const vectorContext = getVectorContext(e)
|
vectorContext.setStyle(pointStyle)
|
this.pointLayer.getSource().getFeatures().forEach((feature) => {
|
vectorContext.drawGeometry(feature.getGeometry())
|
})
|
this.radius = this.radius + this.speed // 调整闪烁速度
|
// 请求地图渲染（在下一个动画帧处）
|
this.map.render()
|
}
|
},
|
|
destroyed () {
|
this.pointLayer.un('postrender', this.point)
|
|
this.pointLayer.getSource().clear()
|
|
this.map.removeLayer(this.pointLayer)
|
}
|
}
|
</script>
|
