专栏首页GIS讲堂Ol4中晕圈点效果的实现

Ol4中晕圈点效果的实现

概述

本文讲述如何在Openlayers4中实现晕圈的点效果。

思路

结合Openlayers4中的overlay,以图片作为晕圈背景,实现晕圈的点效果。

效果

代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>OL晕圈效果</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style type="text/css">
        body, #map {
            border: 0px;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-size: 13px;
            overflow: hidden;
        }
        .radius-overlay{
            position: absolute;
            width: 118px;
            height: 118px;
            zoom: .5;
        }
        .radius-overlay.level1{
            background: url("image/level-1.png");
        }
        .radius-overlay.level2{
            background: url("image/level-2.png");
        }
        .radius-overlay.level3{
            background: url("image/level-3.png");
        }
        .radius-overlay.level4{
            background: url("image/level-4.png");
        }
        .radius-overlay.level5{
            background: url("image/level-5.png");
        }
        .radius-overlay.level6{
            background: url("image/level-6.png");
        }
        .radius-overlay span{
            display: block;
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 110px;
            left: 44px;
            top: 44px;
            cursor: pointer;
            z-index: 3;
        }
        .radius-overlay span.level1{
            background: #00e428;
        }
        .radius-overlay span.level2{
            background: #ff0;
        }
        .radius-overlay span.level3{
            background: #ff7e00;
        }
        .radius-overlay span.level4{
            background: #f00;
        }
        .radius-overlay span.level5{
            background: #99004c;
        }
        .radius-overlay span.level6{
            background: #7e0023;
        }

        .city-name{
            position: absolute;
            z-index: 5;
            padding: 4px 10px;
            text-align: center;
            background: black;
            opacity: .6;
            box-shadow: 0px 0px 10px #cccccc;
            font-family: "黑体";
            font-weight: bold;
            border-radius: 3px;
        }
        .city-name:before{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }
        .city-name:after, .city-name:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .city-name:after {
            border-top-color: black;
            opacity: .6;
            border-width: 6px;
            left: 48%;
            margin-left: -6px;
        }
        .city-name:before {
            border-top-color: black;
            opacity: .6;
            border-width: 7px;
            left: 48%;
            margin-left: -7px;
        }
        .city-name span.level1{
            color: #00e428;

        }
        .city-name span.level2{
            color: #ff0;
        }
        .city-name span.level3{
            color: #ff7e00;
        }
        .city-name span.level4{
            color: #f00;
        }
        .city-name span.level5{
            color: #99004c;
        }
        .city-name span.level6{
            color: #7e0023;
        }
    </style>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script>
    <script type="text/javascript" src="../../../../plugin/jquery/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        var map;
        function init(){
            var midnight = getGeoheyLayer("midnight");

            map = new ol.Map({
                controls: ol.control.defaults({
                    attribution: false
                }),
                target: 'map',
                layers: [midnight],
                view: new ol.View({
                    center: ol.proj.transform([104.214, 35.847], 'EPSG:4326', 'EPSG:3857'),
                    zoom: 4
                })
            });

            setTimeout(addOverlay, 1000);
        }

        function addOverlay(){
            var data = [{"name":"乌鲁木齐","lon":87.576079,"lat":43.782225,"level":5},{"name":"拉萨","lon":91.163218,"lat":29.71056,"level":3},{"name":"西宁","lon":101.797439,"lat":36.593725,"level":5},{"name":"兰州","lon":103.584421,"lat":36.119175,"level":2},{"name":"成都","lon":104.035634,"lat":30.714315,"level":3},{"name":"重庆","lon":106.519225,"lat":29.479073,"level":3},{"name":"贵阳","lon":106.668183,"lat":26.457486,"level":2},{"name":"昆明","lon":102.726915,"lat":24.969568,"level":2},{"name":"银川","lon":106.167324,"lat":38.598593,"level":5},{"name":"西安","lon":108.967213,"lat":34.276221,"level":5},{"name":"南宁","lon":108.234036,"lat":22.748502,"level":5},{"name":"海口","lon":110.346274,"lat":19.97015,"level":4},{"name":"广州","lon":113.226755,"lat":23.183277,"level":6},{"name":"长沙","lon":112.947996,"lat":28.170082,"level":6},{"name":"南昌","lon":115.893762,"lat":28.652529,"level":4},{"name":"福州","lon":119.246798,"lat":26.070956,"level":1},{"name":"台北","lon":121.503585,"lat":25.008476,"level":4},{"name":"杭州","lon":120.183062,"lat":30.330742,"level":2},{"name":"上海","lon":121.449713,"lat":31.253514,"level":4},{"name":"武汉","lon":114.216652,"lat":30.579401,"level":4},{"name":"合肥","lon":117.262334,"lat":31.838495,"level":3},{"name":"南京","lon":118.805714,"lat":32.085164,"level":3},{"name":"郑州","lon":113.651151,"lat":34.746419,"level":5},{"name":"济南","lon":117.048354,"lat":36.608511,"level":4},{"name":"石家庄","lon":114.478253,"lat":38.033361,"level":5},{"name":"太原","lon":112.483119,"lat":37.798488,"level":5},{"name":"呼和浩特","lon":111.842856,"lat":40.895807,"level":6},{"name":"天津","lon":117.351108,"lat":38.925801,"level":5},{"name":"沈阳","lon":123.29626,"lat":41.801674,"level":2},{"name":"长春","lon":125.261357,"lat":43.982041,"level":6},{"name":"哈尔滨","lon":126.567056,"lat":45.693857,"level":3},{"name":"北京","lon":116.068297,"lat":39.892297,"level":6},{"name":"中国香港","lon":114.093184,"lat":22.428066,"level":2},{"name":"中国澳门","lon":113.552554,"lat":22.18471,"level":3}];
            data.forEach(function(_d){
                var _level = "level"+_d.level;
                var _span = $("<span/>").addClass(_level).data("attr",_d);
                var _overlayDom = $("<div/>").addClass("radius-overlay").addClass(_level).append(_span);
                var _overlay = new ol.Overlay({
                    element: _overlayDom[0],
                    stopEvent: false
                });
                map.addOverlay(_overlay);
                _overlay.setPosition(ol.proj.transform([_d.lon, _d.lat], "EPSG:4326", "EPSG:3857"));

                _span.on("mouseover", function(){
                    var _d = $(this).data("attr");
                    var _cord = ol.proj.transform([_d.lon, _d.lat], "EPSG:4326", "EPSG:3857"),
                        _srcn = map.getPixelFromCoordinate(_cord);
                    var _name = _d.name, _level = _d.level;
                    var _levelC = "level"+_d.level;
                    var _span = $("<span/>").addClass(_levelC).html(_name + "(" +_level + ")");
                    var _nameDom = $("<div/>").addClass("city-name").append(_span).css({
                            "left" : (_srcn[0]-_name.length*2.5)+"px",
                            "top" : (_srcn[1]-15)+"px"
                        });
                    map.getTargetElement().appendChild(_nameDom[0]);

                });
                _span.on("mouseout", function(){
                    $(".city-name").remove();
                })
            });
        }

        function GetRandomNum(Min,Max){
            var Range = Max - Min;
            var Rand = Math.random();
            return(Min + Math.round(Rand * Range));
        }

        function getGeoheyLayer(lyr){
            var url = "https://s4.geohey.com/s/mapping/"+lyr
                +"/all?z={z}&x={x}&y={y}&retina=&ak=MGUxMmI2ZTk4YTVhNDEzYmJhZDJkNDM3ZWI5ZDAwOGE";
            var layer = new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url:url
                })
            });
            return layer;
        }
    </script>
