Vue3+Openlayers10示例-昼夜线

利用 ol-ext 和 Element-plus的DatePicker日期选择器，实现昼夜线效果。

假装已经完成了VUE3和Openlayers10开发环境的搭建，如果有需要，可搜索vue+Openlayers环境搭建的相关文章。

一、安装插件

//安装ol-ext插件
npm install ol-ext --save

//安装Element-plus插件
npm install element-plus --save

安装成功后，在vue项目的package.json文件中会有ol-ext和Element-plus插件的依赖，如下图。

二、代码展示

项目中main.js的代码：

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

createApp(App).use(ElementPlus).mount("#app");

项目中App.vue的代码：

<template>
  <HomePage></HomePage>
</template>

<script>
  import HomePage from './views/HomePage.vue'

  export default {
    name: 'App',
    components: {
      HomePage,
    },
  }
</script>

项目中.\views\HomePage.vue的代码：

<template>
	<div class="common-layout">
		<el-container>
			<el-aside width="200px">Vue+Openlayers 开发示例目录</el-aside>
			<el-container>
				<el-main>
					<DayAndNight></DayAndNight>
				</el-main>
				<!--<el-footer>@King空 @格子问道</el-footer>-->
			</el-container>
		</el-container>
	</div>
</template>
<script>
	/* eslint-disable */
	import DayAndNight from '../components/DayAndNight.vue'

	export default {
		name: 'HomePage',
		components: {
			DayAndNight
		},
	}
</script>
<style scoped>
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		text-size-adjust: 10px;
	}

	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>

项目中.\components\DayAndNight.vue的代码：

<template>
    <div class="header">
        <h2>利用 ol-ext 和 Element-plus的日期时间控件，实现昼夜线效果。</h2>
        <div class="demo-datetime-picker">
            <div class="block">
                <span class="demonstration">时间: </span>
                <el-date-picker v-model="dateNow" type="datetime" @change="setDayNight"
                    placeholder="Select date and time" />
            </div>
        </div>
    </div>
    <div id="vue-openlayers" class="map-x"></div>
</template>
<script>
    /* eslint-disable */
    import 'ol/ol.css'
    import { Map, View } from 'ol'
    import { Style, Circle, Fill } from "ol/style"
    import Tile from 'ol/layer/Tile'
    import XYZ from "ol/source/XYZ"
    import Vector from "ol/layer/Vector"
    import DayNight from "ol-ext/source/DayNight"


    var TiandiMap_vec = new Tile({
        title: "天地图矢量图层",
        source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=天地图密钥",//天地图密钥
            wrapX: false
        })
    });
    var Tianditu_cva = new Tile({
        title: "天地图矢量注记图层",
        source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=天地图密钥",//天地图密钥
            wrapX: false
        })
    });

    //初始化 DayNight source
    var dayNightSource = new DayNight({});

    export default {
        name: 'DayAndNight',
        data() {
            return {
                map: null,
                dateNow: new Date(),
            }
        },
        methods: {
            initMap() {
                this.map = new Map({
                    target: "vue-openlayers",
                    //地图容器中加载的图层
                    layers: [TiandiMap_vec, Tianditu_cva,
                        new Vector({
                            source: dayNightSource,
                            style: new Style({
                                image: new Circle({
                                    radius: 5,
                                    fill: new Fill({ color: 'red' })
                                }),
                                fill: new Fill({
                                    color: [0, 0, 50, .5]
                                })
                            })
                        })],
                    view: new View({
                        projection: "EPSG:3857",
                        center: [0, 0],
                        zoom: 1
                    })
                })
            },

            //利用时间控件的change事件，通过setTime方法更新DayNight的昼夜线
            setDayNight(value) {
                if (value != undefined) {
                    console.log("datetime:" + value);

                    dayNightSource.setTime(value);
                    //dayNightSource.refresh();
                } else {
                    alert("先输入时间！");
                }
            },
        },
        mounted() {
            this.initMap();
        },

    }
</script>

<style scoped>
    #vue-openlayers {
        width: auto;
        height: 600px;
        margin: auto;
        border: px solid #42B983;
    }

    .header {
        width: auto;
        border: 2px solid #42B983;
        margin: auto;
        text-align: center;
    }

    .demo-datetime-picker {
        width: 100%;
        padding: 0;
    }

    .demo-datetime-picker.block {
        padding: 30px 0;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
    }

    .demo-datetime-picker.block:last-child {
        border-right: none;
    }

    .demo-datetime-picker.demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
    }
</style>

三、运行&效果

运行项目：

//运行项目
npm run serve

运行效果：

四、总结

引入Element-plus主要是为了用它的DatePicker日期选择器，方便输入日期和时间，如果不想麻烦也可以直接用普通 input 输入框甚至Date()代替。

另外，在本示例中还用到了Element-plus的Container 布局容器，这是因为示例太多方便管理，具体根据自己需要取舍。

注意事项：

本专辑主要基于 Vue 3.5.3 和 Openlayers 10.1.0 开发，相关插件也均采用能够兼容的版本，可根据自身需要适当取舍。