基于VUE3实现集成OpenLayers开发库加载天地图(通过静态资源导入方式)

前言

如何在VUE3项目中集成OpenLayers开发库,并实现加载三种类型的天地图呢?本文将详细描述实现过程及代码!


一、开发环境

1、VUE开发环境:node.js版本:v16.13.1;VUE版本:Vue CLI v5.0.8

2、OpenLayers版本:v6.15.1


二、集成OpenLayers开发库

VUE集成第三方开发库一般两种方式:

1、通过NPM安装方式

2、通过静态资源导入方式

本文详细讲解第2种(通过静态资源导入方式)集成方式。


三、实现思路

1、创建VUE3项目

vue create ol_basemap_demo

2、将OpenLayers 6开放库放在项目根目录下的public / static子目录下,这里涉及的库文件主要为ol.js、ol.css,如下图所示:

3、在项目根目录下的public / index.html文件中引用 ol.js、ol.css文件,如下图所示。在index.html的外部文件将可在项目中作为全局变量被使用。

4、修改配置项目根目录下的vue.config.js文件输入以下配置参数:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  transpileDependencies: true,
  lintOnSave: false
})

5、加载天地图

在项目根目录下的src / components 子目录下新建地图组件olmap.vue,代码如下图所示。

<template>
    <div class="wrapper">
        <div class="map" id="olMap">
            <div id="popup" class="ol-popup">
                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                <div id="popup-content">

                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            map: null, //地图对象
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        //初始化地图
        initMap() {
            var TiandiMap_img = new ol.layer.Tile({
                name: "天地图影像图层",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的密钥",
                    wrapX: false
                })
            });
            var TiandiMap_cia = new ol.layer.Tile({
                name: "天地图影像注记图层",
                source: new ol.source.XYZ({
                    url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你的你的密钥",
                    wrapX: false
                })
            });

            //实例化Map对象加载地图
            this.map = new ol.Map({
                //地图容器div的ID
                target: 'olMap',
                //地图容器中加载的图层
                layers: [TiandiMap_img, TiandiMap_cia],
                //地图视图设置
                view: new ol.View({
                    //地图初始中心点
                    center: ol.proj.transform([116.2, 39.56], 'EPSG:4326', 'EPSG:3857'),
                    //地图初始显示级别
                    zoom: 9
                })
            });

            //实例化鼠标位置控件(MousePosition)
            var mousePositionControl = new ol.control.MousePosition({
                //坐标格式
                coordinateFormat: ol.coordinate.createStringXY(4),
                //地图投影坐标系(若未设置则输出为默认投影坐标系下的坐标)
                projection: 'EPSG:4326',
                //坐标信息显示样式类名,默认是'ol-mouse-position'
                className: 'custom-mouse-position',
                //显示鼠标位置信息的目标容器
                target: document.getElementById('mouse-position'),
                //未定义坐标的标记
                undefinedHTML: '&nbsp;'
            });
            this.map.addControl(mousePositionControl);

        }
    },
};
</script>

<style scoped>
.map {
    width: 100%;
    height: 100vh;
}
</style>

6、在项目根目录下的src / App.vue 文件中引用地图组件olmap.vue,如下图所示。

<template>
  <olMap />
</template>

