<template>
<div id="olMap"></div>
</template>
<script>
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import { OSM, TileArcGISRest, Vector as VectorSource } from "ol/source";
import "ol/ol.css";
import VectorLayer from "ol/layer/Vector";
import { Style, Fill, Stroke, Text } from "ol/style";
import GeoJSON from "ol/format/GeoJSON";
import Feature from "ol/Feature";
import { createTDTImg } from "@/components/map/olMap/modules/basemap";
export default {
name: "ol初始化",
data() {
return {
mapObj: {
map: null,
view: null
},
namespace: "testkh",
layername: "shushan",
baseUrl: "http://localhost:7777/geoserver/testkh/"
};
},
mounted() {
this.initMap();
this.addGeoJsonLayer();
},
methods: {
initMap() {
this.mapObj.map = new Map({
layers: [
createTDTImg()
],
target: "olMap",
view: new View({
center: [117.28, 31.86],
zoom: 9,
projection: "EPSG:4326"
})
});
},
addGeoJsonLayer() {
let geojsonLayer = new VectorLayer({
source: new VectorSource({
url: "json/testLine.json",
format: new GeoJSON()
}),
style:[
new Style({
stroke: new Stroke({
color: "rgba(30,144,255, 0.7)",
width: 2,
lineDash: [0]
})
}),
new Style({
stroke: new Stroke({
color: [255, 250, 250, 1],
width: 2,
lineDash: [20, 27], //一组线段和间距交互的数组，可以控制虚线的长度
})
})
]
});
this.mapObj.map.addLayer(geojsonLayer);
//线动画效果
geojsonLayer.getSource().on('featuresloadend',evt=>{
geojsonLayer.getSource().getFeatures().forEach(item=>{
setInterval(()=>{
let style = item.getStyle();
if(style == undefined){
item.setStyle(
[new Style({
stroke: new Stroke({
color: "rgba(30,144,255, 0.7)",
width: 2,
})
}),
new Style({
stroke:new Stroke({
color: [255, 250, 250, 1],
width: 2,
lineDash: [20, 27], //一组线段和间距交互的数组，可以控制虚线的长度
lineDashOffset:0
})
})]
)
}else {
let lineDashOffset = item.getStyle()[1].getStroke().getLineDashOffset();
item.setStyle(
[new Style({
stroke: new Stroke({
color: "rgba(30,144,255, 0.7)",
width: 2,
})
}),
new Style({
stroke:new Stroke({
color: [255, 250, 250, 1],
width: 2,
lineDash: [2, 7], //一组线段和间距交互的数组，可以控制虚线的长度
lineDashOffset:lineDashOffset==8 ?0:lineDashOffset+1
})
})]
)
}
},100)
})
})
},
},
components: {}
};
</script>
<style scoped>
#olMap {
height: 100%;
width: 100%;
}
</style>
评论0