maptalks实现画三维圆柱

我就是你的语法糖️

已于 2023-11-16 11:25:39 修改

阅读量139

点赞数

分类专栏： TANG的 MapTalks 文章标签： javascript 前端 html

于 2022-10-21 11:19:16 首次发布

本文链接：https://blog.csdn.net/qq_43274430/article/details/127442675

版权

TANG的 MapTalks 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

先画一个椭圆，然后3d-extrusion拉高

<!DOCTYPE html>
<html>

<head>
    <title>载入GeoJSON对象数据</title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        .container {
            width: 100%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://maptalks.com/api/maptalks.css" />
    <script type="text/javascript" src="https://maptalks.com/api/maptalks.min.js"></script>
    <script type="text/javascript" src="https://maptalks.com/api/maptalks-gl-layers.js"></script>
    <script type="text/javascript" src="https://maptalks.com/api/dat.gui.min.js"></script>
</head>

<body>
    <button onclick="updateData()">add cyliner data</button>
    <div id="map" class="container" style="background-color: #444444"></div>
    <script>
        const map = new maptalks.Map("map", {
            center: [0, 0],
            zoom: 16,
        });


        const geo = new maptalks.GeoJSONVectorTileLayer("geo", {
            data: {
                type: "FeatureCollection",
                features: [],
            },
        });

        geo.on("dataload", (e) => {
            map.fitExtent(e.extent);
        });

        geo.setStyle({
            style: [{
                filter: true,
                renderPlugin: {
                    dataConfig: {
                        type: "3d-extrusion",
                        altitudeProperty: "height",
                        minHeightProperty: "min_height",
                        altitudeScale: 1,
                        defaultAltitude: 10,
                        topThickness: 0,
                        top: true,
                        side: true,
                    },
                    sceneConfig: {
                        // collision: true,
                        // fading: false,
                        // depthFunc: "always",
                    },
                    type: "lit",
                },
                symbol: {
                    material: {
                        baseColorTexture: null,
                        baseColorFactor: [1, 1, 1, 1],
                        hsv: [0, 0, 0],
                        baseColorIntensity: 1,
                        contrast: 1,
                        outputSRGB: 1,
                        metallicRoughnessTexture: null,
                        roughnessFactor: 1,
                        metallicFactor: 1,
                        normalTexture: null,
                        noiseTexture: null,
                        uvScale: [1, 1],
                        uvOffset: [0, 0],
                        uvRotation: 0,
                        uvOffsetAnim: [0, 0],
                        normalMapFactor: 1,
                        normalMapFlipY: 0,
                        bumpTexture: null,
                        bumpScale: 0.02,
                        clearCoatThickness: 5,
                        clearCoatFactor: 0,
                        clearCoatIor: 1.4,
                        clearCoatRoughnessFactor: 0.04,
                        occlusionTexture: null,
                        emissiveTexture: null,
                        emissiveFactor: [0, 0, 0],
                        emitColorFactor: 1,
                        emitMultiplicative: 0,
                    },
                },
            },],
        });

        const groupLayer = new maptalks.GroupGLLayer("group", [geo]);
        groupLayer.addTo(map);

        function updateData() {
            const coordinates = [];
            for (let i = 0; i < 10; i++) {
                for (let j = 0; j < 10; j++) {
                    coordinates.push([i * 0.1, j * 0.1])
                }
            }
            const circleList = coordinates.map(c => {
                return new maptalks.Circle(c, 2000)
            });
            const features = circleList.map(c => {
                const feature = c.toGeoJSON();
                feature.properties = { height: 3000 + Math.round(Math.random() * 5000) };
                return feature;
            });
            const geojson = {
                type: 'FeatureCollection',
                features
            }
            geo.setData(geojson);
        }
    </script>
</body>

</html>