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

目录

一、创建Vue3项目

二、openlayers加载瓦片地图(引js文件版)

[2.1 将以下的文件复制到public下](#2.1 将以下的文件复制到public下)

[2.2 index.html引入ol脚本](#2.2 index.html引入ol脚本)

[2.3 删除项目自带的HelloWorld.vue,创建Map.vue](#2.3 删除项目自带的HelloWorld.vue,创建Map.vue)

[2.4 编码Map.vue](#2.4 编码Map.vue)

[2.5 修改App.vue](#2.5 修改App.vue)

[2.6 启动项目测试](#2.6 启动项目测试)

三、openlayers加载瓦片地图(npm安装依赖版)

[3.1 安装openlayers依赖](#3.1 安装openlayers依赖)

[3.2 编写Map.vue代码](#3.2 编写Map.vue代码)

[3.3 启动项目测试即可](#3.3 启动项目测试即可)


一、创建Vue3项目

注:不用创建项目的可以直接跳过这块。

我们这里用vue/cli创建,我用的node版本是18.12.1。

创建前可以先配置下镜像源:npm config set registry https://registry.npmmirror.com

按下面的步骤创建即可:

bash 复制代码
## 查看@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

javascript 复制代码
<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

javascript 复制代码
<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:

bash 复制代码
npm install ol

注意:这里不知道为什么node18.12.0安装不上ol,我就先用nvm切换到17.1.0版本安装的ol,安装完再切回18.12.0版本。

3.2 编写Map.vue代码

javascript 复制代码
<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 启动项目测试即可

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪6 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom8 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom8 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试