MapVGL快速入门

最新推荐文章于 2024-07-02 09:48:00 发布

宇1~

最新推荐文章于 2024-07-02 09:48:00 发布

阅读量583

点赞数 8

文章标签： html5 javascript 百度

本文链接：https://blog.csdn.net/qq_51097828/article/details/138666895

版权

MapVGL快速入门地址
他那个var bmapgl = new BMapGL.Map('map_container');
不仅要创建map_container的div层，还要设置html和body的大小不然会报
Frame buffer object is incomplete: 36054

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>

    <!-- 如果使用到Three.js相关的图层需要引用 -->
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=4p7ewB0OMjGQGQK9wcRjzyoFUjOyAhLe"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
            #map_container {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map_container"></div>
    <script>
        var bmapgl = new BMapGL.Map('map_container');
        var point = new BMapGL.Point(116.403748, 39.915055);
        bmapgl.centerAndZoom(point, 17);

        // 2. 创建MapVGL图层管理器
        var view = new mapvgl.View({
            map: bmapgl
        });

        // 3. 创建可视化图层，并添加到图层管理器中
        var layer = new mapvgl.PointLayer({
            color: 'rgba(50, 50, 200, 1)',
            blend: 'lighter',
            size: 2
        });
        view.addLayer(layer);

        // 4. 准备好规范化坐标数据
        var data = [{
            geometry: {
                type: 'Point',
                coordinates: [116.403748, 39.915055]
            }
        }];

        // 5. 关联图层与数据，享受震撼的可视化效果
        layer.setData(data);
    </script>
</body>

</html>