#vue 水流圖

dows() {var line = new LineString([[118.507906, 31.689362],[118.707906, 31.689362]]);//第二個直線數據，手動添加的位置數據var source = new VectorSource({wrapX: false});var outlineStroke = new Style({stroke: new Stroke({color: [25, 25, 255, 1],width: 10})});function getAnimationStrokeStyle() {return new Style({// geometry: new Point([118.507906, 31.689362]),// image: new Icon({// src: // "https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500",// opacity: 1,// anchor: [0.5, 0.5],// rotateWithView: true,// rotation: feature.get("dashOffset"),// scale: 0.1// })stroke: new Stroke({color: [255, 255, 255, 1],width:3,lineDash: [20,27], //一組線段和間距交互的數組，可以控制虛線的長度lineDashOffset: feature.get("dashOffset") //偏移量，控制虛線的速度和方向})});}//手動添加數據的矢量數據var feature = new Feature({geometry: line,finished: false,dashOffset: -8});function getStyle() {return [outlineStroke, getAnimationStrokeStyle()];}feature.setStyle(getStyle());source.addFeature(feature);var flightsLayer = new VectorLayer({source: source,zIndex:10});this.icingMap.addLayer(flightsLayer);setInterval(() => {let offset1 = feature.get("dashOffset");offset1 = offset1 + 1;feature.set("dashOffset", offset1);feature.setStyle(getStyle());}, 10);},

總結

以上是生活随笔為你收集整理的openlayers+vue水流图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。