离线地图开发之模拟流量聚集特效(含源代码)_html


<!DOCTYPE html>

<html>

<head>

    <meta charset='UTF-8' />

    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <!--

        以下CSS地址请在安装软件了替换成本地的地址

        CSS地址请使用:

        http://localhost:9000/bigemap.js/v2.1.0/bigemap.css

        软件下载地址 http://www.bigemap.com/reader/download/detail201802017.html

    -->

    <link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />

    <!--

        JS地址请使用:

        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js

    -->

    <script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script type="text/javascript" src="https:///dep/echarts/latest/echarts.min.js"></script>

    <script src="/Public/offline/iclient/js/iclient9.min.js"></script>

    <style>

        body { margin: 0; padding: 0;}

        #map { position: absolute; top: 0; bottom: 0; width: 100%; }

    </style>

    <title>Google Map Streets</title>

</head>

<body>

<div id='map'></div>

<script>

    //软件配置信息地址,软件安装完成之后使用本地地址,如:http://localhost:9000

    BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';

    // 在ID为map的元素中实例化一个地图,并设置地图的ID号为 bigemap.googlemap-streets,ID号程序自动生成,无需手动配置,并设置地图的投影为百度地图 ,中心点,默认的级别和显示级别控件

    var map = BM.map('map','bigemap.googlemap-streets', { center: [39.8, 116.5], zoom: 10, zoomControl: true });

    $.get('/Public/offline/iclient/data/lines-bus.json', function (data) {

        var hStep = 300 / (data.length - 1);

        var busLines = [].concat.apply([], data.map(function (busLine, idx) {

            var prevPt;

            var points = [];

            for (var i = 0; i < busLine.length; i += 2) {

                var pt = [busLine[i], busLine[i + 1]];

                if (i > 0) {

                    pt = [

                        prevPt[0] + pt[0],

                        prevPt[1] + pt[1]

                    ];

                }

                prevPt = pt;

                points.push([pt[0] / 1e4, pt[1] / 1e4]);

            }

            return {

                coords: points,

                lineStyle: {

                    normal: {

                        color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))

                    }

                }

            };

        }));

        let option = {

            series: [

                {

                    type: 'lines',

                    coordinateSystem: 'leaflet',

                    polyline: true,

                    data: busLines,

                    silent: true,

                    lineStyle: {

                        normal: {

                            opacity: 0.2,

                            width: 1

                        }

                    },

                    progressiveThreshold: 500,

                    progressive: 200,

                    zlevel: 2

                },

                {

                    type: 'lines',

                    coordinateSystem: 'leaflet',

                    polyline: true,

                    data: busLines,

                    lineStyle: {

                        normal: {

                            width: 0

                        }

                    },

                    effect: {

                        constantSpeed: 20,

                        show: true,

                        trailLength: 0.1,

                        symbolSize: 1.5

                    },

                    zlevel: 1

                }]

        };

        BM.supermap.echartsLayer(option).addTo(map);

    });

</script>

</body>

</html>