Ol4中晕圈点效果的实现

作者: 牛老师讲GIS | 来源:发表于2017-11-11 11:20 被阅读153次

Ol4中晕圈点效果的实现
用geotools自己写WMS服务
OL4结合turf.js实现等值线
彩铅___小桥·流水·人家
微信小程序页面向上滚动隐藏顶部菜单
地图模态层的实现
这个点儿醒来
CSS中特殊效果的实现方案
朋友圈点赞效果👍
OL4中styleFunction的妙用

概述

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

思路

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

效果

LZUGIS

代码

<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>

技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
博客园：http://www.cnblogs.com/lzugis/
在线教程
http://edu.csdn.Net/course/detail/799
Github
https://github.com/lzugis/
联系方式