vue中，应用mapbox地图（二）03-mapbox-gl 地图实例——标准步骤之3D立体效果-init方法

一、获取token

mapbox官网注册账号
个人中心account页面，获取accessToken

二、安装并引入使用
npm install --save mapbox-gl

main.js页面 引入mapboxgl

import mapBoxGl from 'mapbox-gl'
Vue.prototype.mbgl = mapBoxGl

页面

<!-- 组件页面 -->
<template>
    <div id="map"></div>
</template>

//组件页面
<script>
  export default {
    name: "mapbox_test",
    mounted(){
      this.init()
    },
    methods: {
      init(){
       // this.mbgl.accessToken = 'your token';
       this.mbgl.accessToken = 'pk.eyJ1IjoiZmFuZ2xhbmsiLCJhIjoiY2lpcjc1YzQxMDA5NHZra3NpaDAyODB4eSJ9.z6uZHccXvtyVqA5zmalfGg';   
        let map = new this.mbgl.Map({
          container: 'map',
          style: 'mapbox://styles/mapbox/streets-v9',
          center: [-87.61694, 41.86625],
          zoom: 15.99,
          pitch: 40,
          bearing: 1
        })
        map.on('load', function() {
          map.addLayer({
            'id': 'room-extrusion',
            'type': 'fill-extrusion',
            'source': {
              'type': 'geojson',
              'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'
            },
            'paint': {
              'fill-extrusion-color': ['get', 'color'],
              'fill-extrusion-height': ['get', 'height'],
              'fill-extrusion-base': ['get', 'base_height'],
              'fill-extrusion-opacity': 0.6
            }
          })
        })
      }
    }
  }
</script>

/*样式*/
body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#map {
  position: absolute;
  left: 0;
  top: 0;
  text-align: left;
  width: 100%;
  height: 100%;
}

注释：
init方法中的map案例相关数据信息来自官网example

效果-3D立体

在这里插入图片描述

官网html版——https://docs.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Extrude polygons for 3D indoor mapping</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        // TO MAKE THE MAP APPEAR YOU MUST
        // ADD YOUR ACCESS TOKEN FROM
        // https://account.mapbox.com
        // mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
        mapboxgl.accessToken = 'pk.eyJ1IjoiZmFuZ2xhbmsiLCJhIjoiY2lpcjc1YzQxMDA5NHZra3NpaDAyODB4eSJ9.z6uZHccXvtyVqA5zmalfGg';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [-87.61694, 41.86625],
            zoom: 15.99,
            pitch: 40,
            bearing: 20,
            antialias: true
        });

        map.on('load', () => {
            map.addSource('floorplan', {
                'type': 'geojson',
                /*
                * Each feature in this GeoJSON file contains values for
                * `properties.height`, `properties.base_height`,
                * and `properties.color`.
                * In `addLayer` you will use expressions to set the new
                * layer's paint properties based on these values.
                */
                'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'
            });
            map.addLayer({
                'id': 'room-extrusion',
                'type': 'fill-extrusion',
                'source': 'floorplan',
                'paint': {
                    // Get the `fill-extrusion-color` from the source `color` property.
                    'fill-extrusion-color': ['get', 'color'],

                    // Get `fill-extrusion-height` from the source `height` property.
                    'fill-extrusion-height': ['get', 'height'],

                    // Get `fill-extrusion-base` from the source `base_height` property.
                    'fill-extrusion-base': ['get', 'base_height'],

                    // Make extrusions slightly opaque to see through indoor walls.
                    'fill-extrusion-opacity': 0.5
                }
            });
        });
    </script>

</body>

</html>

效果同上

# 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue