可视化大屏:mapbox+vue全攻略

这篇具有很好参考价值的文章主要介绍了可视化大屏:mapbox+vue全攻略。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

如题图,mapbox是一个支持真3D地形展示的webGIS框架,与常用的Leaflet、Cesium和Openlayers并称四大框架,本文将介绍mapbox-gl js 在 vue 中的用法。

为什么要用 mapbox ?

各位可以自行搜索上面提到的或者其他的webGIS框架或者集成服务商,可以很轻松的比较出mapbox的优势:

  • 支持3D地形、3D模型
  • 支持多种坐标系投影
  • mapbox studio 在线编辑地图样式,使用时只需一个链接,更新时链接也无需修改(无可替代)
  • 漂亮(谁能反驳?)
  • 简单易上手(对比Cesium、Openlayers)
  • 地理数据全格式支持(Image、KML、WMS、 WMTS、 GeoJson)
  • 功能齐全,mapbox再也不是那个花瓶了,它现在是一个强大的、完整的大型框架

注册mapbox账号

mapbox禁止中国地区的新用户注册,需要开启全局的魔法,进入 mapbox官网注册

如果要求输入 海外银行卡号,参阅:知乎:mapbox的注册怎么需要填卡号,有银行要求吗,之前看网上说不需要填,具体要怎么操作,求大神指点。?

完成注册后会看到如下画面

左上红框可以在线创建、编辑地图样式。下方红框是公钥,可以用来访问你创建的公开地图。

创建你的个性化地图

你可以自行探索各个图层分别是什么,我这里只新增了一个卫星图,图层越多,加载的时候就越慢,用起来就越卡。

点击左上角3D按钮,即可开启3D视图,mapbox会根据全球等高线信息模拟出地形

上图为山东省泰安市。此外还支持:

  • 自定义光源
  • 自定义坐标系
  • 自定义地形夸张
  • 雾气(视野可见范围,适当设置有助于性能优化)

在VUE项目中使用mapBox

