正文

leaflet使用mapv实现迁徙图

譬如朝露 V管理员/ / 0 评论/ 99阅读
03 02

esri-leaflet使用mapv实现迁徙图

之前使用超图平台本身提供了对mapv的一些案例，上手比较快，esri-leaflet没有这方面的案例，有些坑还是得踩下。

mapv提供的git地址中提供了一些leaflet使用mapv的简单案例，但是本身想实现的是mapv的迁徙图，但是发现一直报错。记录下解决问题。其实mapv提供了一个leafletMapLayer这个图层。以下是代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Esri Leaflet Quickstart</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

    <!-- Load Leaflet from CDN -->
    <link rel="stylesheet" href="./esri-leaflet-v2.5.3/leaflet.css" />
    <script src="./esri-leaflet-v2.5.3/leaflet.js"></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="./esri-leaflet-v2.5.3/esri-leaflet.js"></script>
    <script src="./mapv/build/mapv.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    </style>
</head>

<body>

    <div id="map"></div>

    <script>

        var map = L.map('map').setView([34.41583177128595, -102.17609405517578], 5);

        L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
            'subdomains': ['a', 'b', 'c', 'd', 'e']
        }).addTo(map);

        var randomCount = 300;
        var data = [];
        while (randomCount--) {
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: [-125.8 + Math.random() * 50, 30.3 + Math.random() * 20]
                },
                count: 30 * Math.random()
            });
        }

        var dataSet = new mapv.DataSet(data);

        var options = {
            fillStyle: 'rgba(255, 250, 50, 0.8)',
            globalCompositeOperation: "lighter",
            maxSize: 10,
            max: 30,
            shadowBlur: 30,
            shadowColor: 'rgba(255, 250, 50, 1)',
            draw: 'bubble'
        }

        var mapvLayer = mapv.leafletMapLayer(dataSet, options).addTo(map);

        $.get('./mapv/data/china.json', function (geojson) {

            var geojsonOptions = {
                gradient: {
                    0: 'rgba(55, 50, 250, 0.4)',
                    1: 'rgba(55, 50, 250, 1)'
                },
                max: 354551,
                draw: 'intensity'
            };

            var geojsonDataSet = mapv.geojson.getDataSet(geojson);

            var to = '北京';

            var qianxi = new mapv.DataSet([
                {
                    from: '河北',
                    count: 354551,
                    to: to,
                },
                {
                    from: '天津',
                    count: 97323,
                    to: to,
                },
                {
                    from: '山东',
                    count: 28664,
                    to: to,
                },
                {
                    from: '山西',
                    count: 16650,
                    to: to,
                },
                {
                    from: '辽宁',
                    count: 14379,
                    to: to,
                },
                {
                    from: '河南',
                    count: 10980,
                    to: to,
                },
                {
                    from: '内蒙古自治区',
                    count: 9603,
                    to: to,
                },
                {
                    from: '江苏',
                    count: 4536,
                    to: to,
                },
                {
                    from: '上海',
                    count: 3556,
                    to: to,
                },
                {
                    from: '广东',
                    count: 2600,
                    to: to,
                },
            ]);

            var qianxiData = qianxi.get();

            var lineData = [];
            var pointData = [];
            var textData = [];
            var timeData = [];

            var citys = {}

            for (var i = 0; i < qianxiData.length; i++) {
                var fromCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].from);
                var toCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].to);
                if (!fromCenter || !toCenter) {
                    continue;
                }
                citys[qianxiData[i].from] = qianxiData[i].count;
                citys[qianxiData[i].to] = 100;
                pointData.push(
                    {
                        geometry: {
                            type: 'Point',
                            coordinates: [fromCenter.lng, fromCenter.lat]
                        }
                    }
                );
                pointData.push(
                    {
                        geometry: {
                            type: 'Point',
                            coordinates: [toCenter.lng, toCenter.lat]
                        }
                    }
                );
                textData.push(
                    {
                        geometry: {
                            type: 'Point',
                            coordinates: [fromCenter.lng, fromCenter.lat]
                        },
                        text: qianxiData[i].from
                    }
                );
                textData.push(
                    {
                        geometry: {
                            type: 'Point',
                            coordinates: [toCenter.lng, toCenter.lat]
                        },
                        text: qianxiData[i].to
                    }
                );

                var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]);

                for (j = 0; j < curve.length; j++) {
                    timeData.push({
                        geometry: {
                            type: 'Point',
                            coordinates: curve[j]
                        },
                        count: 1,
                        time: j
                    });
                }

                lineData.push({
                    geometry: {
                        type: 'LineString',
                        coordinates: curve
                        //coordinates: [[fromCenter.lng, fromCenter.lat], [toCenter.lng, toCenter.lat]]
                    },
                    count: 30 * Math.random()
                });

            }

            var data = geojsonDataSet.get({
                filter: function (item) {

                    if (!citys[item.name]) {
                        return false;
                    }

                    item.count = citys[item.name];
                    return true;
                }
            });
            geojsonDataSet = new mapv.DataSet(data);
            mapv.leafletMapLayer(geojsonDataSet, geojsonOptions).addTo(map);

            var textDataSet = new mapv.DataSet(textData);

            var textOptions = {
                draw: 'text',
                font: '14px Arial',
                fillStyle: 'white',
                shadowColor: 'yellow',
                shadowBlue: 10,
                zIndex: 11,
                shadowBlur: 10
            };
            mapv.leafletMapLayer(textDataSet, textOptions).addTo(map);

            var lineDataSet = new mapv.DataSet(lineData);

            var lineOptions = {
                strokeStyle: 'rgba(255, 250, 50, 0.8)',
                shadowColor: 'rgba(255, 250, 50, 1)',
                shadowBlur: 20,
                lineWidth: 2,
                zIndex: 100,
                draw: 'simple'
            };
            mapv.leafletMapLayer(lineDataSet, lineOptions).addTo(map);

            var pointOptions = {
                fillStyle: 'rgba(254,175,3,0.7)',
                shadowColor: 'rgba(55, 50, 250, 0.5)',
                shadowBlur: 10,
                size: 5,
                zIndex: 10,
                draw: 'simple'
            };


            var pointDataSet = new mapv.DataSet(pointData);
            mapv.leafletMapLayer(pointDataSet, pointOptions).addTo(map);

            var timeDataSet = new mapv.DataSet(timeData);

            var timeOptions = {
                fillStyle: 'rgba(255, 250, 250, 0.5)',
                zIndex: 200,
                size: 2.5,
                animation: {
                    type: 'time',
                    stepsRange: {
                        start: 0,
                        end: 50
                    },
                    trails: 10,
                    duration: 2,
                },
                draw: 'simple'
            };

            mapv.leafletMapLayer(timeDataSet, timeOptions).addTo(map);
            //这一句是唯一和百度地图不同的一处
            // var mapvLayer = mapv.leafletMapLayer(dataSet, options).addTo(map);

        });



    </script>

</body>

</html>


文章版权声明：除非注明，否则均为 譬如朝露博客原创文章，转载或复制请以超链接形式并注明出处。