devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：笔触狂放9 | 2024-04-29 11:27:53

赞

踩

【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

按下面的步骤创建即可：

  1. ## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
  2. vue --version
  3.  
  4. ## 安装或者升级你的@vue/cli 
  5. npm install -g @vue/cli
  6.  
  7. ## 执行创建命令
  8. vue create vue_test
  9.  
  10. ##  随后选择3.x
  11. ##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
  12. ##  > 3.x
  13. ##    2.x
  14.  
  15. ## 启动
  16. cd vue_test
  17. npm run serve

二、openlayers加载瓦片地图（引js文件版）

2.1 将以下的文件复制到public下

2.2 index.html引入ol脚本

2.3 删除项目自带的HelloWorld.vue，创建Map.vue

2.4 编码Map.vue

  1. <template>
  2.     <div class="map" id="map" ref="mapContainer"></div>
  3. </template>
  4.  
  5. <script>
  6.     import { onMounted, ref } from 'vue';
  7.  
  8.     export default {
  9.         name: 'MapComponent',
  10.         setup() {
  11.  
  12.             const mapContainer = ref(null);
  13.  
  14.             onMounted(() => {
  15.                 var BaseMapLayer = function(options) {
  16.                     var layer = new ol.layer.Tile({
  17.                         source: new ol.source.XYZ({
  18.                             url: options.url,
  19.                             tilePixelRatio: 1,
  20.                             minZoom:2,
  21.                             maxZoom:17
  22.                         })
  23.                     });
  24.                     return layer;
  25.                 };
  26.  
  27.                 var view = new ol.View({
  28.                     // 这两个参数是你地图地点的中心点经纬度坐标
  29.                     center: ol.proj.fromLonLat([120, 17]),
  30.                     zoom: 13,
  31.                     minZoom: 13,
  32.                     maxZoom: 17
  33.                 });
  34.  
  35.  
  36.                 var sateliteopt = {
  37.                     url: '/tiles/{z}/{x}/{y}.png'
  38.                 };
  39.  
  40.  
  41.                 var sate = new ol.layer.Group({
  42.                     layers: [
  43.                         new BaseMapLayer(sateliteopt)
  44.  
  45.                     ]
  46.                 });
  47.  
  48.  
  49.                 // 添加标注层
  50.                 var markerLayer = new ol.layer.Vector({
  51.                     source: new ol.source.Vector(),
  52.                     style: new ol.style.Style({
  53.                         image: new ol.style.Icon({
  54.                             anchor: [0.5, 46],
  55.                             anchorXUnits: 'fraction',
  56.                             anchorYUnits: 'pixels',
  57.                             src: '/marker.png' // 标注图标的路径
  58.                         })
  59.                     })
  60.                 });
  61.  
  62.                 // 创建标注
  63.                 var marker = new ol.Overlay({
  64.                     element: document.getElementById('marker'),
  65.                     positioning: 'center-center',
  66.                     stopEvent: false,
  67.                     offset: [0, -23]
  68.                 });
  69.  
  70.  
  71.                 var map = new ol.Map({
  72.                     view: view,
  73.                     layers: [
  74.                         sate,
  75.                         markerLayer // 添加标注层到地图
  76.                     ],
  77.                     overlays: [marker], // 添加标注到地图
  78.                     target: 'map'
  79.                 });
  80.  
  81.  
  82.                 // 监听点击事件
  83.                 map.on('click', function(event) {
  84.                     // 将点击的经纬度转换为地图的像素坐标
  85.                     var feature = new ol.Feature({
  86.                         geometry: new ol.geom.Point(event.coordinate)
  87.                     });
  88.                     // 将标注添加到标注层
  89.                     markerLayer.getSource().addFeature(feature);
  90.                     // 将标注移动到点击的位置
  91.                     marker.setPosition(event.coordinate);
  92.                 });
  93.             });
  94.  
  95.             return {
  96.                 mapContainer
  97.             };
  98.         }
  99.     };
  100. </script>
  101.  
  102. <style>
  103.     .map {
  104.         height: 100%;
  105.         width: 100%;
  106.     }
  107. </style>

