H5数据可视化(高德地图构建项目)

逆袭的菜鸟X
1,728 阅读2分钟
（0）官方基本配置教程（官网）
（1）申请开发者KEY

点我跳转申请地址

（2）引入依赖库

引入下面的两个库的版本是独立的，注意引入的时候不要引入错误否则会出错误

<!-- 引用线上代码 -->
<script src="https://webapi.amap.com/maps?key=开发者Key(必填)&v=版本号(必填，建议使用最新版本)&plugin=Map3D(同步加载 3D 地图)">
<script src="https://webapi.amap.com/loca?key=开发者Key(必填)&v=1.3.0(必填，请选择最新版本号)"></script>
（3）创建地图实例
        window.onload = function() {
            const map = new AMap.Map('map', {
                pitch: 50, // 地图俯仰角度，有效范围 0 度- 83 度
                viewMode: '3D', // 地图模式
                mapStyle: 'amap://styles/8b1ff64d2c968f4f84c2a5f5ef562cfb', // 地图主题
                zoom: 5, //设置地图的缩放级别
                center: [107.4976, 32.1697]
            });
        }
（4）自定义地图主题

在定制主题里我自定义了省界线为红色

1
点我跳转申请地址自定义主题
2

这里有个问题需要声明下，上面第二步引入依赖库时我用的key时其他app开发时注册的，导致我发布主题后一直没有效果后面检查发现时注册key时类型选的iOS而不时web js

（4） 创建可视化图层——绘制散点图层
            $.get('https://a.amap.com/Loca/static/mock/china5a.csv', function(data) {
                var layer = new Loca.PointLayer({
                    map: map // 指定了图层所在的地图实例。
                });

                layer.setData(data, {
                    lnglat: '经纬度',
                    // 或者使用回调函数构造经纬度坐标
                    /*
                     lnglat: function (obj) {
                         var value = obj.value;
                         var lnglat = [value['经度'], value['纬度']];
                         return lnglat;
                     },
                     */
                    // 指定数据类型
                    type: 'csv'
                });
                // 配置样式
                layer.setOptions({
                    style: {
                        // 圆形半径，单位像素
                        radius: 3,
                        // 填充颜色
                        color: '#5DFBF9',
                        // 描边颜色
                        borderColor: '#5DFBF9',
                        // 描边宽度，单位像素
                        borderWidth: 1,
                        // 透明度 [0-1]
                        opacity: 1,
                    }
                });
                // 调用render()方法图层便立即渲染。
                layer.render();
            });
（5） 效果展示与源码

效果图

3
源码

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://a.amap.com/Loca/static/dist/jquery.min.js"></script>
    <script src="https://webapi.amap.com/maps?key=2da678792428d85bd3f0c0e26b25c54b&v=1.4.0&plugin=Map3D"></script>
    <script src="https://webapi.amap.com/loca?key=2da678792428d85bd3f0c0e26b25c54b&v=1.3.0"></script>
</head>

<body>
    <div id='map' style='width:800px; height:600px;'></div>
    <script>
        window.onload = function() {
            const map = new AMap.Map('map', {
                pitch: 50, // 地图俯仰角度，有效范围 0 度- 83 度
                viewMode: '3D', // 地图模式
                mapStyle: 'amap://styles/8b1ff64d2c968f4f84c2a5f5ef562cfb', // 地图主题
                zoom: 5, //设置地图的缩放级别
                center: [107.4976, 32.1697]
            });
            $.get('https://a.amap.com/Loca/static/mock/china5a.csv', function(data) {
                var layer = new Loca.PointLayer({
                    map: map // 指定了图层所在的地图实例。
                });

                layer.setData(data, {
                    lnglat: '经纬度',
                    // 或者使用回调函数构造经纬度坐标
                    /*
                     lnglat: function (obj) {
                         var value = obj.value;
                         var lnglat = [value['经度'], value['纬度']];
                         return lnglat;
                     },
                     */
                    // 指定数据类型
                    type: 'csv'
                });
                // 配置样式
                layer.setOptions({
                    style: {
                        // 圆形半径，单位像素
                        radius: 3,
                        // 填充颜色
                        color: '#5DFBF9',
                        // 描边颜色
                        borderColor: '#5DFBF9',
                        // 描边宽度，单位像素
                        borderWidth: 1,
                        // 透明度 [0-1]
                        opacity: 1,
                    }
                });
                // 调用render()方法图层便立即渲染。
                layer.render();
            });
        }
    </script>
</body>

</html>
avatar
文章
阅读
粉丝