vue openlayers【九】基於LineString和Point實現流動軌跡的效果展示

1. 流動軌跡效果圖

參考官方文檔：https://openlayers.org/en/latest/examples/feature-move-animation.html

2. 實現軌跡的方法（查看 addTrack 方法 ）

addTrack方法
說明：其實是N個經緯度座標點，通過 ol.geom.LineString 方法實現軌跡
① 準備經緯度座標的數據
② 創建 LineString，實現軌跡效果
③ 創建point對象創建小車的標註信息，設置小車標註的樣式效果
④ 把創建的LineString，Point的Feature對象添加到VectorLayer圖層上面
④ 把VectorLayer 圖層添加到map地圖上

/**
 * 創建軌跡的方法
 */
addTrack() {
    let _that = this;
    // 根據經緯度點位創建線
    var routeFeature = new Feature({
        type: "route",
        geometry: new LineString(trackCar).transform(
            "EPSG:4326",
            "EPSG:3857"
        )
    });
    // 創建一個小車
    let geoMarker = new Feature({
        type: "geoMarker",
        geometry: new Point(trackCar[0]).transform(
            "EPSG:4326",
            "EPSG:3857"
        )
    });
    var styles = {
        route: new Style({
            stroke: new Stroke({
                width: 2,
                color: "#ffc641"
            })
        }),
        geoMarker: new Style({
            image: new Icon({
                src: require("../../assets/images/taxi.png"), //設置小車的圖片，這裏請使用require方式加載
                rotateWithView: false,
                rotation: -Math.atan2(
                    trackCar[1][1] - trackCar[0][1],
                    trackCar[1][0] - trackCar[0][0]
                ) //設置小車的位置偏移角度
            })
        })
    };
    // 把小車和線添加到圖層
    this.vectorLayer = new VectorLayer({
        source: new VectorSource({
            features: [routeFeature, geoMarker]
        }),
        style: function(feature) {
            if (
                _that.animating &&
                feature.get("type") === "geoMarker"
            ) {
                return null;
            }
            return styles[feature.get("type")];
        }
    });
}

3. 軌跡的經緯度座標點數據（track-car.json 文件）

[
    [120.97202539443971, 29.149083495140076],[120.97365617752077, 29.147656559944153],[120.97478270530702, 29.146594405174255],[120.97543716430665, 29.14593994617462],[120.97596287727357, 29.145285487174988],[120.9764349460602, 29.144577383995056],[120.97669243812561, 29.14408653974533],[120.97699284553528, 29.143426716327667],[120.97723960876465, 29.142654240131378],[120.97735226154329, 29.142230451107025],[120.97756683826448, 29.141243398189545],[120.97781896591188, 29.140020310878754],[120.97790479660036, 29.139483869075775],[120.97804427146912, 29.138880372047424],[120.97839832305908, 29.137893319129944],[120.97876310348511, 29.137163758277893],[120.97941756248474, 29.13626253604889],[120.9810483455658, 29.134342074394226],[120.9818959236145, 29.133376479148865],[120.98270595073701, 29.132418930530548],[120.98334968090059, 29.131678640842438],[120.98402559757234, 29.130959808826447],[120.98470687866212, 29.13033217191696],[120.985227227211, 29.12989765405655],[120.9860908985138, 29.129264652729034],[120.98707258701324, 29.12864774465561],[120.9880542755127, 29.12812203168869],[120.98936319351196, 29.127537310123444],[120.99144458770752, 29.126807749271393],[120.99297881126404, 29.126287400722504],[120.99447548389435, 29.125772416591644],[120.99569857120514, 29.125321805477142],[120.99704504013062, 29.124737083911896],[120.99830567836761, 29.12410408258438],[120.99883675575256, 29.123830497264862],[120.99963068962097, 29.1233691573143],[121.00059628486633, 29.122741520404816],[121.00166380405426, 29.122038781642914],[121.00329995155334, 29.120981991291046],[121.00475907325745, 29.120016396045685],[121.00560128688812, 29.119447767734528],[121.00612163543701, 29.11910980939865],[121.0070389509201, 29.11860018968582],[121.00769877433777, 29.118267595767975],[121.00861608982086, 29.1178759932518],[121.00979626178741, 29.117489755153656],[121.01091742515564, 29.117216169834137],[121.01166307926178, 29.117071330547336],[121.01268768310547, 29.116931855678562],[121.0139536857605, 29.116878211498264],[121.01507484912872, 29.116931855678562],[121.01689338684082, 29.117071330547336],[121.01934492588043, 29.117291271686558],[121.02029979228975, 29.117350280284885],[121.02101325988771, 29.117339551448826],[121.02191984653474, 29.117242991924286],[121.02294981479646, 29.117001593112946],[121.02402269840242, 29.116583168506622],[121.02478981018068, 29.1161647439003],[121.0260719060898, 29.115327894687653]
]