<script>
import olMap from './components/olMap.vue'
export default {
  name: 'App',
  components: {
    olMap
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


四、运行调试

1、在项目根目录下,运行以下命令:

npm run serve

2、通过浏览器访问上图中显示的地址: http://localhost:8080/,最终效果如下图所示。


五、源代码下载

本案例代码点击此处下载:https://download.csdn.net/download/liu2004051957/87189885icon-default.png?t=M85Bhttp://基于VUE3实现集成OpenLayers开发库加载天地图

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 要在Vue加载地图,需要先安装OpenLayers地图的相关。可以通过npm安装: ``` npm install ol @supermap/iclient-ol6 --save ``` 然后在Vue组件中引入OpenLayers地图的相关: ```javascript import ol from 'ol'; import { Tianditu } from '@supermap/iclient-ol6'; ``` 接着,在Vue组件的mounted生命周期中,创建地图并添加地图图层: ```javascript mounted() { // 创建地图容器 const mapContainer = document.getElementById('map'); // 创建地图对象 const map = new ol.Map({ target: mapContainer, view: new ol.View({ center: [, ], zoom: 2 }) }); // 创建地图图层 const tiandituLayer = new Tianditu({ layerType: 'vec', key: 'your-tianditu-key' }); // 添加地图图层到地图中 map.addLayer(tiandituLayer); } ``` 其中,`your-tianditu-key`需要替换成你自己的地图开发者密钥。如果没有密钥,可以在地图开发者平台申请。 ### 回答2: Vue 是一种流行的前端框架,能够帮助开发者构建高效的用户界面。而 OpenLayers 则是一种流行的前端地图,它提供了许多强大的地图功能,包括地图渲染、矢量数据展示、标注等等。 地图是一种常用的在线地图服务,提供了丰富的地图数据资源,包括卫星影像、地形数据、街景图等等。 为了加载地图,并在 Vue 中使用 OpenLayers 进行地图展示,我们需要采取以下步骤: 1. 获取地图的 API 密钥 地图需要注册开发者账号,并获得一个 API 密钥,才能进行在线地图服务的调用。获取密钥后,我们可以在 OpenLayers 中调用地图的 WMTS 服务,加载所需的瓦片数据。 2. 安装必要的依赖Vue 项目中使用 OpenLayers,需要先安装相关的依赖。具体来说,我们需要安装三个:ol、proj4 和 proj4leaflet。其中,ol 是 OpenLayers 的核心,proj4 和 proj4leaflet 则是用于地图坐标转换的工具。 可以使用 npm install 命令来安装这些。 3. 在 Vue 模板中添加地图容器 在 Vue 的模板中,我们可以添加一个 div 元素,用于承载 OpenLayers地图容器。这个容器需要设置样式来确定它所占据的位置和大小。 4. 在 Vue 中引入 OpenLayers地图的配置 为了在 Vue加载 OpenLayers地图服务,我们需要新建一个 .js 文件,用于配置这些服务的相关信息。在这个文件中,我们需要引入 OpenLayers 和 proj4 ,以及地图的 API 密钥。 5. 在 Vue 中引入地图组件 最后,在 Vue 的组件中,我们需要引入地图组件,并在其 mounted 生命周期中,调用我们定义好的配置文件,来加载地图服务和 OpenLayers地图显示。 通过以上步骤,我们就可以在 Vue 中,轻松地加载和显示地图,并使用 OpenLayers 进行地图展示和交互。 ### 回答3: Vue是一种流行的JavaScript框架,它提供了一种开发Web应用程序的方法,使您可以使用组件,指令和状态来轻松构建丰富的用户界面。而OpenLayers是一个功能强大的JavaScript,它可以帮助您在Web应用程序中实现各种地图和空间分析功能。 地图是一种广泛使用的中国地图服务,它提供了各种地图数据,如道路,建筑物和地形,以及各种功能,如地理编码和路径规划。对于Vue开发人员来说,整合地图OpenLayers可以为他们的Web应用程序提供丰富的地图功能。 要加载地图,需要使用OpenLayers的TileLayer组件。在Vue应用程序中,您可以使用Vue-OpenLayers,这是一个Vue组件,为OpenLayers提供了Vue绑定。下面是一些步骤,可以帮助您在Vue加载地图: 步骤一:安装Vue-OpenLayers组件 您可以使用npm安装Vue-OpenLayers: npm install vue-openlayers 步骤二:导入Vue-OpenLayers组件 您需要在Vue组件中导入Vue-OpenLayers组件: import { Map, TileLayer } from 'vue-openlayers'; 步骤三:创建地图容器 您需要在模板中添加一个地图容器: <template> <div> <Map ref="map"> <TileLayer type="XYZ" url="http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}" attributions="&copy;2018 TDT&nbsp;|&nbsp;http://www.tianditu.gov.cn/" /> </Map> </div> </template> 步骤四:配置地图数据 您需要在TileLayer组件中配置地图数据。此处的URL应该是地图服务提供商提供的。 步骤五:运行应用程序 您可以运行Vue应用程序,并在浏览器中查看地图。现在,您应该能够看到一个包含地图数据的地图!您可以尝试通过添加更多图层来定制地图,或者使用OpenLayers的各种功能来实现空间分析。 在使用Vue-OpenLayers加载地图时,需要注意保护好自己的开发者密钥,在与地图服务提供商之间的交互中,应该遵守相关协议和政策。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

动立信息服务

您的鼓励将是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值