current position:Home>Realization of radar scanning effect of Gaode map

Realization of radar scanning effect of Gaode map

2021-08-26 00:40:30 The sun set

  • As soon as we see it , After ten minutes . Use it in the back without scratching your hair .
  • There is no difficulty in this , Dynamic effects are not very common on maps , The main thing is that I'm searching Gaud map radar scanning , Map radar scanning What you get is not directly usable . A comment on an article, the next brother commented

 screenshots 2021-08-22  Afternoon 4.12.45.png I can understand this feeling very well , The search found a case , Then you find that you need to add friends to get 🤬

Start

  • Use in instance vue + Gao de jsApi + canvas Realization . It's just a way of canvas Add the drawn radar scan to the map .
  • Currently support adding canvas Your map has Four dimensional innovation , Gao de , Baidu etc. , Of course, in addition to these companies, there may be other maps that also support , But I don't know , So I won't list .
  • Radar scanning effect , It is borrowed from this article , Made a little change

Load... On the map canvas

  • Be careful : Used in this article api Version is 2.0
  • Loading of Gaode map , Initialization will not be described here , The official website documents are written clearly Lose a link here

How to load... On the map canvas

  • First, look at the official documents , In layers -》 There is a... Under the own data layer canvas An example of a layer is what we're looking for Link here , The main thing is this code
 //  Create a  canvas coating  
 // canvas  Created by  canvas  Elements 
 // bounds  boundaries  canvas The size of the element display range and the point on the map ( Personal understanding )
 var CanvasLayer = new AMap.CanvasLayer({
    canvas: canvas,
    bounds: new AMap.Bounds(
        [116.328911, 39.937229],
        [116.342659, 39.946275]
    ),
    zooms: [3, 18],
});

//  Add to map 
map.addLayer(CanvasLayer);
 Copy code 
  • Now we , With canvas The radar scanning map drawn and the method of loading it on the map . Then you can start composing code

Load the radar scan onto the map

  • It seems that the code is very long , The main reason is that the function of creating radar scanning map is relatively long , But don't care . Three functions
    • initMap Initialize map After loading, execute loading canvas Layer operation .
    • initMyCanvas Create radar scan
    • addTestCanvas establish canvas Layer and add canvas Radar scan loaded into map
<template>
<div class="mapbox">
  <!--  Map loading container  -->
  <div id="map">
    <!-- canvas   Radar scan container  -->
    <canvas id="canvas" width="300" height="300"></canvas>
  </div>
</div>
</template>

