目录
一、创建Vue3项目
二、openlayers加载瓦片地图（引js文件版）
2.1 将以下的文件复制到public下
2.2 index.html引入ol脚本
2.3 删除项目自带的HelloWorld.vue，创建Map.vue
2.4 编码Map.vue
2.5 修改App.vue
2.6 启动项目测试
三、openlayers加载瓦片地图（npm安装依赖版）
3.1 安装openlayers依赖
3.2 编写Map.vue代码
3.3 启动项目测试即可
一、创建Vue3项目
注：不用创建项目的可以直接跳过这块。
我们这里用vue/cli创建，我用的node版本是18.12.1。
创建前可以先配置下镜像源：npm config set registry https://registry.npmmirror.com
按下面的步骤创建即可：
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli
npm install -g @vue/cli## 执行创建命令
vue create vue_test## 随后选择3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
## > 3.x
## 2.x## 启动
cd vue_test
npm run serve二、openlayers加载瓦片地图（引js文件版）
2.1 将以下的文件复制到public下
2.2 index.html引入ol脚本
2.3 删除项目自带的HelloWorld.vue，创建Map.vue
2.4 编码Map.vue
<template><div class="map" id="map" ref="mapContainer"></div>
</template><script>import { onMounted, ref } from 'vue';export default {name: 'MapComponent',setup() {const mapContainer = ref(null);onMounted(() => {var BaseMapLayer = function(options) {var layer = new ol.layer.Tile({source: new ol.source.XYZ({url: options.url,tilePixelRatio: 1,minZoom:2,maxZoom:17})});return layer;};var view = new ol.View({// 这两个参数是你地图地点的中心点经纬度坐标center: ol.proj.fromLonLat([120, 17]),zoom: 13,minZoom: 13,maxZoom: 17});var sateliteopt = {url: '/tiles/{z}/{x}/{y}.png'};var sate = new ol.layer.Group({layers: [new BaseMapLayer(sateliteopt)]});// 添加标注层var markerLayer = new ol.layer.Vector({source: new ol.source.Vector(),style: new ol.style.Style({image: new ol.style.Icon({anchor: [0.5, 46],anchorXUnits: 'fraction',anchorYUnits: 'pixels',src: '/marker.png' // 标注图标的路径})})});// 创建标注var marker = new ol.Overlay({element: document.getElementById('marker'),positioning: 'center-center',stopEvent: false,offset: [0, -23]});var map = new ol.Map({view: view,layers: [sate,markerLayer // 添加标注层到地图],overlays: [marker], // 添加标注到地图target: 'map'});// 监听点击事件map.on('click', function(event) {// 将点击的经纬度转换为地图的像素坐标var feature = new ol.Feature({geometry: new ol.geom.Point(event.coordinate)});// 将标注添加到标注层markerLayer.getSource().addFeature(feature);// 将标注移动到点击的位置marker.setPosition(event.coordinate);});});return {mapContainer};}};
</script><style>.map {height: 100%;width: 100%;}
</style>
2.5 修改App.vue
<template><MapComponent/>
</template><script>
import MapComponent from './components/Map.vue'export default {name: 'App',components: {MapComponent}
}
</script><style></style>
2.6 启动项目测试
三、openlayers加载瓦片地图（npm安装依赖版）
一般来说，引js文件这种方式不太实用，既然都用了vue3了就老老实实按规则走吧...
3.1 安装openlayers依赖
先把package.json里加上"ol": "^7.5.2"，然后安装ol：
npm install ol注意：这里不知道为什么node18.12.0安装不上ol，我就先用nvm切换到17.1.0版本安装的ol，安装完再切回18.12.0版本。
3.2 编写Map.vue代码
<template><div class="map" id="map" ref="mapContainer"></div>
</template><script>import "ol/ol.css";import { onMounted, ref } from 'vue';import { Icon, Style }from "ol/style";import Map from "ol/Map";import Overlay from "ol/Overlay";import View from "ol/View";import Point from "ol/geom/Point.js";import Feature from "ol/Feature.js";import TileLayer from "ol/layer/Tile";import XYZ from "ol/source/XYZ";import VectorLayer from "ol/layer/Vector";import {fromLonLat } from "ol/proj";import Group from "ol/layer/Group";import VectorSource from "ol/source/Vector";export default {name: 'MapComponent',setup() {const mapContainer = ref(null);onMounted(() => {var BaseMapLayer = function(options) {var layer = new TileLayer({source: new XYZ({url: options.url,tilePixelRatio: 1,minZoom:2,maxZoom:17})});return layer;};var view = new View({center: fromLonLat([200, 18.1]),zoom: 13,minZoom: 13,maxZoom: 17});var sateliteopt = {url: 'tiles/{z}/{x}/{y}.png'};var sate = new Group({layers: [new BaseMapLayer(sateliteopt)]});// 添加标注层var markerLayer = new VectorLayer({source: new VectorSource(),style: new Style({image: new Icon({anchor: [0.5, 46],anchorXUnits: 'fraction',anchorYUnits: 'pixels',src: 'marker.png' // 标注图标的路径})})});// 创建标注var marker = new Overlay({element: document.getElementById('marker'),positioning: 'center-center',stopEvent: false,offset: [0, -23]});var map = new Map({view: view,layers: [sate,markerLayer // 添加标注层到地图],overlays: [marker], // 添加标注到地图target: 'map'});// 监听点击事件map.on('click', function(event) {// 将点击的经纬度转换为地图的像素坐标var feature = new Feature({geometry: new Point(event.coordinate)});// 将标注添加到标注层markerLayer.getSource().addFeature(feature);// 将标注移动到点击的位置marker.setPosition(event.coordinate);});});return {mapContainer};}};
</script><style>.map {height: 800px;width: 2000px;}
</style>
