【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 启动项目测试即可

相关推荐
阿伟来咯~18 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端23 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱26 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai35 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨36 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js