4. 完整代碼 vue

<template>
    <div id="content">
        <div id="map" ref="map"></div>
    </div>
</template>

<script>
import "ol/ol.css";
import { Map, View, Feature, ol } from "ol";
import Proj from "ol/proj/Projection";
import Units from "ol/proj/Units";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Style, Stroke, Fill, Icon } from "ol/style";
import { LineString, Point, Polygon, MultiPolygon } from "ol/geom";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";

// 引入軌跡經緯度的json文件
import trackCar from "./track-car.json";
export default {
    name: "track-car",
    data() {
        return {
            map: null,
            vectorLayer: null,
            animating: false
        };
    },
    methods: {
        /**
         * 初始化一個 openlayers 地圖
         */
        initMap() {
            let target = "map"; //跟頁面元素的 id 綁定來進行渲染
            let tileLayer = [
                new TileLayer({
                    source: new XYZ({
                        url:
                            "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
                    })
                }),
                this.vectorLayer
            ];
            var proj = new Proj({
                code: "EPSG:4326",
                units: Units.DEGREES
            });
            let view = new View({
                center: fromLonLat([120.9800615193, 29.1326618704]),
                zoom: 14
            });
            this.map = new Map({
                target: target,
                layers: tileLayer,
                view: view
            });
            // 根據點數據確認窗口視圖的位置
            this.map
                .getView()
                .fit(
                    new Polygon([trackCar]).transform("EPSG:4326", "EPSG:3857"),
                    { padding: [100, 100, 100, 100] }
                );
        },
/**
 * 創建軌跡的方法
 */
addTrack() {
    let _that = this;
    // 根據經緯度點位創建線
    var routeFeature = new Feature({
        type: "route",
        geometry: new LineString(trackCar).transform(
            "EPSG:4326",
            "EPSG:3857"
        )
    });
    // 創建一個小車
    let geoMarker = new Feature({
        type: "geoMarker",
        geometry: new Point(trackCar[0]).transform(
            "EPSG:4326",
            "EPSG:3857"
        )
    });
    var styles = {
        route: new Style({
            stroke: new Stroke({
                width: 2,
                color: "#ffc641"
            })
        }),
        geoMarker: new Style({
            image: new Icon({
                src: require("../../assets/images/taxi.png"), //設置小車的圖片，這裏請使用require方式加載
                rotateWithView: false,
                rotation: -Math.atan2(
                    trackCar[1][1] - trackCar[0][1],
                    trackCar[1][0] - trackCar[0][0]
                ) //設置小車的位置偏移角度
            })
        })
    };
    // 把小車和線添加到圖層
    this.vectorLayer = new VectorLayer({
        source: new VectorSource({
            features: [routeFeature, geoMarker]
        }),
        style: function(feature) {
            if (
                _that.animating &&
                feature.get("type") === "geoMarker"
            ) {
                return null;
            }
            return styles[feature.get("type")];
        }
    });
}
    },
    mounted() {
        this.addTrack();
        this.initMap();
    }
};
</script>
<style lang="scss" scoped>
// 此處非核心，已刪除
</style>