vue+mapbox卷帘对比地图

功能场景:

例如同一个区域或者地块,想要分别看到不同作物的对比种植面积情况,那么一个地图显示效果就不是十分明显,需要两个地图。左右跟随拖动。并且可卷帘
另外,如果想要超过两个地图,那就是类似于分屏地图,可见下一篇文章

效果图:

在这里插入图片描述

在这里插入图片描述

代码实现:
<!-- mapbox -->
<template>
    <div class="map-box-wrap" 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue.jsMapbox 是两个非常流行的工具,用于构建用户界面和提供强大的地图功能。Vue 是一个轻量级的前端框架,以其组件化开发和易于上手的特点受到开发者喜爱。Mapbox 则是一个提供了丰富的地图服务、地图样式和交互功能的平台。 当你将 VueMapbox 结合使用时,可以实现以下几个关键点: 1. 安装依赖:首先,你需要在 Vue 项目中安装 `@vuegis/vue-mapbox-gl` 或者直接使用 Mapbox GL JS(原生库),这是官方推荐的 Vue 组件化解决方案。 2. 创建地图组件:创建一个 Vue 组件,例如 `Map.vue`,引入 Mapbox GL JS,并设置初始化地图的方法,包括设置中心位置、比例尺、地图样式等。 ```html <template> <div ref="map"></div> </template> <script> import { mapboxgl, Map } from '@vuegis/vue-mapbox-gl' export default { components: { MapboxGL: mapboxgl.Map, }, mounted() { this.createMap() }, methods: { createMap() { this.$refs.map .el .style = 'width: 100%; height: 400px;'; // 设置样式 const map = new Map(this.$refs.map, { center: [51.505, -0.09], // 地图中心点 zoom: 13, // 初始缩放级别 style: 'mapbox://styles/mapbox/streets-v11', // 使用预设样式 }); }, }, } </script> ``` 3. 动态数据绑定:Vue 的响应式系统使得地图可以根据数据变化动态调整,比如根据用户的输入改变地图视图或添加标记。 4. 图层和交互:Mapbox 提供了各种图层(如矢量图层、影像图层等)和交互元素(如点击事件、鼠标悬停事件),可以在 Vue 中轻松使用。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

_小郑有点困了

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

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

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

打赏作者

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

抵扣说明:

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

余额充值