基于flash-marker.js的 openlayers 闪烁点的实现方式

最新推荐文章于 2024-08-17 19:10:08 发布
最新推荐文章于 2024-08-17 19:10:08 发布
阅读量867 收藏 2
点赞数
分类专栏： openlayers 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38000851/article/details/107675699
版权

在应急管理系统中，经常会有需求，需要在地图上对隐患点或者预警点做闪烁效果。无奈技术渣，只会搬砖，这次就决定搬用flash-marker.js做闪烁点的效果。

参考文章
https://www.cnblogs.com/webgis-mc/p/10455731.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/ol.css"/>
    <script src="js/ol.js"></script>
    <script src="js/flash-marker.js"></script>
</head>
<body>
<div id="map"></div>
</body>

<script>
    var projection = ol.proj.get('EPSG:4326');
    var projectionExtent = projection.getExtent();
    var size = ol.extent.getWidth(projectionExtent) / 256;
    var resolutions = new Array(19);
    var matrixIds = new Array(19);
    for (var z = 1; z < 19; ++z) {
        resolutions[z] = size / Math.pow(2, z);
        matrixIds[z] = z;
    }

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.WMTS({
                    name: "天地图影像地图",
                    url: "http://t{0-7}.tianditu.gov.cn/img_c/wmts?tk=38714c443b01bbf3f85d0c036e7c6411",
                    layer: "img",
                    style: "default",
                    matrixSet: "c",
                    format: "tiles",
                    wrapX: true,
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: ol.extent.getTopLeft(projectionExtent),
                        resolutions: resolutions,
                        matrixIds: matrixIds
                    })
                }),
                maxResolution: resolutions[0],
                minResolution: resolutions[18]
            })
        ],
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [113.53450137499999, 34.44104525],
            zoom: 5
        })
    });



    //数据
    let lnglat=[113.53450137499999, 34.44104525];//坐标值[x,y]
    let citys = [{
        name: '',
        lnglat: lnglat,
        color: '#5070FF',
        type: 'circle',
        speed: 0.5,
    }];
    var flashMarker = new window.FlashMarker(map, citys);

</script>
</html>

按上图所示即可完成闪烁点的展示。但是实际使用，并不是这样子简单。

问题一：闪烁点无法点击

首先，这个闪烁点无法点击，这就意味着，不能有查看详情的操作，这里，我的解决方法是在图层上叠加一个固定的点，该点的中心就是闪烁点的中心，颜色与闪烁点颜色相同。

问题二：频繁的调用close和new FlashMatker 导致一大堆的canvas元素被添加到网页上，造成网页卡顿，甚至崩溃。

解决办法是创建一个变量canvasList={}，用来存储通过FlashMarker创建的canvas对象。
修改创建canvas元素的代码

canvas = this.canvas = document.createElement('canvas');
//修改为
if(!!canvasList[this.canvasId]){
            canvas = this.canvas = canvasList[this.canvasId];
        }else{
            canvas = this.canvas = document.createElement('canvas');
            canvas.id = this.canvasId;
            canvasList[this.canvasId]=canvas;
        }

问题三 没有提供移除闪烁点和新增单个闪烁点的方法，导致每次有新的闪烁点需要加载时，都要close 然后重新new FlashMarker

解决办法是，新增addFlashMarker以及removeFlashMarker的方法
代码如下：

FlashMarker.prototype.addFlashMarker = function(opt){//添加新的闪烁点
        flashMarkerId++;
        opt['id']=flashMarkerId;
        var marker = new Marker(opt);
        opt["marker"] = marker;
        this.dataSet.push(opt);
        this.markers.push(marker);
        return flashMarkerId;
    }

    FlashMarker.prototype.removeFlashMarker = function(opt){
        var index = -1;
        $.each(this.dataSet,function(i,data){
            if(data["id"] == opt.id){
                index = i;
                return false;
            }
        })
        this.dataSet.splice(index,1);
        this.markers.splice(index,1);
    }

