運(yùn)動(dòng)軌跡的demo封裝

基于上一篇文章使用OpenLayers3來展示一段運(yùn)動(dòng)軌跡的封裝拓展

樣式參數(shù)什么的都寫的亂七八糟的，只是簡(jiǎn)單的實(shí)現(xiàn)一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>openlayers繪制</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
    
    <link  rel="stylesheet" type="text/css" />
    <link rel="stylesheet"  type="text/css" media="screen" />
    <script type="text/javascript" src="https://openlayers.org/en/v4.1.0/build/ol.js"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

    <style type="text/css">
    body,html,div,ul,li,iframe,p,img{
        border:none;padding:0;margin:0;
    }
    html{
        height: 100%;
    }
    body{
        height: 100%;
        overflow: hidden;
    }
    li{list-style-type: none;}
    #map{
        width:100%;
        height:100%;
    }
    /* 隱藏縮放按鈕 */
    /*#map .ol-zoom-in, #map .ol-zoom-out {
      display: none;
    }*/
    #changeBtn1{
        position: absolute;
        bottom: 20px;
        right: 180px;
        width: 150px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #ff3366;
    }
    #changeBtn2{
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: 150px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: white;
    }
    .right-btn{
        position: absolute;
        top: 50px;
        right: 0px; 
        width: 50px;
        height: 50px;
        line-height: 50px;
        background-color: red;
        text-align: center;
        -webkit-transition:all 500ms linear;
        transition:all 500ms linear;
        z-index: 999;
    }
    .right-btn.on{
        right: 150px;
        -webkit-transition:all 500ms linear;
        transition:all 500ms linear;
    }
    .right-view{
        position: absolute;
        top: 0px;
        right: -150px;
        width: 150px;
        height: 100%;
        line-height: 100%;
        background-color: #ccc;
        -webkit-transition:all 500ms linear;
        transition:all 500ms linear;
        z-index: 999;
    }
    .right-view.on{
        right: 0px;
        -webkit-transition:all 500ms linear;
        transition:all 500ms linear;
    }
    .time-view{
        position: absolute;
        left: 3em;
        top: 0.5em;
        width: 100px;
        line-height: 1.5em;
        text-align: center;
        background-color: white;
    }
    .player{
        position: absolute;
        left: 3em;
        top: 3em;
        width: 200px;
    }
    .player li{
        line-height: 20px;
        padding: 0px 5px;
        color: white;
        background-color: #ccc;
        overflow: hidden;
    }
    .player .player-color{
        margin-top: 3px;
        width: 14px;
        height: 14px;
        float: left;
    }
    .player .green{background-color: green}
    .player .blue{background-color: blue}
    .player .red{background-color: red}
    .player .player-info{margin-left: 5px; float: left;}
    .player .player-live{float: right;}
    .grade{position: absolute; width: 210px; left: 5%; bottom: 45px;}
    .grade li {margin-top: 5px; padding: 0 5px; width: 200px; line-height: 20px; background-color: #eee; overflow: hidden;}
    .grade .checkPoint{float: left;}
    .grade .number{float: left; margin-left: 20px;}
    .grade .distance{float: right;}
    .grade .ranking{float: left; width: 15px;}
    .grade img{float: left; margin: 0px 5px; width: 20px; height: 20px;}
    .grade .name{float: left;}
    .grade .time{float: right;}
    .newGrade {position: absolute; width: 90% !important; max-width: 400px; line-height: 20px; left: 5%; bottom: 20px; background-color: #eee; padding: 0 5px;}
    .newGrade img {float: left; margin: 0px 5px 0px 20px; width: 20px; height: 20px;}
    .newGrade .name{float: left;}
    .newGrade .time {float: right; margin-right: 30px;}
    .newGrade .slow-time{background-color: black; width: 100px; line-height: 20px; text-align: center; color: white; position: absolute; right: 0px; bottom: 25px;}
    </style>

</head>
<body>
    <div id="map" class="map"></div>
    <div id="changeBtn1" class="changeBtn2" onclick="changeMap1()">谷歌衛(wèi)星圖（默認(rèn)）</div>
    <div id="changeBtn2" class="changeBtn2" onclick="changeMap2()">谷歌地形圖</div>
    <div class="right-btn" onclick="showHideRightView()">點(diǎn)擊</div>
    <div class="right-view">這是一個(gè)側(cè)邊欄</div>
    <div class="time-view">00:09:35</div>
    <div class="player">
        <li><div class="player-color green"></div><div class="player-info">XXXXXX 張三</div><div class="player-live">LIVE</div></li>
        <li><div class="player-color blue"></div><div class="player-info">XXXXXX 張三</div><div class="player-live">LIVE</div></li>
        <li><div class="player-color red"></div><div class="player-info">XXXXXX 張三</div><div class="player-live">LIVE</div></li>
    </div>
    <div class="grade">
        <li><div class="checkPoint">檢查點(diǎn)</div><div class="number">49</div><div class="distance">3.7KM</div></li>
        <li><div class="ranking">1.</div><img src="" /><div class="name">張三</div><div class="time">10:45</div></li>
        <li><div class="ranking">2.</div><img src="" /><div class="name">李四</div><div class="time">10:45</div></li>
        <li><div class="ranking">3.</div><img src="" /><div class="name">王五</div><div class="time">10:45</div></li>
    </div>
    <div class="newGrade">
        <img src="" />
        <div class="name">王五</div>
        <div class="time">10:45</div>
        <div class="slow-time">-2:09</div>
    </div>
    <script type="text/javascript">

        //使用瓦片
        // 初始給的中心點(diǎn)坐標(biāo)。
        var centerX = 10711315.612909358;
        var centerY = 1900873.5099405567;
        var extent = [centerX, centerY, centerX, centerY];

        var layer1 = new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url:'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G' //谷歌瓦片
                }), 
            }); // 谷歌衛(wèi)星地圖（混合）
        var layer2 = new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url:'http://mt3.google.cn/vt/lyrs=t@131,r@216000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Gal'//谷歌地形地圖  
                }), 
            }); // 谷歌地形地圖
        var layerImage = new ol.layer.Image({
                source: new ol.source.ImageStatic({
                    url: 'images/mapTest.jpg',//這里添加靜態(tài)圖片的地址
                    // url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512636538327&di=1198aa77a3df42bd8046d0353502904c&imgtype=0&src=http%3A%2F%2Foss.p.t262.com%2Fcpic%2Fbc%2F2e%2Fdec7377951965a2d1dca25d006522ebc.jpg',
                    imageExtent: [centerX-500, centerY-500, centerX+500, centerY+500],// 地圖坐標(biāo)中的圖像的范圍。這是圖像的[左，右，右，上]地圖坐標(biāo)
                }), 
            }); // 自定義的地圖圖片

        //實(shí)例一個(gè)map
        var map = new ol.Map({
            layers: [
                // 請(qǐng)注意，圖層按照提供的順序進(jìn)行渲染，因此，如果要使矢量圖層顯示在拼貼圖層的頂部，則必須放在拼貼圖層之后。
                layer2,
                layer1,
                // layerImage, 
            ],
            target: 'map',
            view: new ol.View({
                center: [centerX, centerY], //3857坐標(biāo)系
                zoom: 17,//當(dāng)前的放大度數(shù)
                minZoom:5,//最小放大度數(shù)
                maxZoom:19,//最大放大度數(shù)
                // extent: extent, // Jon: 限制中心的程度，換句話說，中心不能超出這個(gè)范圍, 前后值一樣(minx=maxx, miny=maxy)的話就無法移動(dòng)。
                // Jon: 設(shè)置minZoom 和 maxZoom 一樣大，就無法縮放。
            }),
            logo: false, // 禁用地圖標(biāo)志
        });

        //實(shí)例一個(gè)數(shù)據(jù)源獲取feature
        //實(shí)例化一個(gè)矢量圖層Vector作為繪制層
        var source = new ol.source.Vector();

        // 需要傳入的軌跡數(shù)據(jù)
        var arr = [
            [10711293.51783087, 1900921.581665377],
            [10711332.930673579, 1900920.9845010934],
            [10711337.707987847, 1900825.4382157368],
            [10711293.51783087, 1900826.0353800203],
        ];
        var arr1 = [
            [10711293.51783087, 1900721.581665377],
            [10711332.930673579, 1900720.9845010934],
            [10711337.707987847, 1900625.4382157368],
            [10711293.51783087, 1900626.0353800203],
        ];
        // 管理線的數(shù)據(jù)
        var lineDic = {};
        // 管理點(diǎn)的數(shù)據(jù)
        var pointDic = {};
        // 管理線的源
        var featureLineDic = {};
        // 管理點(diǎn)的源
        var featurePointDic = {};
        // 封裝一個(gè)方法，來創(chuàng)建全局變量的內(nèi)容
        // arr: 傳入的數(shù)組數(shù)據(jù), key: 管理所用的key
        function createNewGeom(arr, key) {
            //實(shí)例一個(gè)線(標(biāo)記點(diǎn)), Point 點(diǎn), LineString 線, Polygon 多邊形
            var geomLine = new ol.geom.LineString();
            var geomPoint = new ol.geom.Point([arr[3][0], arr[3][1]]);
            //添加標(biāo)記點(diǎn)
            for (var i = 0; i < arr.length; i++) {
                geomLine.appendCoordinate(arr[i]);
            }
            // 加入管理數(shù)組中，方便外部調(diào)用
            lineDic[key] = geomLine; 
            pointDic[key] = geomPoint;

            var LineStringFeature = new ol.Feature(geomLine); //繪制線的數(shù)據(jù)
            var pointFeature = new ol.Feature(geomPoint); //繪制點(diǎn)的數(shù)據(jù)
            featureLineDic[key] = LineStringFeature;
            featurePointDic[key] = pointFeature;

            //將線添加到Vector繪制層上
            source.addFeature(LineStringFeature);
            source.addFeature(pointFeature);
        }

        //將線添加到Vector繪制層上
        var vectorLayer = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#f00',
                    width: 4
                }),
                image: new ol.style.Icon({
                    src: 'images/map.png',
                    anchor: [0.5, 35], //相對(duì)位置
                    anchorYUnits: 'pixels',
                }),
            })
        });
        map.addLayer(vectorLayer); //將繪制層添加到地圖容器中

        // 開啟某條線的運(yùn)動(dòng)軌跡
        // arr: 運(yùn)動(dòng)的軌跡數(shù)據(jù), key: 需要開啟運(yùn)行的線
        function startMove(arr, key) {
            // 點(diǎn)和線都要開始運(yùn)動(dòng)
            var geomLine = lineDic[key];
            var geomPoint = pointDic[key];
            // 頻率
            var key = setInterval(function(){
                // 暫時(shí)，可刪除。
                var length = arr.length-1;
                var lngX = arr[length][0];
                var lngY = arr[length][1];
                lngX = lngX - Math.random() * 30;  
                lngY = lngY + Math.random() * 30;
                var newPoint = [lngX, lngY];
                arr.shift();
                arr.push(newPoint);
                // 更新點(diǎn)和線的位置
                geomLine.setCoordinates(arr);
                geomPoint.setCoordinates(newPoint);
            }, 300);

            setTimeout(function(){
                clearInterval(key);
            }, 3000);
        }

        // 移除某條軌跡
        // key: 需要關(guān)閉的線
        function removeGeom(key){
            // setTimeout(function(){
                console.log("移除某一條軌跡");
                if(featureLineDic[key]){
                    var LineStringFeature = featureLineDic[key];
                    source.removeFeature(LineStringFeature);
                } 
                if(featurePointDic[key]){
                    var pointFeature = featurePointDic[key];
                    source.removeFeature(pointFeature);
                }
                delete featureLineDic[key];
                delete featurePointDic[key];
            // }, 5000);
        }

        // webSocket部分
        var websocket;
        var host = "ws://echo.websocket.org/";//聲明host注意：是ws協(xié)議
        //判斷當(dāng)前瀏覽器是否支持WebSocket  
        if('WebSocket' in window){  
            websocket = new WebSocket(host); 
        }  
        else{  
            alert('當(dāng)前瀏覽器不支持WebSocket'); 
        } 

        websocket.onopen = function (evt) { onOpen(evt) }; 
        websocket.onclose = function (evt) { onClose(evt) }; 
        websocket.onmessage = function (evt) { onMessage(evt) }; 
        websocket.onerror = function (evt) { onError(evt) }; 
        function onOpen(evt) { 
            console.log("Connected to WebSocket server."); 
        } 
        function onClose(evt) { 
            console.log("Disconnected"); 
        } 
        function onMessage(evt) { 
            console.log('Retrieved data from server: ' + evt.data); 
        } 
        function onError(evt) { 
            console.log('Error occured: ' + evt.data); 
        }

        //監(jiān)聽窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時(shí)，主動(dòng)去關(guān)閉websocket連接，防止連接還沒斷開就關(guān)閉窗口，server端會(huì)拋異常。  
        window.onbeforeunload = function(){  
            onClose(evt);  
        } 

        // 底層地圖層的切換
        function changeMap1() {
            layer1.setVisible(true);
            layer2.setVisible(false);
        }
        function changeMap2() {
            layer1.setVisible(false);
            layer2.setVisible(true);
        }

        // 側(cè)邊欄的隱藏/顯示
        function showHideRightView() {
            $(".right-btn").toggleClass('on');
            $(".right-view").toggleClass('on');
            removeGeom("one");
        }

        // 創(chuàng)建運(yùn)動(dòng)軌跡
        createNewGeom(arr, "one");
        createNewGeom(arr1, "two");
        // 開啟運(yùn)動(dòng)軌跡
        startMove(arr, "one");
        startMove(arr1, "two");
        // 停止運(yùn)動(dòng)軌跡
        // removeGeom("one");


    </script>