本文使用vue3,选配如下:

  • router
  • vuex
  • less
  1. 安装,通过NPM安装

    1. npm i mapbox-gl
      
  2. 引入

    1. import mapboxgl from 'mapbox-gl';
      import 'mapbox-gl/dist/mapbox-gl.css';
      import MapboxLanguage from '@mapbox/mapbox-gl-language'; //可以将标签改为中文
      
  3. 初始化

    1. mapboxgl.accessToken='pk.eyJ1IjoiemJiZW4iLCJhIjoiACtpemtnOXRoMDRhcDMwbG43aGYxbXhqYyJ9.YOJzSXzubABBJeK7SXg60w'; //这是一个无效的公钥,上面提到了公钥在哪里可以获取到
      this.map = new mapboxgl.Map({
              container: "basicMapbox",
              style: 'mapbox://styles/xxx/ckus1uok22m4117aif4pg9qa6', //这是个假链接,在上面有提到分享按钮,那里有你自己的链接
              center: [118, 28],
              zoom: 3, //zoom你都不懂就别看了
              pitch: 0, // 相对于地面3D视角的角度
              bearing: 0, // 东西南北 方向,正北方为 0
              projection: 'globe', // 为 3D 地球
              antialias: false, //抗锯齿,通过false关闭提升性能
              essential: true, //不知道什么意思,我看人家写我就写了
              renderWorldCopies: false, //可理解为loop,在projection: 'globe'时无效
              skipOnboarding: true,//可选择不等待瓦片加载
            });
      // ### 标签汉化
      // this.map.addControl(new MapboxLanguage({ defaultLanguage: 'zh-Hans' }));
      // ### 添加导航控制条
      // this.map.addControl(new mapboxgl.NavigationControl(), 'top-left');
      
  4. 监听事件

    1. this.map.on("eventName",()=>{})
      // 常用事件有:load、moveend、render等,自行探索
      
  5. 常用方法

    1. this.map.setFog({}); //开启宇宙、星空
      this.map.flyTo({
           center: [109.926476, 19.088415], //目标中心点 海南省琼中县湾岭镇
           zoom: 11, //目标缩放级别
           bearing: 56.50, //目标方位角
           pitch: 47.50, //目标倾斜角
      },duration: 7000,) //飞行
      let shape = await request.get("some_geoJosn")
      this.map.addSource('customSourceName'{
          type:"geojson" //可选: raster || image || 等
          // 每个类型所需的参数不一样,自行探索,这里用geojson举例。
          "data": shape
      }) //添加资源
      this.map.getSource('customSourceName') && this.map.removeSource('customSourceName') //获取资源、删除资源
      this.map.addLayer({
              id: 'measure-lines',
              type: 'line',
              source: 'customSourceName', //使用刚刚添加的资源
              layout: {
                'line-cap': 'round',
                'line-join': 'round'
              },
              paint: {
                'line-color': '#00FFF4',
                'line-width': 2.5,
                'line-opacity': 1,
                'line-gap-width': 0,
              },
      }); // 添加图层,如上使用 名为 customSourceName 的资源 添加了一个用线勾勒轮廓的图层。
      this.map.getLayer('measure-lines') && this.map.removeLayer('measure-lines') // 获取图层、删除图层
      
    2. 插点,以下是一个插点的简单示例,可以用vue组件渲染插点的响应弹窗:

      import mapboxPopView from '../mapboxPopView/mapboxPopView.vue'; //弹窗组件需提前引入
        
      async setMaker(makerList) {
            if (!makerList) {
              return
            }
            // console.log('makerList::: ', makerList);
            for (let item of makerList) {
              let dom = document.createElement('img')
              dom.src = require(`../../../public/static/img/${item.deviceType}.png`) //这里使用了自定义图片来替换默认插点图标
              dom.style.width = '52.4px'
              dom.style.height = 'auto' //可以保持比例
              dom.id = `marker-${item.deviceId}`
              dom.classList.add("markerCustom")
              dom.addEventListener("click", () => {
                this.setPopContent(item)
              })
              let marker = new mapboxgl.Marker({
                element: dom,
                offset: [0, -50], //图标偏移量
              }).setLngLat([item.lon, item.lat]).addTo(this.map);
              // 添加标记的弹窗事件
              var popup = new mapboxgl.Popup({
                offset: [0, -100], //弹窗偏移量
              }).setHTML(`<div id="popup-content-${item.deviceId}"></div>`)
              // this.setPopContent(item)
              marker.setPopup(popup);
              this.markerList.push(marker)
              // 点击标记时显示弹窗
            }
            this.$store.dispatch('addLayer')
          },
         setPopContent(item) {
            const MyNewPopup = defineComponent({
              extends: mapboxPopView,
              setup() {
                const deviceItem = item
                return { deviceItem } //这里的常量可以直接在组件的this对象中获取
              },
            })
            setTimeout(() => {
              createApp(MyNewPopup).mount(`#popup-content-${item.deviceId}`) //挂载到刚刚定义的拥有唯一ID的DOM节点上
            }, 10);
          },
      

      插点效果如图:

至此,mapbox的基本功能介绍完毕,另外,mapbox支持自定义图源,下面是一个使用天地图瓦片的例子:

setTiandituLaryer() {
      this.map.addSource('tianditu', {
        type: 'raster',
        tiles: [
          '你的天地图链接',
        ],
        tileSize: 256,
      });
      this.map.addLayer({
        id: 'tianditu',
        type: 'raster',
        source: 'tianditu',
      });
},

如果使用其他的图源,记得在mapbox studio里关闭或删除无用的图层。

码云:mapbox_demo

可视化大屏:mapbox+vue全攻略

旗鼓相当的对手,就是我们磨砺爪子的坚石。文章来源地址https://www.toymoban.com/news/detail-423794.html