最终改造完成的js代码如下

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define(factory) :
            (global.FlashMarker = factory());
}(this, (function () { 'use strict';
    var map = null;
    var canvas = null;
    var canvasList = {};
    var flashMarkerId = 0;
    /**
     * @author lzugis
     * @Date 2017-09-29
     * */
    function CanvasLayer(options) {
        this.options = options || {};
        this.paneName = this.options.paneName || 'labelPane';
        this.zIndex = this.options.zIndex || 0;
        this._map = options.map;
        this.canvasId = options.canvasId;
        map = this._map;
        this._lastDrawTime = null;
        this.show();
    }

    CanvasLayer.prototype.initialize = function () {
        var map = this._map;
        if(!!canvasList[this.canvasId]){
            canvas = this.canvas = canvasList[this.canvasId];
        }else{
            canvas = this.canvas = document.createElement('canvas');
            canvas.id = this.canvasId;
            canvasList[this.canvasId]=canvas;
        }
        var ctx = this.ctx = this.canvas.getContext('2d');
        canvas.style.cssText = 'position:absolute;' + 'left:0;' + 'top:0;' + 'z-index:' + this.zIndex + ';';
        this.adjustSize();
        this.adjustRatio(ctx);
        map.getViewport().appendChild(canvas);
        var that = this;
        map.getView().on('propertychange',function(){
            // $(canvas).hide();
            // canvas.style.display="none";
        });
        // map.on("moveend",function(){
        //   // $(canvas).show();
        //   // canvas.style.display="block";
        //   that.adjustSize();
        //   that._draw();
        // });
    };

    CanvasLayer.prototype.adjustSize = function () {
        var size = this._map.getSize();
        // var canvas = this.canvas;
        canvas.width = size[0];
        canvas.height = size[1];
        canvas.style.width = canvas.width + 'px';
        canvas.style.height = canvas.height + 'px';
    };

    CanvasLayer.prototype.adjustRatio = function (ctx) {
        var backingStore = ctx.backingStorePixelRatio || ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
        var pixelRatio = (window.devicePixelRatio || 1) / backingStore;
        var canvasWidth = ctx.canvas.width;
        var canvasHeight = ctx.canvas.height;
        ctx.canvas.width = canvasWidth * pixelRatio;
        ctx.canvas.height = canvasHeight * pixelRatio;
        ctx.canvas.style.width = canvasWidth + 'px';
        ctx.canvas.style.height = canvasHeight + 'px';
        ctx.scale(pixelRatio, pixelRatio);
    };

    CanvasLayer.prototype.draw = function () {
        var self = this;
        var args = arguments;

        clearTimeout(self.timeoutID);
        self.timeoutID = setTimeout(function () {
            self._draw();
        }, 15);
    };

    CanvasLayer.prototype._draw = function () {
        var map = this._map;
        var size = map.getSize();
        var center = map.getView().getCenter();
        if (center) {
            var pixel = map.getPixelFromCoordinate(center);
            this.canvas.style.left = pixel[0] - size[0] / 2 + 'px';
            this.canvas.style.top = pixel[1] - size[1] / 2 + 'px';
            this.options.update && this.options.update.call(this);
        }
    };

    CanvasLayer.prototype.getContainer = function () {
        return this.canvas;
    };

    CanvasLayer.prototype.show = function () {
        this.initialize();
        this.canvas.style.display = 'block';
    };

    CanvasLayer.prototype.hide = function () {
        this.canvas.style.display = 'none';
    };

    CanvasLayer.prototype.setZIndex = function (zIndex) {
        this.canvas.style.zIndex = zIndex;
    };

    CanvasLayer.prototype.getZIndex = function () {
        return this.zIndex;
    };

    var global = typeof window === 'undefined' ? {} : window;

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

    function Marker(opts) {
        this.city = opts.name;
        this.location = [opts.lnglat[0], opts.lnglat[1]];
        this.color = opts.color;
        this.type = opts.type || 'circle';
        this.speed = opts.speed || 0.15;
        this.size = 0;
        this.max = opts.max || 20;
    }

    Marker.prototype.draw = function (context) {
        context.save();
        context.beginPath();
        switch (this.type) {
            case 'circle':
                this._drawCircle(context);
                break;
            case 'ellipse':
                this._drawEllipse(context);
                break;
            default:
                break;
        }
        context.closePath();
        context.restore();

        this.size += this.speed;
        if (this.size > this.max) {
            this.size = 0;
        }
    };

    Marker.prototype._drawCircle = function (context) {
        var pixel = this.pixel||map.getPixelFromCoordinate(this.location);
        context.strokeStyle = this.color;
        context.moveTo(pixel[0] + pixel.size, pixel[1]);
        context.arc(pixel[0], pixel[1], this.size, 0, Math.PI * 2);
        context.stroke();
    };

    Marker.prototype._drawEllipse = function (context) {
        var pixel = this.pixel || map.getPixelFromCoordinate(this.location);
        var x = pixel[0],
            y = pixel[1],
            w = this.size,
            h = this.size / 2,
            kappa = 0.5522848,

            // control point offset horizontal
            ox = w / 2 * kappa,

            // control point offset vertical
            oy = h / 2 * kappa,

            // x-start
            xs = x - w / 2,

            // y-start
            ys = y - h / 2,

            // x-end
            xe = x + w / 2,

            // y-end
            ye = y + h / 2;

        context.strokeStyle = this.color;
        context.moveTo(xs, y);
        context.bezierCurveTo(xs, y - oy, x - ox, ys, x, ys);
        context.bezierCurveTo(x + ox, ys, xe, y - oy, xe, y);
        context.bezierCurveTo(xe, y + oy, x + ox, ye, x, ye);
        context.bezierCurveTo(x - ox, ye, xs, y + oy, xs, y);
        context.stroke();
    };

    function FlashMarker(map, dataSet,canvasId) {
        this.timer = null;
        var that = this;
        var animationLayer = null,
            width = map.getSize()[0],
            height = map.getSize()[1],
            animationFlag = true;
        that.width = width;
        this.dataSet = dataSet;
        this.markers = [];
        that.height = height;
        that.canvasId = (!!canvasId?canvasId:'defaultFlashCanvas');
        this.close();

        var addMarker = function addMarker() {
            if (that.markers.length > 0) return;
            that.markers = [];
            for (var i = 0; i < that.dataSet.length; i++) {
                flashMarkerId++;
                that.dataSet[i]["id"]=flashMarkerId;
                that.markers.push(new Marker(that.dataSet[i]));
            }
        };

        //上层canvas渲染，动画效果
        var render = function render() {
            var animationCtx = animationLayer.canvas.getContext('2d');
            that.animationCtx = animationCtx;
            if (!animationCtx) {
                return;
            }

            if (!animationFlag) {
                animationCtx.clearRect(0, 0, width, height);
                return;
            }

            addMarker();

            animationCtx.fillStyle = 'rgba(0,0,0,.95)';
            var prev = animationCtx.globalCompositeOperation;
            animationCtx.globalCompositeOperation = 'destination-in';
            animationCtx.fillRect(0, 0, width, height);
            animationCtx.globalCompositeOperation = prev;

            for (var i = 0; i < that.markers.length; i++) {
                var marker = that.markers[i];
                marker.draw(animationCtx);
            }
        };
        //初始化
        var init = function init() {
            animationLayer = new CanvasLayer({
                map: map,
                canvasId:that.canvasId,
                update: render
            });

            (function drawFrame() {
                that.timer = requestAnimationFrame(drawFrame);
                render();
            })();
        };

        init();
    }

    FlashMarker.prototype.addFlashMarker = function(opt){//添加新的闪烁点
        flashMarkerId++;
        console.log(opt);
        console.log(flashMarkerId);
        opt['id']=flashMarkerId;
        var marker = new Marker(opt);
        opt["marker"] = marker;
        this.dataSet.push(opt);
        this.markers.push(marker);
        return flashMarkerId;
    }

    FlashMarker.prototype.removeFlashMarker = function(opt){
        var index = -1;
        for(var i = 0;i<this.dataSet.length;i++){
            if(this.dataSet[i]["id"] == opt.id){
                index = i;
                break;
            }
        }
        this.dataSet.splice(index,1);
        this.markers.splice(index,1);
    }

    FlashMarker.prototype.close = function() {
        cancelAnimationFrame(this.timer);
        if(this.animationCtx){
            this.animationCtx.clearRect(0, 0, this.width, this.height);
        }
    }
    return FlashMarker;

})));

