venus-map - npm Package Compare versions

Comparing version 1.0.52 to 1.0.53

package.json

 {
   "name": "venus-map",
-  "version": "1.0.52",
+  "version": "1.0.53",
   "description": "tq-fed-map",
@@ -5,0 +5,0 @@ "main": "./build/index.js",

src/feature/IconMarker.js

 import Feature from 'ol/Feature'
 import Point from 'ol/geom/Point'
+import MultiPoint from 'ol/geom/MultiPoint'
 import { asArray } from 'ol/color'
-import { unByKey } from 'ol/Observable'
+import { toContext } from 'ol/render'
+// import { unByKey } from 'ol/Observable'
 import { easeOut } from 'ol/easing'
@@ -27,2 +29,4 @@ import { Icon, Fill, Style, Text, Stroke, Circle as CircleStyle } from 'ol/style'
 
+const COUNT = 4
+
 class IconMarker {
@@ -49,2 +53,4 @@ constructor(coordinate, opt = {}) {
     this.flashListenKeys = new Set()
+
+    this._flashRunner = null
   }
@@ -56,2 +62,9 @@
     const feature = new Feature(new Point(MKTCoordinate))
+
+    const coords = []
+    for (let index = 0; index < COUNT; index++) {
+      coords.push(MKTCoordinate)
+    }
+    this.animationFeature = new Feature(new MultiPoint(coords))
+    this.animationFeature.setStyle(new Style())
     feature._exData = data
@@ -63,6 +76,7 @@ feature.setId(this.uuid)
   _setLayer(layer) {
-    const { source } = layer
+    const { source, animationLayer } = layer
     this.layer = layer
     this.source = source
     this.source.addFeature(this.feature)
+    animationLayer.getSource().addFeature(this.animationFeature)
   }
@@ -104,2 +118,4 @@
     this.isFlash = false
+    this._flashRunner = null
+    this.animationFeature.setStyle(new Style())
   }
@@ -109,3 +125,3 @@
     const config = Object.assign({}, this.flashConf, conf)
-    const { color, count } = config
+    const { color } = config
     if (this.isFlash || this.flashListenKeys.size > 0) {
@@ -117,58 +133,44 @@ return
     const rgbaColor = `rgba(${fillColor[0]}, ${fillColor[1]},${fillColor[2]}, #op)`
-    let i = 1
-    this._flash(rgbaColor)
-    const loop = setInterval(() => {
-      i = i + 1
-      this._flash(rgbaColor)
-      if (i === count) {
-        clearInterval(loop)
-      }
-    }, 600)
+    this._flashRunner = this._flash(rgbaColor)
   }
 
-  _flash(color) {
-    const { animationLayer, map } = this.layer
+  _flash(color) { // count 多少环
+    const { animationLayer, map } = this.layer // eslint-disable-line
     const start = new Date().getTime()
-    const MKTCoordinate = coordinateTransfer.GPS2MKT(this.coordinate)
-    const animationFeature = new Feature(new Point(MKTCoordinate))
-
-    const listenerKey = map.on('postcompose', (event) => {
-      const { frameState } = event
-      const elapsed = frameState.time - start
-      const elapsedRatio = elapsed / 3000
-      // radius will be 5 at start and 30 at end.
-      const radius = easeOut(elapsedRatio) * 20 + 5
-      const opacity = easeOut(0.4 - elapsedRatio)
-
-      const style = new Style({
-        image: new CircleStyle({
-          radius: radius,
-          stroke: new Stroke({
-            color: color.replace('#op', opacity),
-            width: 0.25 + opacity,
+    return () => {
+      const getStyle = (index) => {
+        const elapsed = new Date().getTime() - start + 500 * index
+        const elapsedRatio = (elapsed % 2000) / 2000
+        // radius will be 5 at start and 30 at end.
+        const radius = easeOut(elapsedRatio) * 10 + 5
+        const opacity = easeOut(0.4 - elapsedRatio)
+        return new Style({
+          image: new CircleStyle({
+            radius: radius,
+            stroke: new Stroke({
+              color: color.replace('#op', opacity),
+              width: 0.25 + opacity,
+            }),
+            fill: new Fill({
+              color: color.replace('#op', opacity),
+            }),
           }),
-          fill: new Fill({
-            color: color.replace('#op', opacity),
-          }),
-        }),
-      })
-      animationFeature.setStyle(style)
-      if (!animationLayer.getSource().hasFeature(animationFeature)) {
-        animationLayer.getSource().addFeature(animationFeature)
+        })
       }
 
-      if (elapsed > 3000) {
-        unByKey(listenerKey)
-        this.flashListenKeys.delete(listenerKey)
-        if (this.isFlash) {
-          this._flash(color)
-        } else {
-          animationLayer.getSource().removeFeature(animationFeature)
-          return
-        }
+      const style = () => {
+        return new Style({
+          renderer: (infos, State) => {
+            const { context } = State
+            const render = toContext(context)
+            infos.forEach((coords, index) => {
+              const style = getStyle(index)
+              render.setStyle(style)
+              render.drawGeometry(new Point(coords))
+            })
+          },
+        })
       }
-      map.render()
-    })
-    this.flashListenKeys.add(listenerKey)
-    map.render()
+      this.animationFeature.setStyle(style)
+    }
   }
@@ -175,0 +177,0 @@ }

src/layers/IconMarkerLayer.js

@@ -7,3 +7,3 @@ import Vector from 'ol/source/Vector'
 import Collection from 'ol/Collection'
-
+import { unByKey } from 'ol/Observable'
 import TLayer from '../bean/TLayer'
@@ -56,2 +56,3 @@ import IconMarker from '../feature/IconMarker'
       'cacheChecked',
+      'flashStatus',
     ]
@@ -91,2 +92,10 @@
     this.multi = multi
+    this.flashStatus = false
+    this.flashKey = null
+
+    this._handlerFlashRender = (event) => {
+      Object.values(this.markers).forEach(m => m._flashRunner && m._flashRunner(event))
+      // this.flashStatus && requestAnimationFrame(this._handlerFlashRender)
+      this.map.render()
+    }
   }
@@ -387,2 +396,16 @@
 
+  setFlashStatus(f) {
+    if (f && !this.flashStatus) {
+      this.flashStatus = f
+      this.flashKey = this.map.on('postcompose', this._handlerFlashRender)
+      this.map.render()
+      this.emit('start-flash')
+    } else {
+      this.flashStatus = f
+      this.flashKey && unByKey(this.flashKey)
+      this.map.un('postcompose', this._handlerFlashRender)
+      this.emit('stop-flash')
+    }
+  }
+
   clearChecked() {
@@ -389,0 +412,0 @@ this.checkedFeatures.clear()

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3395938

increased by0.23%

Lines of code

6963

increased by0.4%

No dependency changes