vue脚手架加载离线地图的一种方法

科技前沿 • 2025-03-25 15:54 • 阅读 55

大家好，我是讯享网，很高兴认识大家。

@[TOC](

vue脚手架加载离线地图的一种方法

)
vue脚手架加载中加载离线地图并不难，有以下几个步骤：
1、首先是搭建好vue脚手架，创建自己的项目工程，这个读者可以在网上找教程，推荐这篇文章https://baijiahao.baidu.com/s?id=22315&wfr=spider&for=pc
2、推荐用sublime或者VsCode打开自己的项目工程，本人用的是VsCode，创建的是名为radar的项目工程。
在这里插入图片描述
讯享网
如上图所示，目前所涉及到的文件主要在radar项目文件夹的src文件夹和static文件夹。其中static文件夹存放的是项目所需要的资源文件，离线地图资源文件也就应该存放在static文件夹下（如果将离线地图资源文件存放到其他路径，则离校地图加载不出来）。src文件夹下的components文件夹存放的是自定义组件，这里的mShow.vue文件就是加载离线地图的组件。router文件夹下的index.js文件由于控制自定义组件的路由，其中，组件的路由按下图方式设置：
在这里插入图片描述 3、由于有关于“地图”的操作，这里需要到openlayers官网下载相关的js库，文件名为ol.js。将ol.js文件放在static文件夹下，方便后面引用
4、开始自定义组件的编写。加载离线地图组件mShow.vue文件的代码如下：

<template> <div id="map" class="map"> </div> </template> <script > import ol from '../../static/ol.js'; export default{ name:'mShow', mounted(){ var getMap=document.getElementById('map'); console.log(getMap.id); var offlineMapLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ tileUrlFunction: function (coordinate) { console.log(coordinate[0],coordinate[1],coordinate[2]); var z = coordinate[0]; var x = coordinate[1]; var y = Math.pow(2,z)+coordinate[2]; return "../../static/data/google/84/" + z + "/" + x + "/" + y + ".png"; }, maxZoom: 18, minZoom: 2, projection: 'EPSG:4326' }) }); var map = new ol.Map({ layers:[offlineMapLayer], view: new ol.View({ center: [114.34,30.54], projection: 'EPSG:4326', zoom: 14 }), target:getMap.id }); console.log(map); } } </script> <style scoped> .map { height: 100%; width: 100%; } </style>

讯享网

文件中有三个标签，template标签用于控制组件的结构，style标签控制组件的样式，script标签控制组件的行为。script标签中，import ol from '../../static/ol.js'; 用于引入操作地图的相关js库。mounted方法定义组件加载之后的相关操作，mounted方法中的相关代码的含义可以去openlayer官网学习，入门并不难，网址链接：https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html
5、在控制台输入： npm run dev
在浏览器中输入网址：http://localhost:8080/#/mShow
离线地图即可加载，如下：
在这里插入图片描述

vue脚手架加载离线地图的一种方法

vue脚手架加载离线地图的一种方法

相关推荐