BIGEMPA Js API示例中心
迁徙线效果源代码展示

代码编辑区运行下载还原
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
    <script src='http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.js'></script>
    <script src="/offline_data/migrationLayer.js"></script>
    <title>迁徙线效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #baseMap {
            width: 100%;
            height: 100%;
        }

        .tools {
            position: absolute;
            top: 20px;
            right: 30px;
            z-index: 99;
        }
    </style>
</head>

<body>
    <div id="baseMap">
        <div class="tools">
            <button onclick="execAction(`show`)">显示</button>
            <button onclick="execAction(`hide`)">隐藏</button>
            <button onclick="execAction(`another`)">设置其他值</button>
            <button onclick="execAction(`stop`)">暂停</button>
            <button onclick="execAction(`run`)">运行</button>
            <button onclick="execAction(`destroy`)">销毁</button>
        </div>
    </div>
    <script>
        BM.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk';
        //基础地图
        var baseMap = BM.map("baseMap", "bigemap.dc-map", {
            center: [30.7617, 103.9526],
            zoom: 5,
            zoomControl:false,
        });
        var data = [
            { "from": [103.9526, 30.7617], "to": [121.4648, 31.2891], "labels": ["成都", "上海"], "color": "#59acff" },
        ];

        var newdata = [
            { "from": [103.9526, 30.7617], "to": [116.521, 39.0509], "labels": ["成都", "廊坊"], "color": "#59acff" },
            { "from": [103.9526, 30.7617], "to": [109.1052, 36.4252], "labels": ["成都", "延安"], "color": generateBrightColor() },
            { "from": [103.9526, 30.7617], "to": [117.5208, 34.3268], "labels": ["成都", "徐州"], "color": generateBrightColor() },
            { "from": [103.9526, 30.7617], "to": [116.6858, 37.2107], "labels": ["成都", "德州"], "color": generateBrightColor() },
        ]
        var ms = BM.migrationLayer({
            map: baseMap,
            data: newdata,
            // 设置终点的闪烁圆形大小
            pulseRadius: 30,
            // 设置终点的闪烁圆形的宽度
            pulseBorderWidth: 1.0,
            // 箭头宽度大小
            arcWidth: 6.0,
            // 是否展示迁徙先的起点和终点文字
            arcLabel: false,
            // 设置文字的字体 和 字体大小
            arcLabelFont: '20px sans-serif',
            maxWidth: 4
        }
        );
        ms.addTo(baseMap);

        function execAction(value) {
            if (ms == null || ms == undefined) return;
            switch (value) {
                case "show":
                    ms.show();
                    break;
                case "hide":
                    ms.hide();
                    break;
                case "stop":
                    ms.pause();
                    break;
                case "run":
                    ms.play();
                    break;
                case "destroy":
                    ms.destroy();
                    ms = null;
                    break;
                case "another":
                    ms.setData(data)
                    break;
            }
        }
        

        function generateBrightColor() {
            // 生成一个在FF至AA之间的随机数，以保持颜色的鲜艳但不至于过饱和
            const rr = Math.floor(Math.random() * 0x60 + 0xA0).toString(16).padStart(2, '0');
            const gg = Math.floor(Math.random() * 0x60 + 0xA0).toString(16).padStart(2, '0');
            // 对于蓝色通道，我们可以稍微降低其值，但仍保持鲜艳，例如在80至FF之间
            const bb = Math.floor(Math.random() * 0x80 + 0x80).toString(16).padStart(2, '0');

            // 组合成16进制颜色代码
            return `#${rr}${gg}${bb}`;
        }

    </script>
</body>

</html>