2021-06-21

最新推荐文章于 2023-06-07 17:58:42 发布

祥云飘绿

最新推荐文章于 2023-06-07 17:58:42 发布

阅读量213

点赞数

分类专栏： mapbox.gl 文章标签： vue

本文链接：https://blog.csdn.net/weixin_48790829/article/details/118081892

版权

mapbox.gl 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客介绍了如何在Vue项目中利用Mapbox.GL库加载本地Geoserver发布的建筑物矢量瓦片数据，展示了设置地图风格、添加源和图层、以及根据建筑物高度应用不同侧面图片的步骤。同时，文中提到了使用本地雪碧图来实现建筑物的视觉效果，并附带了实际运行的效果图。

摘要由CSDN通过智能技术生成

vue项目中使用mapbox.gl加载本地geoserver发布的建筑物数据

这是根据mapbox.gl官网示例，写的加载建筑的小demo

主要代码如下

	 if (!mapboxgl.supported()) {
        console.log("您的浏览器不支持WebGL,请升级到最新版本");
        return;
      }
      mapboxgl.accessToken = glToken;// 自己申请的token
      this.map = new mapboxgl.Map({
        container: "mapContainer",
        // style: "mapbox://styles/mapbox/light-v10",
        center: [113.54, 22.2],
        zoom: 18.5,
        // 倾斜角度
        pitch: 75,
        style: {
          version: 8,
          name: "Mapbox Streets",
          sources: {
            "mapbox-streets": {
              type: "vector",
              url: "mapbox://mapbox.mapbox-streets-v6",
            },
          },
          sprite: `${window.location.origin}/static/sprite/build`,// 这是用的本地的雪碧图
          // sprite: "mapbox://sprites/mapbox/streets-v8",
          glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
          layers: [
            {
              id: "water",
              source: "mapbox-streets",
              "source-layer": "water",
              type: "fill",
              paint: {
                "fill-color": "#00ffff",
              },
            },
          ],
        },
      });

*sprite: ${window.location.origin}/static/sprite/build 地图的style这里的sprite用的是加载的本地的雪碧图，主要是测试下后面根据不同高度的建筑物侧面加不同的图片，看网上说mapbox官网上加载这个会生成@2x.json、@2x.png的，所以后面加载本地雪碧图时就按照这个来写的
在这里插入图片描述

在这里插入图片描述

this.map.addSource("source_build", {
        type: "vector",
        scheme: "tms",
        tiles: [
          // 这是本地用geoserver发布的建筑物的矢量瓦片服务
          "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/aomen%3Aaomen@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
        ],
      });
      this.map.addLayer({
        id: "3d-buildings",
        source: "source_build",
        // source-layer中aomen是发布的图层的名称 
        "source-layer": "aomen",
        // 这个fill-extrusion类型用来加载建筑物的
        type: "fill-extrusion",
        minzoom: 15,
        paint: {
          // Floor是矢量数据里的字段名代表建筑物高度
          "fill-extrusion-height": [
            "interpolate",
            ["linear"],
            ["zoom"],
            15,
            0,
            15.05,
            ["get", "Floor"],
          ],
          // 建筑物侧面贴图
          "fill-extrusion-pattern": [
            "step",
            ["get", "Floor"],
            "l2",
            5,
            "l1",
            9,
            "r2",
          ],
          "fill-extrusion-opacity": 0.8,
        },
      });
      // 建筑物顶部
      this.map.addLayer({
        id: "buildings-top",
        source: "source_build",
        "source-layer": "aomen",
        type: "fill-extrusion",
        minzoom: 15,
        paint: {
          "fill-extrusion-color": "#52aff8",
          "fill-extrusion-height": [
            "interpolate",
            ["linear"],
            ["zoom"],
            15,
            0,
            15.05,
            ["get", "Floor"],
          ],
          "fill-extrusion-base": [
            "interpolate",
            ["linear"],
            ["zoom"],
            15,
            0,
            15.05,
            ["get", "Floor"],
          ],
          "fill-extrusion-opacity": 1,
        },
      });