Openlayers在vue3.2中的使用

Openlayers在vue3.2中的使用

1 vue项目创建

1.1 使用npm

• npm create vite@latest
• project name: (项目名)
• 根据提示选择vue+js或者vue+ts
• cd 到项目中 npm install
• 参考：https://vitejs.cn/

1.2 配置路由

• npm install vue-router@4

• src下新建router目录，在目录中建index.js

• // index.js
  
  import {createRouter,createMemoryHistory,RouteRecordRaw} from 'vue-router'
  import Layout from '@/components/HelloWorld.vue'
  const routes = [
    {
      path:'/',
      name:'home',
      component:Layout
    }
  ]
  // 创建
  const router = createRouter({
    history:createMemoryHistory(),
    routes
  })
  // 暴露出去
  export default router
  

• // main.js
  
  import { createApp } from 'vue'
  import './style.css'
  import App from './App.vue'
  
  // 路由
  import router from './router'
  
  const app = createApp(App)
  app.use(router)
  app.mount('#app')
  

1.3 配置vuex

• npm install vuex@next --save

• 在src目录下创建store目录，并在store中创建index.js

• import { createStore } from 'vuex'
  
  const store = createStore({
    state: {
      shp:''
    },
    mutations: {
      setShp(state,shp){
        state.shp = shp
      },
    },
    actions: {
  
    },
    getters: {
    
    }
  })
   
  export default store
  

• // main.js
  
  import { createApp } from 'vue'
  import './style.css'
  import App from './App.vue'
  
  // 路由
  import store from './store'
  
  const app = createApp(App)
  app.use(store)
  app.mount('#app')
  

1.4 常用命令

项目安装

npm install

项目运行

npm run dev

项目构建

npm run build

项目检查

npm run lint

2 Openlayers加载

2.1 准备

• openlayers的安装 (npm install -s ol)
• 准备一个底图数据源（天地图、高德、百度等），这里以天地图为例(获取天地图中的key值)
• 申请天地图参考：https://blog.csdn.net/weixin_44614518/article/details/121426734

2.2 项目中加载

<template>
  <div :style="{ 'min-height': pageHeight }" id="mymap" class="imap">
  </div>
  <!-- 注意：div必需指定高度，否则加载不出来 -->
</template>
<script setup>
import { onMounted, ref } from 'vue'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { ScaleLine, MousePosition } from 'ol/control' // openlayers控件
import { Map, View, Overlay } from 'ol'
   
onMounted(() => {
  initMap()
})
// 监听页面高度
const pageHeight = ref(window.innerHeight - 60 + 'px')
window.addEventListener('resize', () => {
  pageHeight.value = window.innerHeight - 60 + 'px'
})
const initMap = () => {
  const layer1 = new TileLayer({
    title: '底图',
    source: new XYZ({ url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你申请的key值' }),
  })
  const layer2 = new TileLayer({
    title: '标注',
    source: new XYZ({ url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你申请的key值' }),
  })

  // 添加地图控件
  const icontrols = [
    new ScaleLine(),
    new MousePosition({
      coordinateFormat: createStringXY(6), // 设置数据格式
      projection: 'EPSG:4326', // 设置空间参考系统为'EPSG:4326'
    }),
  ]
  // 创建一个地图
  map = new Map({
    layers: [layer1, layer2], // 加载的图层
    target: 'mymap', // 绑定div
    controls: icontrols, // 设置要显示的控件
    view: new View({
      center:[120,35], // 中心位置
      zoom: 12, // 缩放登级
      maxZoom: 18,
      projection: 'EPSG:4326' // 使用坐标系
    }),
  });
}
</script>
<style scoped>
.imap {
  min-width: 800px;
  height: 800px;
}
</style>