openlayers-12-标注动画(报警点扩散显示)_openlayers 超速报警

作者：知新_RL | 2024-05-22 08:14:33

踩

openlayers 超速报警

本章节在第9章节-添加图文标注的基础上进行了修改，标注动画，尤其是作为预警预报标记是一个不可或缺的功能，这里借助于现有的 flash-marker.js 库来实现，这个js文件是未压缩的，可以自行修改内部代码，闪烁的原理就是通过canvas绘制图形，进行循环删除重绘。

效果图如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载天地图</title>
    <link href="ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol/ol.js" type="text/javascript"></script>
    <script src="static/js/jquery-1.11.2.min.js"></script>
    <script src="static/js/flash-marker.js"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 地图容器 -->
    <div id="mapCon"></div>
    <div style="position:absolute ;top:10px;left:100px;">
        <button onclick="addFlashMark()">添加闪烁标记</button>
        <button onclick="removeFlashMark()">删除闪烁标记</button>
    </div>
    <script type="text/javascript">
        var key = "4689fc6b9bc0fdc8c48298f751ebfb41";//天地图密钥
        var center = [117.3913,37.9071];//北京经纬度
        //ol.layer.Tile：是一个瓦片图层类，用于显示瓦片资源。
        //source是必填项，用于为图层设置来源。
        var amapFlashMark = null;
        var amapMarkPoints;
        //ol.source.XYZ: 
        //创建天地图矢量图层
        var TiandiMap_vec = new ol.layer.Tile({
            title: "天地图矢量图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key,
                wrapX: false
            })
        });
        //创建天地图矢量注记图层
        var TiandiMap_cva = new ol.layer.Tile({
            title: "天地图矢量注记图层",
            source: new ol.source.XYZ({
                url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key,
            })
        });
        //1. 实例化Map对象加载地图
        var map = new ol.Map({
            //地图容器div的ID
            target: 'mapCon',
            //地图容器中加载的图层
            layers: [TiandiMap_vec, TiandiMap_cva],
            //地图视图设置
            view: new ol.View({
                //地图初始中心点（经纬度）
                center: center,
                //地图初始显示级别
                zoom: 8,
                projection: "EPSG:4326"
            })
        });
        //2.创建用于放置标注的矢量图层以及图层源
        //矢量标注的数据源
        var vectorSource = new ol.source.Vector();
        //矢量标注图层
        var vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            zIndex:1000,
        });
        map.addLayer(vectorLayer);

        //3.实例化矢量标注对象并添加到矢量图层源
        var markerFeature = new ol.Feature({
            geometry: new ol.geom.Point(center),
            name:'落点',
        });
        markerFeature.setStyle(createMarkerStyle(markerFeature));
        //将新要素添加到数据源中
        vectorSource.addFeature(markerFeature);
        //创建矢量标注样式
        function createMarkerStyle(feature) {
            return new ol.style.Style({
                /**{olx.style.IconOptions}类型*/
                image: new ol.style.Icon(
                    ({
                        // anchor: [0.5, 0.5],//图标的锚点,经纬度点所对应的图标的位置，默认是[0.5, 0.5]，即为标注图标的中心点位置
                        anchorOrigin: 'top-right',//锚点的偏移位置，默认是top-left，
                        anchorXUnits: 'fraction',//锚点X的单位，默认为百分比，也可以使用px
                        anchorYUnits: 'pixels',//锚点Y的单位，默认为百分比，也可以使用px
                        offsetOrigin: 'top-right',//原点偏移bottom-left, bottom-right, top-left, top-right,默认 top-left
                        // offset:[0,10],
                        //图标缩放比例
                        // scale:0.5,//可以设置该比例实现，图标跟随地图层级缩放
                        //透明度
                        opacity: 0.75,//如果想隐藏某个图标，可以单独设置该值，透明度为0时，即可隐藏，此为隐藏元素的方法之一。
                        //图标的url
                        src: 'static/img/hq.png'
                    })
                ),
                text: new ol.style.Text({
                    //位置
                    textAlign: 'center',
                    //基准线
                    textBaseline: 'middle',
                    //文字样式
                    font: '20px 宋体',
                    //文本内容
                    text: feature.get('name'),//通过设置的fature的name属性获取，也可以通过参数获取设置，此处接收 字符串 对象
                    //文本填充样式（即文字颜色），红色
                    fill: new ol.style.Fill({ color: '#ff002f' }),
                    //描边颜色，蓝色
                    stroke: new ol.style.Stroke({ color: '#0022ff', width: 1 })
                })
            });
        }

        
        //添加flash闪烁
        function addFlashMark() {
            if (amapFlashMark == null) {
                amapFlashMark = new window.FlashMarker(map, []);
            }
            amapMarkPoints = amapFlashMark.addFlashMarker({
                    name: '11111',//名称
                    lnglat: center,//经纬度数组
                    color: '#ff0000',//颜色
                    type: 'circle',//形状
                    speed: 0.3//动画速度（闪烁频率）
                });
        }
        //删除闪烁标记
        function removeFlashMark(){
            //removeFlashMarker的形参是一个对象，指定id的值为添加的flashMarker对象即可。
            amapFlashMark.removeFlashMarker({ id: amapMarkPoints });
        }
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

示例代码

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/607303

openlayers-12-标注动画(报警点扩散显示)_openlayers 超速 报警

openlayers-12-标注动画(报警点扩散显示)_openlayers 超速报警