mapbox/minemap 动态扩散/水纹效果

最新推荐文章于 2024-05-17 17:02:30 发布

A873054267

最新推荐文章于 2024-05-17 17:02:30 发布

阅读量3.8k

点赞数

分类专栏： minemap

本文链接：https://blog.csdn.net/A873054267/article/details/102570812

版权

minemap 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

官网上的demo使用div来做的，但当数据量变大后，地图移动会特别卡。因此需要用canvas来绘制。

非地图模式下，此段代码可以直接运行，

最终版本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加圆形扩散效果标注</title>
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v2.0.0/minemap.css">
    <script src="//minedata.cn/minemapapi/v2.0.0/minemap.js"></script>
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
        }

        html, body {
            margin: 0;
            padding: 0;
        }


    </style>
</head>
<body>
<div id="map">
</div>
<script>

    minemap.domainUrl = '//minedata.cn';
    minemap.dataDomainUrl = '//datahive.minedata.cn';
    minemap.spriteUrl = '//minedata.cn/minemapapi/v2.0.0/sprite/sprite';
    minemap.serviceUrl = '//minedata.cn/service';
    minemap.accessToken = '25cc55a69ea7422182d00d6b7c0ffa93';
    minemap.solution = 2365;
    var map = new minemap.Map({
        container: 'map',
        style: "//minedata.cn/service/solu/style/id/2365",
        center: [116.46,39.92],
        zoom: 12,

    });

    let canvasContainer = map._canvasContainer,

     mapboxCanvas = map._canvas,
         canvasOverlay = document.createElement("canvas");
    console.log(canvasContainer)
    canvasOverlay.style.position = "absolute";
    canvasOverlay.className = "overlay-canvas";
    canvasOverlay.width = parseInt(mapboxCanvas.style.width);
    canvasOverlay.height = parseInt(mapboxCanvas.style.height);
    canvasContainer.appendChild(canvasOverlay);

    var context = canvasOverlay.getContext("2d");

    var radius=10
    var zb2=[116.46,39.92]
    var zb=[]
    for(var i=0;i<100;i++){

        zb.push([zb2[0]+i*0.01,zb2[1]+i*0.01])
    }

    var reqAniID;
    function drawCircle(){

        zb.map(v => {
            context.beginPath()
            p=map.project([v[0], v[1]]);
            context.arc(parseInt(p.x),parseInt(p.y),radius,0,Math.PI * 2);
            context.stroke();
        })

        let prev = context.globalCompositeOperation;   //只显示canvas上原图像的重叠部分<br>
        context.globalCompositeOperation = 'destination-in';//设置主canvas的绘制透明度，圆圈中间的浅黄色部分<br>
        context.globalAlpha = 0.95;  //这一步目的是将canvas上的图像变的透明<br>
        context.fillRect(0,0,1920,900);  //在原图像上重叠新图像<br>
        context.globalCompositeOperation = prev; //下面代用的drawcricle方法，圆圈覆盖在正方形上
        context.closePath();
        context.lineWidth=2;
        context.strokeStyle='rgba(250,0,0,1)';
        context.stroke();
        radius +=0.3;//每帧半径增加0.
        if(radius>15){
            radius=5
        }

        reqAniID= requestAnimationFrame(drawCircle)
    }
    drawCircle()

    map.on('moveend', () => {

        canvasOverlay.height = parseInt(mapboxCanvas.style.height);
       // reqAniID= requestAnimationFrame(drawCircle)

    })
    map.on('move', () => {
      // cancelAnimationFrame(reqAniID)

        canvasOverlay.height = parseInt(mapboxCanvas.style.height);


    })





</script>
</body>

。。。。。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形扩散</title>
    <style>
        body {
            overflow: hidden;
            background: #000;
        }
        body,
        html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
    var oAnim=document.getElementById('canvas');
    var context = oAnim.getContext("2d");
    var radius=10
    var zb=[[50,50],[100,100],[150,70]]
    var count=-1
    function drawCircle(){
        count+=1
        if(count<3){
        context.beginPath();
        render(radius);
        context.arc(zb[count][0],zb[count][1],radius,0,Math.PI * 2);
        context.closePath();
        context.lineWidth=2;
        context.strokeStyle='rgba(250,250,50,1)';
        context.stroke();
        radius +=0.5;//每帧半径增加0.5
        if(radius > 30){
            radius=10;
        }
        }
        else{
            count=-1
        }
        requestAnimationFrame(drawCircle)
    }
    function render(x) {
        let prev = context.globalCompositeOperation;   //只显示canvas上原图像的重叠部分<br>
        context.globalCompositeOperation = 'destination-in';//设置主canvas的绘制透明度，圆圈中间的浅黄色部分<br>
        context.globalAlpha = 0.95;  //这一步目的是将canvas上的图像变的透明<br>
        context.fillRect(0,0,40*x,40*x);  //在原图像上重叠新图像<br>
        context.globalCompositeOperation = prev; //下面代用的drawcricle方法，圆圈覆盖在正方形上
    };

    //在主canvas上画新圆
    drawCircle()


</script>
</html>

但是在地图上，以同样的绘图逻辑来处理，会出现问题，留待后面解决，另一种易理解的实现逻辑

!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形扩散</title>
    <style>
        body {
            overflow: hidden;
            background: #000;
        }
        body,
        html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;<
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
    var oAnim=document.getElementById('canvas');
    var context = oAnim.getContext("2d");
    var radius=10
    var zb=[[50,50],[100,100],[150,70]]
    var count=-1

    function drawCircle(){
        count+=1
        if(count<3){
        context.beginPath();
        context.arc(zb[count][0],zb[count][1],radius,0,Math.PI * 2);
        context.closePath();
        context.lineWidth=2;
        context.strokeStyle='rgba(250,250,50,1)';
        context.stroke();
        radius +=0.3;//每帧半径增加0.
         if(radius > 30) {
             //当圆圈扩大到最大时，恢复画布到最初的状态
             radius = 10;
             context.clearRect(0,0,300,150);
         }
        }
        else{
            count=-1
        }
        requestAnimationFrame(drawCircle)
    }


    //在主canvas上画新圆
    drawCircle()


</script>
</html>

A873054267

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
mapbox/minemap 动态扩散/水纹效果

官网上的demo使用div来做的，但当数据量变大后，地图移动会特别卡。因此需要用canvas来绘制。非地图模式下，此段代码可以直接运行，最终版本：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>添加圆形扩散效果标注...
复制链接

扫一扫