vue 地图可视化 (2)

本文介绍如何在Vue项目中使用MapBox进行3D地图可视化,包括CDN和module bundler两种引入方式,以及如何结合echarts-gl进行数据可视化。详细讲解了地图配置、可视化工具和地图操作的实现,并提供了项目源码链接。
摘要由CSDN通过智能技术生成

MapBox

项目中用到MapBox也是偶然的机会,项目中需要采用3D地图,当现有的工具(百度地图)无法满足我们的需求,我们肯定需要更高级开源的地图,无奈谷歌地图无法在国内使用,已是便找到Leafle,一开始惊艳于leafle的开源程度和其与众不同的地图风格,后来顺藤摸瓜,找到一个商业性地图,它便是我们的主角-MapBox
这里写图片描述

作为国外的一款地图,看到其效果时便一发不可收拾

由于项目主要采用3d GL,国内在这方面的文档不多,只能举起社会主义的镰刀和火炬,一遍遍地看它的官方文档
mapbox gl https://www.mapbox.com/mapbox-gl-js/api/

  • 项目引入Mapbox

CDN模式
在项目html的中直接插入mapbox

    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />

module bundler模式

npm install --save mapbox-gl
// cnpm install --
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值