Skip to content

symbol VectorMarker support roundrectangle type #2587

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
fuzhenn merged 2 commits into from
Jul 28, 2025
Merged

symbol VectorMarker support roundrectangle type #2587

fuzhenn merged 2 commits into from
Jul 28, 2025

Conversation

@deyihu
Copy link
Collaborator

@deyihu deyihu commented Jul 28, 2025 •
edited
Loading

目前测试下来以下几个图层都没有问题

  • VectorLayer
  • Pointlayer
  • GeoJSONVectorTileLayer
PRXSYERKIVNP~56_ ~7 }01 
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3D - Draw line&#x27;s altitude wall</title>
<style type="text/css">
    html,
    body {
        margin: 0px;
        height: 100%;
        width: 100%
    }

    .container {
        width: 100%;
        height: 100%
    }

    .marker {
        background-color: black;
        color: white;
        padding: 20px;
        height: 200px;
        width: 300px;
        overflow: scroll;
    }

    .marker-content {
        height: 400px;
    }
</style>
<!-- <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css"> -->
<script type="text/javascript" src="http://localhost/d/maptalks.js/packages/maptalks/dist/maptalks.js"></script>
<script type="text/javascript" src="../packages/gl/dist/maptalksgl.js"></script>
<script type="text/javascript" src="../packages/vt/dist/maptalks.vt.js"></script>
<!-- <script type='text/javascript' src='https://unpkg.com/maptalks.tileclip@latest/dist/maptalks.tileclip.js'></script> -->

<body>

    <div id="map" class="container"></div>

    <script>
        var map = new maptalks.Map("map", {
            center: [-0.113049, 51.49856],
            zoom: 14,
            baseLayer: new maptalks.TileLayer("base", {
                urlTemplate:
                    "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
                subdomains: ["a", "b", "c", "d"],
                attribution:
                    '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>',
            }),
        });

        const sceneConfig = {
            environment: {
                enable: true,
                mode: 1,
                level: 0,
                brightness: 0,
            },
            shadow: {
                enable: true,
                opacity: 0.5,
                color: [0, 0, 0],
            },
        };

        const groupLayer = new maptalks.GroupGLLayer("group", [], {
            sceneConfig,
        }).addTo(map);
        const pointLayer = new maptalks.PointLayer("point").addTo(groupLayer);

        var layer = new maptalks.VectorLayer("point").addTo(map);

        const symbol = {
            markerType: "ellipse",
            markerFill: "red",
            markerFillOpacity: 0.5,
            markerWidth: 5,
            markerHeight: 5,
            markerLineWidth: 0,
        }

        const roundRectSymbol = {
            markerType: "roundrectangle",
            // markerType: "rectangle",
            markerFill: "green",
            markerFillOpacity: 0.5,
            markerWidth: 100,
            markerHeight: 50,
            markerLineWidth: 2,
            // markerLineDasharray: [5, 5],
            markerHorizontalAlignment: 'center',
            markerVerticalAlignment: 'top'
        }

        const center = map.getCenter();
        const c1 = center.add(-0.01, 0);
        const c2 = center.add(0.01, 0);

        const point1 = new maptalks.Marker(c1, {
            symbol: {
                ...symbol
            }
        });
        var point2 = new maptalks.Marker(c1, {
            symbol: {
                ...roundRectSymbol,
                textName: 'VectorLayer',
                textWeight: 'bold'
            }
        });
        const point3 = new maptalks.Marker(c2, {
            symbol: {
                ...symbol
            }
        });
        var point4 = new maptalks.Marker(c2, {
            symbol: {
                ...roundRectSymbol,
                textName: "PointLayer"
            }
        });


        function test1() {
            point1.addTo(layer);
            point2.addTo(layer);
        }

        function test2() {
            point3.addTo(pointLayer);
            point4.addTo(pointLayer);
        }

        function test3() {
            const data = {
                type: 'FeatureCollection',
                features: [
                    {
                        type: 'Feature',
                        geometry: {
                            type: "Point",
                            coordinates: center.toArray()
                        },
                        properties: {
                            name: 'hello'
                        }
                    }
                ]
            }
            const style = {
                style: [

                    {
                        filter: ["all", ["==", "$type", "Point"]],
                        renderPlugin: {
                            dataConfig: {
                                type: "point",
                            },
                            sceneConfig: {
                                // collision: true,
                                // fading: false,
                                // depthFunc: "always",
                            },
                            type: "icon",
                        },
                        symbol: [
                            {
                                ...symbol
                            },
                            {
                                ...roundRectSymbol
                            },
                            {
                                textName: 'VT'
                            }
                        ]
                    },
                ],
            }


            const vt = new maptalks.GeoJSONVectorTileLayer('layer', {
                features: true,
                pickingGeometry: true,
                // debug: true,
                data,
                style,
                // pickingGeometry: true,
                // features: true
            });
            vt.addTo(groupLayer);
        }
        test1();
        test2();
        test3();





    </script>
</body>

</html>

@deyihu deyihu requested a review from fuzhenn July 28, 2025 02:37
@fuzhenn fuzhenn merged commit 2a4b411 into maptalks:master Jul 28, 2025
1 of 2 checks passed
@deyihu deyihu deleted the 2586 branch July 28, 2025 04:01
@deyihu deyihu mentioned this pull request Jul 28, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@fuzhenn fuzhenn fuzhenn approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@deyihu @fuzhenn