<script>
export default {
  name: "GDMap",
  data () {
    return {
      mapObj: null
    }
  },
  mounted() {
    //  initialization   Gould map 
    this.initMap()
  },
  methods: {
    //  Map initialization function 
    initMap() {
      this.mapObj = new AMap.Map('map', {
        viewMode:"3D",
        center: [116.335183, 39.941735],
        zoom: 14
      })

      //  preservation this
      let self = this

      //  Triggered after the map block is loaded 
      this.mapObj.on('complete', function(){
        self.addTestCanvas()
      });
    },

    //  establish   Radar scan   https://wjoan.github.io/2017/06/15/canvas/  Learn from this 
    initMyCanvas(canvas) {
      const c = document.getElementById(canvas);
      let animID = null
      //  The... Could not be found DOM object 
      if (!c) {
        console.log("[error] can not find id '" + canvas + "'");
        return null;
      }
      //  Quoted the wrong DOM object 
      if (!c.getContext) {
        console.log("[error] getContext is undefined");
        return null;
      }

      const ctx = c.getContext("2d");

      //  The width and height of the canvas 
      const cWidth = c.width;
      const cHeight = c.height;
      //  Center point 
      const centerX = c.width / 2;
      const centerY = c.height / 2;
      //  radius 
      const radius = centerX * 0.9;

      const drawPoint = function (x, y, n) {
        ctx.lineWidth = 1;
        for (let i = n; i > 0; i--) {
          ctx.beginPath();
          ctx.arc(x, y, n - i, 0, 2 * Math.PI);
          ctx.strokeStyle = "rgba(42,195,39," + i / n + ")";
          ctx.stroke();
        }
      };

      const drawCircle = function (r, lineWidth = 1, color = "#090") {
        ctx.beginPath();
        ctx.setLineDash([]);
        ctx.arc(centerX, centerY, r, 0, 2 * Math.PI);
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = color;
        ctx.stroke();
      };

      const drawSector = function (sAngle, eAngle) {
        let blob = 50;
        let increase = 0;

        if (sAngle < eAngle) {
          increase = (eAngle - sAngle) / blob;
        } else if (sAngle > eAngle) {
          increase = (Math.PI * 2 - sAngle + eAngle) / blob;
        } else {
          return;
        }

        let angle1 = sAngle;
        let angle2 = sAngle + increase;
        for (let i = 0; i < blob; i++) {
          ctx.beginPath();
          ctx.moveTo(centerX, centerY);
          ctx.arc(centerX, centerY, radius, angle1, angle2);
          ctx.fillStyle = "rgba(42,195,39," + i / blob + ")";
          ctx.fill();
          angle1 = angle2;
          angle2 = angle1 + increase;
          if (angle2 >= Math.PI * 2) {
            ctx.beginPath();
            ctx.moveTo(centerX, centerY);
            ctx.arc(centerX, centerY, radius, angle1, Math.PI * 2);
            ctx.fillStyle = "rgba(42,195,39," + i / blob + ")";
            ctx.fill();
            angle1 = 0;
            angle2 = angle1 + increase;
          }
        }
      };

      const Line = function (x, y, lineDash = [], color = "#396a00", lineWidth = 1) {
        ctx.beginPath();
        ctx.setLineDash(lineDash);
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(x, y);
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = color;
        ctx.stroke();
      };

      const init = function () {
        //  The background is filled with black 
        ctx.fillStyle = "transparent";
        ctx.fillRect(0, 0, cWidth, cHeight);
        for (let i = 1; i <= 8; i++) {
          Line(centerX + Math.sin(Math.PI * i / 4) * radius,
              centerY + Math.cos(Math.PI * i / 4) * radius,
              [5, 3], "#396a00");
        }

        for (let i = 1; i <= 15;) {
          Line(centerX + Math.sin(Math.PI * i / 8) * radius,
              centerY + Math.cos(Math.PI * i / 8) * radius,
              [], "#062807");
          i += 2;
        }

        drawCircle(0.9 * centerY, 2.5);
        drawCircle(0.8 * centerY, 2.5, "#042906");
        drawCircle(0.6 * centerY);
        drawCircle(0.3 * centerY);
      };

      return {
        animID: undefined,
        points: [
          [cWidth / 3, cHeight * 3 / 7],
          [cWidth * 4 / 5, cHeight * 6 / 9]
        ],
        addPoints(x, y) {
          this.points.push([x, y]);
        },
        clear() {
          cancelAnimationFrame(animID);   //  Stop Animation 
          ctx.clearRect(0, 0, cWidth, cHeight);  //  Clear the canvas 
          this.points = [[cWidth / 3, cHeight * 3 / 7], [cWidth * 4 / 5, cHeight * 6 / 9]];  //  Reset default point 
        },
        scan() {
          let angle = Math.PI / 4;
          let scanBegin = 0;
          let scanEnd = angle;
          let pointRadius = 1;
          //  Draw radar scan 
          let move = () => {
            ctx.clearRect(0, 0, cWidth, cHeight);  //  Clear the canvas 
            init();         //  Redraw the background 
            drawSector(scanBegin, scanEnd);   //  Draw the sector scan area 
            // drawPoint(cWidth/3, cHeight*3/7, pointRadius);  //  Draw light points 
            // drawPoint(cWidth*4/5, cHeight*6/9, pointRadius);
            for (let p of this.points) {
              drawPoint(p[0], p[1], pointRadius);
            }
            //  Change the radius of the point and the angle of the sector 
            pointRadius += 0.08;
            scanBegin += angle / 25;
            scanEnd = scanBegin + angle;
            //  Exceeding the threshold becomes the initial value 
            if (scanBegin >= Math.PI * 2) {
              scanBegin = 0;
              scanEnd = scanBegin + angle;
            }
            if (pointRadius >= 7) pointRadius = 0;
            //  Draw again 
            animID = window.requestAnimFrame(move);
          }

          window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                  window.setTimeout(callback, 1000 / 60);
                };
          })();

          animID = window.requestAnimFrame(move);
        },
        stopScan() {
          cancelAnimationFrame(animID);
        }
      }

    },

    //  establish canvas Layers , And load the radar scanning map into the map 
    addTestCanvas() {
      //  Create Layer 
      const CanvasLayer = new AMap.CanvasLayer({
        canvas: document.getElementById('canvas'),
        bounds: new AMap.Bounds(
            [116.328911, 39.937229],
            [116.362659, 39.966275]
        ),
        zooms: [3, 18],
      });

      //  Load layers into the map 
      this.mapObj.addLayer(CanvasLayer);

      //  Load asynchronously   In fact, it's better to delay by one second , adopt js establish canvas The element does not need .
      this.$nextTick(() => {
        //  Create a radar scan   And start animating 
        this.initMyCanvas('canvas').scan()
      })
    }
  },
  beforeDestroy() {
    //  When the map exists   Destroy the map 
    if (this.mapObj) {
      this.mapObj.destroy( );
    }
  }
}
</script>

<style lang="stylus" scoped>
.mapbox{
  width 100%
  height 100%
  #map{
    width 100%
    height 100%
  }
}
</style>
 Copy code 

Load other maps canvas

  • In fact, they are almost , See the example on the official website for details , The ingredients are all for you , You can still starve yourself ?

Baidu

Four dimensional innovation

  • Layers -》 Special layers -》canvas source Layers I'm the official website link
  • This map probably doesn't have much popularity , Specific can baidu , And a hypergraph They are very much alike

The article is over , I think it's OK. I like it .

  • Welcome to discuss .

copyright notice
author[The sun set],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826004026234w.html

Random recommended