mapbox,使用maptalks绘制3D建筑图形

最新推荐文章于 2024-03-05 09:04:33 发布

jinfeng_yu

最新推荐文章于 2024-03-05 09:04:33 发布

阅读量539

点赞数

分类专栏： mapbox 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/jinfeng_yu/article/details/127495799

版权

mapbox 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

开始想使用npm的形式安装mapbox和maptalks,但是不知道是不是maptalks只是html5的文件，总是报错，无奈只有在public文件夹使用cdn的方式引入mapbox和maptalks，先引入mapbox后引入maptalks，然后在具体的vue文件中使用

Map.on("load", function () {
        glMap.addLayer({
          id: "buildings",
          type: "fill-extrusion",
          minzoom: 1,
          source: {
            type: "geojson",
            //楼宇坐标,层级 json文件
            data: build,
          },
          layout: {
            visibility: "visible",
          },
          paint: {
            "fill-extrusion-color": ["get", "color"],
            "fill-extrusion-height": ["get", "height"],
            "fill-extrusion-base": ["get", "baseHeight"],
            "fill-extrusion-opacity": 0.6,
          },
        });

build是楼宇的数据
数据格式大致为

export const build={
    "features":[
        {
            "type":"Feature",
            "properties":{
                "name":null,
                "type":"building",
                "key":"1",
                "height":60,
                "color":"#00cec9",
                "baseHeight":0,
                "floor":"1"
            },
            "geometry":{
                "type":"MultiPolygon",
                "coordinates":[
                    [
                        [
                            [
                                121.57791602,
                                31.26885628
                            ],
                            [
                                121.57791642,
                                31.26454417
                            ]，
                            [
                                121.57791602,
                                31.26885628
                            ]
                        ]
                    ]
                ]
            }
        },
    ],
    "type":"FeatureCollection"
}