愉快的玩耍了。

搬砖的人生
关注
专栏目录
openlayers3线段添加闪烁_openlayers4中闪烁点的实现
weixin_39612540的博客
12-23 239
概述：本文讲述如何在Openlayers4中实现闪烁点。效果：代码：1、flash-marker.js闪烁点扩展(function (global, factory) {typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :typeof define ==...
Openlayers实现点闪烁扩散效果
10-14
主要为大家详细介绍了Openlayers实现点闪烁扩散效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers3添加闪烁点
12-20
使用openlayers3实现动态点闪烁功能，结合canvas技术，加载到点到地图上
openlayers点闪烁
最新发布
m0_69112199的博客
08-17 323
2.闪烁点坐标和闪烁速度。欢迎补充，一起进步。
Openlayers2实现的地图闪烁
此爱如少年
11-17 1423
地图闪烁动画 原理：利用window.setInterval()方法，间歇性的打开地图和隐藏地图，完成闪烁动画。 示例：在一幅地图上中国地图上，实现青海省范围的闪烁动画。 js代码如下： var map = new OpenLayers.Map("map"); //闪烁的图层 var wfsLayer; //闪烁开关 var visble = false; function initMap(...
openlayers面层实时动态闪烁
12-07
openlayers 加载面要素对象，map渲染，动态闪烁效果，望有帮助
openlayers6添加点并实现点位闪烁
weixin_42293937的博客
04-24 836
openlayers添加点后实现闪烁效果。
vue-plotly.js:来自Plotly的一个plotly.js Vue组件
05-11
vue-plotly.js Vue组件。 受到启发并基于 安装 $ npm install vue-plotly.js plotly.js 快速开始 使用此组件的最简单方法是导入数据并将其传递到绘图组件。 要导入组件， import Plot from 'vue-plotly.js' ; ...
openlayers-map-marker:使用openlayers地图创建标记。 带有弹出窗口，地图多边形，地图事件的地图标记
05-24
具有Openlayers 6.3的地图标记 使用openlayers地图创建标记，使用弹出窗口创建简单的地图标记。 地图html < head > < link rel =" stylesheet " href =" ...
Leaflet.Canvas-Markers-0.2.0
04-22
在Web开发中，地图已经成为一种常见的数据可视化工具，而Leaflet作为一款轻量级的JavaScript库，因其易于使用和强大的功能深受开发者喜爱。本文将深入探讨Leaflet.Canvas-Markers-0.2.0，一个专门为Leaflet设计的...
Openlayers的如下版本v6.5.0-dist.rar
03-03
OpenLayers 是一个开源的JavaScript库，专为在Web上创建交互式地图应用而设计。它允许开发者使用各种数据源和地图服务，包括WMS、WMTS、TileJSON等，来展示地图并处理用户交互。OpenLayers 版本v6.5.0-dist是一个...
videojs-markers.js 增加进度条指定时间预览图
01-18
video.js 进度条指定时间预览图
openlayers 显示闪烁的图标点
PariyPeng
02-28 4621
思路：需要在html代码生成N个要闪烁的点通过遍历生成html代码 ，然后再通过坐标定位点到相应的位置 $("#map").append("<divid='css_animation"+i+"'><spanclass='pulse-icon1'style='background-color:#d0639c;z-index:9999999'>&lt...
地图绘点，点闪烁、扩散、动画，openlayers3,geoserver 2.13.1
07-12
1，openlayers3 +geosever2.13.1,加载shp 图层组。 2，绘制点闪烁、扩散、动画
【前端小记】--OpenLayers--3.地图实现点位闪烁（由内而外扩散圆）
am_xiao_hui的博客
05-06 1346
在Openlayers地图的中，绘制一个点位闪烁动画的效果，说是闪烁，其实就是一个由内而外扩散的圆，利用Openlayers自带的postcompose事件==，只要地图进行渲染就会触发这个事件时候触发的，也就是说，如果我们改变图层的feature或其他东西，就会触发重新渲染。所以，我们在postcompose里面一直改变圆的半径，就会循环成动画的效果。
Vue+Openlayer设置闪烁点LjOlWave-基于postrender机制
08-31 1368
参考：https://xiehao.blog.csdn.net/article/details/119955823 效果图： 实现代码： <template> <div id="map" style="width: 100vw; height: 100vh" /> </template> <script> import "ol/ol.css"; import TileLayer from "ol/layer/Tile"; import Vect
前端开源库-marker-clusterer-plus.zip
10-05
Marker Clusterer Plus是基于Google Maps API的一个开源库，用于处理地图上的大量标记。它的主要作用是在视觉上将地图上的标记进行聚类，减少过度拥挤的现象，使得地图看起来更清晰，同时也可以减少用户在操作时的...
openlayers4中闪烁点的实现
LZUGIS
09-29 6160
本文讲述如何在Openlayers4中实现闪烁点。
openlayers3线段添加闪烁_在OpenLayers 3中动态地添加和删除轨道段
weixin_30802909的博客
12-23 228
I want to display a track in real-time with OpenLayers 3 which disolves at the end, just like a snails trail.Only appending new coordinates to a LineString is easy. See this example. But removing coor...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值