到了这里,关于可视化大屏:mapbox+vue全攻略的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 +Echarts5 可视化大屏——屏幕适配

    项目基于Vue3 + Echarts5 开发,屏幕适配是使用 scale 方案 Echarts组件按需引入,减少打包体积 地图组件封装(全国省份地图按需加载) 效果图: 大屏适配常用的方案有 rem + vw/vh 和 scale 。 rem + vw/vh 方案 结合使用rem(相对于根元素字体大小的单位)和vw/vh(视窗宽度/高度的单位

    2024年02月15日
    浏览(50)
  • Vue3 + Vite + TypeScript + dataV 打造可视化大屏

    网上有许多开源的可视化大屏项目,但是分析之后,还是想自己从 0 搭建一个可视化大屏项目,毕竟 Vue 一直在更新,自己搭建的可以使用最新版本的 Vue ,如果对版本没有太多要求的小伙伴们选择那些开源项目的基础上去修改也是很不错的。其次自己搭建一个项目,可以更好

    2024年02月03日
    浏览(46)
  • 【vue2可视化开发】新手会遇到的问题——大屏自适应

    开发可视化大屏第一步,必须要考虑适配不同屏幕的问题,在网络上查看资料,总结了一个目前最适合可视化开发的自适应方案——v-scale-screen组件 1. 安装 注:vue2使用v-scale-screen@1.0.0版本,vue3使用v-scale-screen@2.0.0版本 2. 在main.js中引用 3. 在vue组件中使用 v-scale-screen会将页面等

    2023年04月21日
    浏览(42)
  • 基于Echarts+Vue3的低代码可视化数据大屏拖拽设计器 vue拖拽设计大屏

    本产品是一款基于Vue3开发的可视化数据大屏拖拽设计器。提供一种简单易用的拖拽式数据可视化大屏设计方案,可帮助用户快速创建和定制自己的数据大屏,通过拖拽组件、调整布局和设置属性,实现数据展示的自由组合和个性化定制。 可视化编辑:通过拖拽组件、调整布

    2024年02月03日
    浏览(61)
  • HackTheGame游戏全攻略

    游戏链接 链接: 百度网盘 请输入提取码 提取码:bu1w HackTheGame游戏的玩法: 您将扮演一个黑客的角色,接受各种各样的任务,在不被发现的情况下,使用一些工具入侵他人的电脑,服务器并完成窃取资料,粉碎文件,植入病毒等操作.您有一共有两次机会,第三次被追踪到的话,您就会被捕

    2024年02月05日
    浏览(78)
  • MongoDB 索引全攻略

    目录 一、索引介绍         1.1 单字段索引         1.2 复合索引         1.3 多键索引         1.4 主键索引         1.5 TTL 索引         1.6 地理空间索引         1.7 哈希索引         1.8 创建索引时注意事项         1.9 索引效果查看  二、索引实现原理         2.1 为

    2024年04月27日
    浏览(69)
  • vite+vue3+cesium大屏数据可视化项目——第一章:搭建项目

    目录 系列文章目录 前言 一、搭建项目 1.检查node版本号 2.搭建vue3项目 二、配置cesium 1.前期准备 2.安装cesium 3.引入cesium 4.初始化页面 总结   这几年智慧城市、数字孪生、数字可视化这些高级词汇可太多啦,招聘简介上也有很多要求会webGis等相关经验,所以我觉得最近来学一

    2024年02月07日
    浏览(68)
  • 谷歌账号注册流程全攻略

    一、访问谷歌账号注册页面 首先,你需要访问谷歌账号注册页面。你可以直接点击此链接,或者在谷歌首页点击右上角的“登录”按钮,在弹出的登录框中点击“创建帐号”。 在注册页面,你需要填写以下个人信息: 名字:输入你的名字。 姓氏:输入你的姓氏。 用户名:

    2024年02月05日
    浏览(57)
  • Github搭建个人博客全攻略

    Github是开发者的代码仓库,一个开源和分享社区。 本文前提是已注册github账号。 假设用户名为MyName 进入个人主页(https://github.com/用户名),选择Repositories,点击New Repository name填入MyName.github.io,即MyName/ MyName.github.io ,点击Create Repository 安装Git或TortoiseGit(后者添加环境变量)

    2024年02月16日
    浏览(62)
  • 新手搭建服装小程序全攻略

    随着互联网的快速发展,线上购物已经成为了人们日常生活中不可或缺的一部分。服装作为人们日常消费的重要品类,线上化趋势也日益明显。本文将详细介绍如何从零开始搭建一个服装小程序商城,从入门到精通的捷径,帮助你快速掌握小程序商城的制作方法和技巧。 首先

    2024年02月21日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包