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

最新推荐文章于 2024-06-26 09:41:56 发布

viceen

最新推荐文章于 2024-06-26 09:41:56 发布

阅读量2.7k

点赞数 2

分类专栏：可视化工具文章标签：前端

本文链接：https://blog.csdn.net/weixin_44867717/article/details/123678785

版权

工具同时被 2 个专栏收录

163 篇文章 7 订阅

订阅专栏

可视化

130 篇文章 78 订阅

订阅专栏

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>

效果同上

viceen

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中，应用mapbox地图（二）03-mapbox-gl 地图实例——标准步骤之3D立体效果-init方法

vue中，应用mapbox地图（二）03-mapbox-gl 地图实例——标准步骤之3D立体效果-init方法一、获取tokenmapbox官网注册账号个人中心account页面，获取accessToken二、安装并引入使用npm install --save mapbox-glmain.js页面引入mapboxglimport mapBoxGl from 'mapbox-gl'Vue.prototype.mbgl = mapBoxGl页面&
复制链接

扫一扫

专栏目录