</head>
<body onLoad="init()">
<div id="map">
</div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • web中的树形结构【小结】

    最近在做一个项目,是一个b/s架构的,在项目中,用到了树形结构,即如图1所示的结构。

    lzugis
  • Echart在Openlayers的应用-航班的炫光特效

    在前两篇文章中讲到了echart在openlayers2中的应用,地图统计图与热力图的实现,在本文中介绍openlayers中结合echart实现航班的炫光特效...

    lzugis
  • 简单树组织数据格式化为标准树组织数据

    在工作中,很多时候会遇到树组织,但是从数据库里面查询出来的结果是一个简单的树组织,这就需要将简单的树组织转换为标准的树组织,以便使用,本文分享一个简单的func...

    lzugis
  • 实现一个自己的日志处理库并发布到npm

    到这里一个简单的包就创建好了。 如果想再完善一下的话,还可以在包根目录下创建README.md文件,里面可以写一些关于包的介绍信息,最后发布后会展示在NPM官...

    w候人兮猗
  • Lua游戏开发之时区问题

    目前大部分游戏都采用了Lua语言进行功能开发,在进行多语种发行的时候就会遇到时区显示的问题。以韩国版本为例,场景如下:

    meteoric
  • 使用Keras进行时间序列预测回归问题的LSTM实现

    数据 数据来自互联网,这些数据用于预测航空公司的人数,我们使用LSTM网络来解决这个问题 关于此处模型构建,只对keras部分代码做重点的介绍

    学到老
  • pytorch中model=model.to(device)用法

    其中,device=torch.device("cpu")代表的使用cpu,而device=torch.device("cuda")则代表的使用GPU。

    于小勇
  • ASP.NET Core 2.0下使用log4net记录文件日志

    我们知道log4net的日志功能非常强大,而使用方法也比较复杂;在ASP.NET Core 2.0下,可以通过一个第三方的扩展方法来降低我们的使用难度,具体使用...

    徐大嘴
  • Redis介绍使用及进阶

    1、 高性能-- Redis能读的速度是110000次/s,写的速度是81000次/s 、c语言实现距离系统更近、数据存储在内存中、采用了epoll,非阻塞I/...

    小世界的野孩子
  • Flask-12 自定义错误页面

    在Flask_Blog\flaskblog下新建文件夹errors,并在Flask_Blog\flaskblog\errors下新建一个空的__init__.p...

    亚乐记

扫码关注云+社区

领取腾讯云代金券