Element+Vue+OpenLayers webgis实战

**Element + Vue + OpenLayers WebGIS 实战**

前言----

WebGIS 是一种使用 Web 技术来展示地理信息的技术。它可以让用户通过浏览器轻松地访问和操作地理数据。 Element 和 Vue 是两种流行的前端框架，OpenLayers 则是用于创建 WebGIS 应用的一个开源库。在本文中，我们将使用这些技术来构建一个完整的 WebGIS 应用。

**环境准备**

* Node.js (>=14.17.0)
* npm (>=6.14.13)
* Vue CLI (>=4.5.15)
* Element UI (>=2.10.1)
* OpenLayers (>=7.3.0)

**项目结构**

bashproject/
public/
index.htmlsrc/
App.vuemain.jscomponents/
Map.vuedata/
map.jsonpackage.json

bashnpm install element-ui openlayers vue-cli-service --save

javascriptmodule.exports = {
 // ...
 transpileDependencies: ['openlayers'],
};

html<template>
 <div class="map-container">
 <ol-map :view="view" @ready="onReady" @moveend="onMoveEnd"></ol-map>
 </div>
</template>

<script>
import { Map as OlMap } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSMSource from 'ol/source/OSM';

export default {
 name: 'Map',
 data() {
 return {
 view: new OlMap.View({
 center: [120.0,30.0],
 zoom:10,
 }),
 };
 },
 methods: {
 onReady(map) {
 console.log('Map ready:', map);
 },
 onMoveEnd(event) {
 console.log('Map moved end:', event);
 },
 },
};
</script>

<style scoped>
.map-container {
 width:800px;
 height:600px;
}
</style>

html<template>
 <div class="app-container">
 <el-header>
 <h1>WebGIS Demo</h1>
 </el-header>
 <el-main>
 <map-component></map-component>
 </el-main>
 </div>
</template>

<script>
import MapComponent from './components/Map.vue';
export default {
 name: 'App',
 components: { MapComponent },
};
</script>

<style scoped>
.app-container {
 width:100%;
 height:100vh;
}
</style>

javascriptimport Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import { Map as OlMap } from 'ol';

Vue.use(ElementUI);

new Vue({
 render: (h) => h(App),
}).$mount('#app');

bashnpm run serve