首页 / 浏览问题 / WebGIS / 问题详情
echarts迁徙图 坐标系是平面坐标系 但是结果出不来
9EXP 2021年05月11日
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_geoline"></title>

</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
    <script type="text/javascript" include="echarts" src="dist/leaflet/include-leaflet.js"></script>
    <script type="text/javascript">
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var map, url = "http://localhost:8090/iserver/services/map-shixiditu2/rest/maps/quanguo@SuperMapCloud";
        map = L.map('map', {
            crs: L.CRS.NonEarthCRS({
                bounds: L.bounds([12909321.69, 3447233.77], [12910726.22, 3448213.12]),
                origin: L.point(12909321.69, 3448213.12)
            }),
            center: [3447716.72, 12910078.76],
            maxZoom: 18,
            zoom: 2
        });
        L.supermap.tiledMapLayer(url).addTo(map);
        var geoCoordMap = {
            '广州': [3447542.22718907, 12909875.2556995],
            '福州': [3447484.89941786, 12909929.000485]

        };

        var GZData = [
            [{
                name: '广州'
            }, {
                name: '福州',
                value: 95
            }]

        ];

        var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

        var convertData = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [fromCoord, toCoord]
                    });
                }
            }
            return res;
        };

        var color = ['#a6c84c', '#ffa022', '#46bee9'];
        var series = [];
        [
            ['广州', GZData]
        ].forEach(function(item, i) {
            series.push({
                name: item[0] + ' Top10',
                type: 'lines',
                coordinateSystem: 'leaflet',
                zlevel: 1,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: '#fff',
                    symbolSize: 3
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 0,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                name: item[0] + ' Top10',
                type: 'lines',
                coordinateSystem: 'leaflet',
                zlevel: 2,
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbolSize: 15
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            }, {
                name: item[0] + ' Top10',
                type: 'effectScatter',
                coordinateSystem: 'leaflet',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function(val) {
                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },
                data: item[1].map(function(dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
        });

        option = {
            title: {
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                top: 'top',
                left: 'right',
                data: ['北京 Top10', '上海 Top10', '广州 Top10'],
                textStyle: {
                    color: '#fff'
                },
                selectedMode: 'multiple',
                backgroundColor: 'rgba(128, 128, 128, 0.5)'
            },

            series: series
        };
        L.supermap.echartsLayer(option).addTo(map);
    </script>
</body>

</html>

示例代码我改了坐标和底图,结果没有错误但是出不来,是平面坐标系做不了嘛 还是有地方我没改对

1个回答

你好,测试平面坐标系是可以的,可能是坐标的问题,建议先检查一下你的坐标


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_geoline"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="echarts" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var map, url = host + "/iserver/services/map-changchun/rest/maps/长春市区图";
    map = L.map('map', {
        crs: L.CRS.NonEarthCRS({
            bounds: L.bounds([48.4, -7668.25], [8958.85, -55.58]),
            origin: L.point(48.4, -55.58)
        }),
        center: [-3375, 5105],
        maxZoom: 18,
        zoom: 6
    });
    L.supermap.tiledMapLayer(url).addTo(map);
    var geoCoordMap = {
        '上海': [100, -100],
        '北京': [8000, -6000],
    };

    var BJData = [
        [{name: '北京'}, {name: '上海', value: 95}]
        
    ];

    

    var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMap[dataItem[0].name];
            var toCoord = geoCoordMap[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push({
                    fromName: dataItem[0].name,
                    toName: dataItem[1].name,
                    coords: [fromCoord, toCoord]
                });
            }
        }
        return res;
    };

    var color = ['#a6c84c', '#ffa022', '#46bee9'];
    var series = [];
    [['北京', BJData]].forEach(function (item, i) {
        series.push({
                name: item[0] + ' Top10',
                type: 'lines',
                coordinateSystem: 'leaflet',
                zlevel: 1,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: '#fff',
                    symbolSize: 3
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 0,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                name: item[0] + ' Top10',
                type: 'lines',
                coordinateSystem: 'leaflet',
                zlevel: 2,
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 15
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                name: item[0] + ' Top10',
                type: 'effectScatter',
                coordinateSystem: 'leaflet',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: function (val) {
                    return val[2] / 8;
                },
                itemStyle: {
                    normal: {
                        color: color[i]
                    }
                },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
    });

    option = {
        title: {
            text: resources.text_geoline,
            subtext: resources.text_fictitiouData,
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            top: 'top',
            left: 'right',
            data: ['北京 Top10', '上海 Top10', '广州 Top10'],
            textStyle: {
                color: '#fff'
            },
            selectedMode: 'multiple',
            backgroundColor: 'rgba(128, 128, 128, 0.5)'
        },

        series: series
    };
    L.supermap.echartsLayer(option).addTo(map);
</script>
</body>
</html>

865EXP 2021年05月11日
...