</body>
</html>

現(xiàn)在需要對(duì)地圖進(jìn)行封裝修改了一遍代碼， 以下是修改的地方。

var mapDic = {};// 管理地圖
var lineDic = {};// 管理線的數(shù)據(jù)
var pointDic = {};// 管理點(diǎn)的數(shù)據(jù)
var featureLineDic = {};// 管理線的源: Feature
var featurePointDic = {};// 管理點(diǎn)的源: Feature
// 創(chuàng)建地圖控件
// 此處的id, 就是對(duì)應(yīng)div的id
// obj: id, layer, centerX, centerY, zoom, layer, minZoom, maxZoom, extent
function creatMap(obj) {
    var map = new ol.Map({
        layers: [
            obj.layer,
        ],
        target: obj.id,
        view: new ol.View({
            center: [obj.centerX, obj.centerY], //3857坐標(biāo)系
            zoom: obj.zoom,//當(dāng)前的放大度數(shù)
            minZoom: obj.minZoom,//最小放大度數(shù)
            maxZoom: obj.maxZoom,//最大放大度數(shù)
            // extent: obj.extent, // Jon: 限制中心的程度，換句話說，中心不能超出這個(gè)范圍, 前后值一樣(minx=maxx, miny=maxy)的話就無法移動(dòng)。
        }),
        logo: false, // 禁用地圖標(biāo)志
    });
    mapDic[obj.id] = map;
}

