【Vue3】openlayers加载瓦片地图并手动标记坐标点

目录

一、创建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>

3.3 启动项目测试即可