demo源碼運行環境以及配置

• 運行環境：依賴Node安裝環境，demo本地Node版本:推薦v16+。
• 運行工具：vscode或者其他工具。
• 配置方式：下載demo源碼，vscode打開，然後順序執行以下命令：
• （1）下載demo環境依賴包命令：npm i
• （2）啓動demo命令：npm run dev
• （3）打包demo命令： npm run build

技術棧

• 前端框架 ：Vue 3.5.13
• 地圖庫 ：OpenLayers 10.4.0
• 構建工具 ：Vite 6.2.0

示例效果

大概實現思路如下：
1.創建矢量圖層；
2.設置矢量圖層樣式，以樣式組形式；
3.矢量圖層樣式組底層保持不變，改變矢量圖層的要素feature屬性值，動態更新頂層樣式的線間隔lineDashOffset屬性值，達到線水流動效果。
關鍵點：矢量圖層的樣式style內部更新渲染機制，在圖層可見範圍，地圖縮放會自動觸發；矢量圖層的要素設置屬性值變化的話，也會觸發。

核心源碼

<template>
    <div id="map" class="map"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
// import XYZ from 'ol/source/XYZ';
import { OSM, TileArcGISRest, Vector as VectorSource } from 'ol/source';
import 'ol/ol.css';
import VectorLayer from 'ol/layer/Vector';
// import VectorSource from 'ol/source/Vector';
import { Style, Fill, Stroke, Text } from 'ol/style';
import GeoJSON from 'ol/format/GeoJSON';

onMounted(async () => {

    const geojsonObject = {
        'type': 'FeatureCollection',
        'crs': {
            'type': 'name',
            'properties': {
                'name': 'EPSG:3857',
            },
        },
        'features': [
            {
                'type': 'Feature',
                'geometry': {
                    'type': 'LineString',
                    'coordinates': [
                        [-5e6, -5e6],
                        [0, -5e6],
                    ],
                },
            },
        ],
    };
    const vectorSource = new VectorSource({
        features: new GeoJSON().readFeatures(geojsonObject),
    });
    const vectorlayer = new VectorLayer({
        source: vectorSource,
        style: function (feature) {
            //控制顯隱
            let style = null;
            style = getStyle(feature, true);
            return style;
        }
    });

    const map = new Map({
        layers: [
            // new TileLayer({
            //   source: new OSM(),
            // }),
            new TileLayer({
                source: new TileArcGISRest({
                    url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
                }),
            }),
            vectorlayer,
        ],
        target: 'map',
        view: new View({
            center: [0, 0],
            zoom: 2,
        }),
    });

    function getStyle(feature, isFlow) {
        let style;
        const geomtype = feature.getGeometry().getType();

        if (geomtype == "LineString") {
            style = getLineStyle(feature, isFlow);
        }
        return style;
    }
    ……
});
</script>

<style scoped>
.map {
    width: 100%;
    height: 100%;
}
</style>

源碼下載

GIS之家的學習交流圈