// 封裝一個(gè)方法，來創(chuàng)建全局變量的內(nèi)容
// arr: 傳入的數(shù)組數(shù)據(jù), key: 管理所用的key
function createNewGeom(arr, key, id) {
    //實(shí)例一個(gè)數(shù)據(jù)源獲取feature
    //實(shí)例化一個(gè)矢量圖層Vector作為繪制層
    var source = new ol.source.Vector();// 這個(gè)東西本來是在外邊放的，現(xiàn)在放在里邊，不知道會(huì)有什么需要優(yōu)化的地方
    //實(shí)例一個(gè)線(標(biāo)記點(diǎn)), Point 點(diǎn), LineString 線, Polygon 多邊形
    var geomLine = new ol.geom.LineString();
    var geomPoint = new ol.geom.Point([arr[3][0], arr[3][1]]);
    //添加標(biāo)記點(diǎn)
    for (var i = 0; i < arr.length; i++) {
        geomLine.appendCoordinate(arr[i]);
    }
    // 加入管理數(shù)組中，方便外部調(diào)用
    lineDic[key] = geomLine; 
    pointDic[key] = geomPoint;

    var LineStringFeature = new ol.Feature(geomLine); //繪制線的數(shù)據(jù)
    var pointFeature = new ol.Feature(geomPoint); //繪制點(diǎn)的數(shù)據(jù)
    featureLineDic[key] = LineStringFeature;
    featurePointDic[key] = pointFeature;

    //將線添加到Vector繪制層上
    source.addFeature(LineStringFeature);
    source.addFeature(pointFeature);

    //將線添加到Vector繪制層上
    var vectorLayer = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#f00',
                width: 4
            }),
            image: new ol.style.Icon({
                src: 'images/map.png',
                anchor: [0.5, 35], //相對(duì)位置
                anchorYUnits: 'pixels',
            }),
        })
    });
    console.log("mapDic = ", mapDic);
    mapDic[id].addLayer(vectorLayer); //將繪制層添加到地圖容器中
}

var obj = {
    id: "map", 
    layer: layer1, 
    centerX: 10711315.612909358, 
    centerY: 1900873.5099405567, 
    zoom: 17, 
    minZoom: 5, 
    maxZoom: 19, 
    extent: null,
}
// 創(chuàng)建地圖
creatMap(obj);
// 創(chuàng)建運(yùn)動(dòng)軌跡
createNewGeom(arr, "one", "map");
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容