2.5 修改App.vue

  1. <template>
  2.   <MapComponent/>
  3. </template>
  4.  
  5. <script>
  6. import MapComponent from './components/Map.vue'
  7.  
  8. export default {
  9.   name: 'App',
  10.   components: {
  11.     MapComponent
  12.   }
  13. }
  14. </script>
  15.  
  16. <style>
  17.  
  18. </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代码

  1. <template>
  2.     <div class="map" id="map" ref="mapContainer"></div>
  3. </template>
  4.  
  5. <script>
  6.     import "ol/ol.css";
  7.     import { onMounted, ref } from 'vue';
  8.     import { Icon, Style }from "ol/style";
  9.     import Map from "ol/Map";
  10.     import Overlay from "ol/Overlay";
  11.     import View from "ol/View";
  12.     import Point from "ol/geom/Point.js";
  13.     import Feature from "ol/Feature.js";
  14.     import TileLayer from "ol/layer/Tile";
  15.     import XYZ from "ol/source/XYZ";
  16.     import VectorLayer from "ol/layer/Vector";
  17.     import {fromLonLat } from "ol/proj";
  18.     import Group from "ol/layer/Group";
  19.     import VectorSource from "ol/source/Vector";
  20.  
  21.     export default {
  22.         name: 'MapComponent',
  23.         setup() {
  24.  
  25.             const mapContainer = ref(null);
  26.  
  27.             onMounted(() => {
  28.                 var BaseMapLayer = function(options) {
  29.                     var layer = new TileLayer({
  30.                         source: new XYZ({
  31.                             url: options.url,
  32.                             tilePixelRatio: 1,
  33.                             minZoom:2,
  34.                             maxZoom:17
  35.                         })
  36.                     });
  37.                     return layer;
  38.                 };
  39.  
  40.                 var view = new View({
  41.                     center: fromLonLat([200, 18.1]),
  42.                     zoom: 13,
  43.                     minZoom: 13,
  44.                     maxZoom: 17
  45.                 });
  46.  
  47.  
  48.                 var sateliteopt = {
  49.                     url: 'tiles/{z}/{x}/{y}.png'
  50.                 };
  51.  
  52.  
  53.                 var sate = new Group({
  54.                     layers: [
  55.                         new BaseMapLayer(sateliteopt)
  56.                     ]
  57.                 });
  58.  
  59.  
  60.                 // 添加标注层
  61.                 var markerLayer = new VectorLayer({
  62.                     source: new VectorSource(),
  63.                     style: new Style({
  64.                         image: new Icon({
  65.                             anchor: [0.5, 46],
  66.                             anchorXUnits: 'fraction',
  67.                             anchorYUnits: 'pixels',
  68.                             src: 'marker.png' // 标注图标的路径
  69.                         })
  70.                     })
  71.                 });
  72.  
  73.                 // 创建标注
  74.                 var marker = new Overlay({
  75.                     element: document.getElementById('marker'),
  76.                     positioning: 'center-center',
  77.                     stopEvent: false,
  78.                     offset: [0, -23]
  79.                 });
  80.  
  81.  
  82.                 var map = new Map({
  83.                     view: view,
  84.                     layers: [
  85.                         sate,
  86.                         markerLayer // 添加标注层到地图
  87.                     ],
  88.                     overlays: [marker], // 添加标注到地图
  89.                     target: 'map'
  90.                 });
  91.  
  92.  
  93.                 // 监听点击事件
  94.                 map.on('click', function(event) {
  95.                     // 将点击的经纬度转换为地图的像素坐标
  96.                     var feature = new Feature({
  97.                         geometry: new Point(event.coordinate)
  98.                     });
  99.                     // 将标注添加到标注层
  100.                     markerLayer.getSource().addFeature(feature);
  101.                     // 将标注移动到点击的位置
  102.                     marker.setPosition(event.coordinate);
  103.                 });
  104.             });
  105.  
  106.             return {
  107.                 mapContainer
  108.             };
  109.         }
  110.     };
  111. </script>
  112.  
  113. <style>
  114.     .map {
  115.         height: 800px;
  116.         width: 2000px;
  117.     }
  118. </style>

3.3 启动项目测试即可

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/507514
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号