- 安装openLayer插件
命令行:npm install ol
- 安装sass插件
命令行:npm install -D sass
使用方法:
***
***
<style scoped lang="scss">
</style>
- 安装ElementPlus
命令行:npm install element-plus --save
引用方法:
实际代码:
// #ifndef VUE3import Vue from 'vue'import App from './App'Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({...App})app.$mount()// #endif// #ifdef VUE3import {createSSRApp} from 'vue'import App from './App.vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'export function createApp() {const app = createSSRApp(App)app.use(ElementPlus)return {app}}// #endif
4、ol代码(必须使用renderjs否则无法显示地图)
<template><view class="map" id="map"></view>
</template><script setup module="ol" lang="renderjs">
//import 'ol/ol.css'// 真机测试时要注释掉该引用,否则报错
import { Map, View } from 'ol'
import ollayerTile from 'ol/layer/Tile.js'
import olsourceOSM from 'ol/source/OSM.js'
import {get as getProjection} from 'ol/proj.js';
import TileLayer from 'ol/layer/Tile.js'
import XYZ from 'ol/source/XYZ.js'
import { ScaleLine, defaults as defaultControls, MousePosition } from 'ol/control.js'
import { transform } from 'ol/proj.js'export default {data () {return {map:null,view:null}},mounted(){this.initMap()},methods:{// 初始化天地图initMap(){let that = this//天地图影像var tdtYX = new TileLayer({source: new XYZ({url: 'http://t2.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',projection: 'EPSG:3857',crossOrigin: '*',}),})//天地图标注var tdtBZ = new TileLayer({source: new XYZ({url: 'http://t2.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',projection: 'EPSG:3857',}),})//天地图电子地图var tdtDZ = new TileLayer({source: new XYZ({url: 'http://t2.tianditu.gov.cn/DataServer?T=vec_w &x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',projection: 'EPSG:3857',}),})this.map = new Map({controls: defaultControls({attribution: false,zoom: false,rotate: false,}),target: 'map',layers: [tdtDZ,tdtBZ],//[tdtYX, tdtBZ],view: new View({projection: 'EPSG:3857',center: transform([125.33,43.90], 'EPSG:4326', 'EPSG:3857'),// center: [125.33,43.90],zoom: 10,maxZoom: 18, //最大缩放级别}),})}}}
</script><style scoped lang="scss">/*去除顶部导航栏*/*{margin:0;padding:0}.map{width:100vw;height: 100vh;position: relative;z-index: 1; }</style>