百度地图开发入门（4）：散点图示例

Joern-Lee

已于 2022-06-18 11:04:38 修改

阅读量920

点赞数

分类专栏：数据可视化文章标签： 3d javascript 前端

于 2022-06-12 11:36:44 首次发布

本文链接：https://blog.csdn.net/sdsh1880gm/article/details/125243530

版权

原创不易~看完若对你有所帮助，记得点一个赞哈，这就是对我最大的支持了！

常规的包括散点图、飞线动画、3D建筑等等，这里只会介绍常用的部分，其他的可以去官方文档继续了解学习。也要学会如何快速复用官方的案例。

官方文档：https://lbsyun.baidu.com/solutions/mapvdata

MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。

下面会学习一系列案例，可抽象出一个统一的开发模式

1. 引入common库

官方有一个common库可以引入，简化我们部分map的操作：

<!DOCTYPE html>

<html>



<head>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=LOaAEpspHorOR4Aq8ifOQpIGbzUuVO4D"></script>

    <!-- 引用mapv相关的js库 -->

    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>

    <style>

        html,

        body,

        #map_container {
     

            width: 100%;

            height: 100%;

            padding: 0;

            margin: 0;

        }

        /* 隐藏百度的下面log和版权声明 */

        .anchrolBL, BMap_cpyCtrl {
     

            display: none;

        }

    </style>

</head>



<body>

    <div id="map_container"></div>

    <script>

        

        // 引入的common库所作的处理

        const map = initMap({
     

            center: [121.477091,31.753594],

            zoom: 10,

            style: snowStyle,

            tilt: 0

        })





    </script>

</body>



</html>

记得id要改一下，或者拷贝一份改他的源代码

2. 绘制一个点

主要步骤分为准备数据源与绘制数据

<!DOCTYPE html>

<html>



<head>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=LOaAEpspHorOR4Aq8ifOQpIGbzUuVO4D"></script>

    <!-- 引用mapv相关的js库 -->

    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>

    <script src="https://mapv.baidu.com/build/mapv.js"></script>

    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.124/dist/mapvgl.min.js"></script>

    <style>

        html,

        body,

        #map_container {
     

            width: 100%;

            height: 100%;

            padding: 0;

            margin: 0;

        }

        /* 隐藏百度的下面log和版权声明 */

        .anchrolBL, BMap_cpyCtrl {
     

            display: none;

        }

    </style>

</head>



<body>

    <div id="map_container"></div>

    <sc

最低0.47元/天解锁文章

Joern-Lee

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
百度地图开发入门（4）：散点图示例

常规的包括散点图、飞线动画、3D建筑等等，这里只会介绍常用的部分，其他的可以去官方文档继续了解学习。也要学会如何快速复用官方的案例。官方文档：https://lbsyun.baidu.com/solutions/mapvdataMapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。下面会学习一系列案例，可抽象出一个统一的开发模式官方有一个common库可以引入，简化我们部分map的操作：
复制链接

扫一扫

专栏目录