leeflet+echars做基于地图的迁移

最新推荐文章于 2023-02-28 08:51:34 发布
最新推荐文章于 2023-02-28 08:51:34 发布
阅读量320 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/dwqdwd/blog/1830777
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

  • 先看一下效果图

迁移图效果展示

  • 接下来我们看一下它的具体实现：
    • 首先导入必要的js以及css包：
    	https://github.com/wandergis/leaflet-echarts3/blob/master/dist/main.min.js
	https://github.com/wandergis/leaflet-echarts3/tree/master/leaflet/leaflet.css
    • 设置承载地图的div
    	<div id="map"></div>
    • 然后在项目中设置页面的高宽
    	  html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
    }
    • 在js中找到对应的map的id,加载地图图层
    	var map = L.map('map');
var baseLayers = {
    "高德地图": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
        subdomains: "1234"
    }),
    '高德影像': L.layerGroup([L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
        subdomains: "1234"
    }), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}', {
        subdomains: "1234"
    })]),
    "立体地图": L.tileLayer('https://a.tiles.mapbox.com/v3/examples.c7d2024a/{z}/{x}/{y}.png', {
        attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC).  Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        key: 'BC9A493B41014CAABB98F0471D759707',
        styleId: 22677
    }),
    "Foursquare": L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
        attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC).  Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        key: 'BC9A493B41014CAABB98F0471D759707',
        styleId: 22677
    }),
    'GeoQ灰色底图': L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map)
};
L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
    attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC).  Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    key: 'BC9A493B41014CAABB98F0471D759707',
    styleId: 22677
});
var layercontrol = L.control.layers(baseLayers,{}, {
    position: "topleft"
}).addTo(map);
map.setView(L.latLng(37.550339, 104.114129), 4);
    • 加载迁移图图层
    	 var overlay = new L.echartsLayer3(map, echarts);
var chartsContainer = overlay.getEchartsContainer();
var myChart = overlay.initECharts(chartsContainer);
var geoCoordMap = {
    '上海': [121.4648, 31.2891],
    '长春': [125.8154, 44.2584],
    '广州': [113.5107, 23.2196],
    '大连': [122.2229, 39.4409],
    '南宁': [108.479, 23.1152],
    '包头': [110.3467, 41.4899],
    '昆明': [102.9199, 25.4663],
    '福州': [119.4543, 25.9222],
    '太原': [112.3352, 37.9413],
};
var BJData = [
    [{name: '北京'}, {name: '上海', value: 95}],
    [{name: '北京'}, {name: '广州', value: 90}],
    [{name: '北京'}, {name: '大连', value: 80}],
    [{name: '北京'}, {name: '南宁', value: 70}]
];
var SHData = [
    [{name: '上海'}, {name: '包头', value: 95}],
    [{name: '上海'}, {name: '昆明', value: 90}],
    [{name: '上海'}, {name: '广州', value: 80}]
];
var GZData = [
    [{name: '广州'}, {name: '福州', value: 95}],
    [{name: '广州'}, {name: '太原', value: 90}],
    [{name: '广州'}, {name: '长春', value: 80}]
];
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([{
                coord: fromCoord
            }, {
                coord: toCoord
            }]);
        }
    }
    return res;
};
var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [];
[['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
    series.push({
                name: item[0] + ' Top10',
                type: 'lines',
                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',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 15
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                name: item[0] + ' Top10',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                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 = {

// backgroundColor: '#404a59', title: { text: 'Leaflet扩展Echarts3之模拟迁徙', subtext: 'Develop By WanderGIS', left: 'center', textStyle: { color: '#fff' } }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', top: 'bottom', left: 'right', data: ['北京 Top10', '上海 Top10', '广州 Top10'], textStyle: { color: '#fff' }, selectedMode: 'single' }, geo: { map: '', label: { emphasis: { show: false } }, roam: true, itemStyle: { normal: { areaColor: '#323c48', borderColor: '#404a59' }, emphasis: { areaColor: '#2a333d' } } }, series: series }; // 使用刚指定的配置项和数据显示图表。 overlay.setOption(option); ```

  • demo 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Leaflet 加载 Echarts3</title>
    <link rel="stylesheet" href="https://github.com/wandergis/leaflet-echarts3/leaflet/leaflet.css">
    <style>
        html, body, #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
</head>
<body>
<div id="map"></div>
<script src="https://github.com/wandergis/leaflet-echarts3/dist/main.min.js"></script>
<script>
    var map = L.map('map');
    var baseLayers = {
        "高德地图": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: "1234"
        }),
        '高德影像': L.layerGroup([L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
            subdomains: "1234"
        }), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}', {
            subdomains: "1234"
        })]),
        "立体地图": L.tileLayer('https://a.tiles.mapbox.com/v3/examples.c7d2024a/{z}/{x}/{y}.png', {
            attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC).  Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            key: 'BC9A493B41014CAABB98F0471D759707',
            styleId: 22677
        }),
        "Foursquare": L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
            attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC).  Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
            key: 'BC9A493B41014CAABB98F0471D759707',
            styleId: 22677
        }),
        'GeoQ灰色底图': L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map)
    };
    L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
        attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC).  Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
        key: 'BC9A493B41014CAABB98F0471D759707',
        styleId: 22677
    });
    var layercontrol = L.control.layers(baseLayers,{}, {
        position: "topleft"
    }).addTo(map);
    map.setView(L.latLng(37.550339, 104.114129), 4);
    var overlay = new L.echartsLayer3(map, echarts);
    var chartsContainer = overlay.getEchartsContainer();
    var myChart = overlay.initECharts(chartsContainer);
    var geoCoordMap = {
        '上海': [121.4648, 31.2891],
        '长春': [125.8154, 44.2584],
        '广州': [113.5107, 23.2196],
        '大连': [122.2229, 39.4409],
        '南宁': [108.479, 23.1152],
        '包头': [110.3467, 41.4899],
        '昆明': [102.9199, 25.4663],
        '福州': [119.4543, 25.9222],
        '太原': [112.3352, 37.9413],
    };
    var BJData = [
        [{name: '北京'}, {name: '上海', value: 95}],
        [{name: '北京'}, {name: '广州', value: 90}],
        [{name: '北京'}, {name: '大连', value: 80}],
        [{name: '北京'}, {name: '南宁', value: 70}]
    ];
    var SHData = [
        [{name: '上海'}, {name: '包头', value: 95}],
        [{name: '上海'}, {name: '昆明', value: 90}],
        [{name: '上海'}, {name: '广州', value: 80}]
    ];
    var GZData = [
        [{name: '广州'}, {name: '福州', value: 95}],
        [{name: '广州'}, {name: '太原', value: 90}],
        [{name: '广州'}, {name: '长春', value: 80}]
    ];
    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([{
                    coord: fromCoord
                }, {
                    coord: toCoord
                }]);
            }
        }
        return res;
    };
    var color = ['#a6c84c', '#ffa022', '#46bee9'];
    var series = [];
    [['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
        series.push({
                    name: item[0] + ' Top10',
                    type: 'lines',
                    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',
                    zlevel: 2,
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        symbol: planePath,
                        symbolSize: 15
                    },
                    lineStyle: {
                        normal: {
                            color: color[i],
                            width: 1,
                            opacity: 0.4,
                            curveness: 0.2
                        }
                    },
                    data: convertData(item[1])
                },
                {
                    name: item[0] + ' Top10',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    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 = {
//        backgroundColor: '#404a59',
        title: {
            text: 'Leaflet扩展Echarts3之模拟迁徙',
            subtext: 'Develop By WanderGIS',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            top: 'bottom',
            left: 'right',
            data: ['北京 Top10', '上海 Top10', '广州 Top10'],
            textStyle: {
                color: '#fff'
            },
            selectedMode: 'single'
        },
        geo: {
            map: '',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#404a59'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series: series
    };
    // 使用刚指定的配置项和数据显示图表。
    overlay.setOption(option);
</script>
</body>
</html>

转载于:https://my.oschina.net/dwqdwd/blog/1830777

weixin_33795833
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts 迁徙图DEMO
11-02
Echarts 迁徙图DEMO
基于SuperMap的Echarts迁徙图
09-18
基于SuperMap的Echarts迁徙图，详尽的系统源码。可预览的系统例子。喜欢的朋友们能，在此基础之后扩展自己的应用。希望大家学习愉快。乐于分享，乐于开源。
71.（leaflet篇）leaflet流入迁徙图（canvas技术）.zip
02-21
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/123040900
leaflet 结合 Echarts4 实现迁徙图(附源码下载)
深蓝旭的博客
08-22 473
前言 leaflet 入门开发系列环境知识点了解： leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件，leaflet 的插件库，非常有用 内容概览 leaflet 结合 Echarts4 实现迁徙图源代码 demo 下载 本篇 demo 利用 leaflet api 结合 Echarts4 实现迁徙图功能，效果图如下： 实现思路：在leaflet 结合 Echarts4 实现散点图(附源码下载)基础上实现...
70.（leaflet篇）leaflet流出迁徙图（canvas技术）.zip
02-17
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122984140
73.（leaflet篇）leaflet流入流出迁徙图（canvas技术）（geojson版）.zip
03-04
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/123269035
SuperMap for leaflet 使用EchartsLayer加载echarts
最新发布
qq_37550440的博客
02-28 710
SuperMap for leaflet 使用EchartsLayer加载echarts
vue+leaflet集成echarts实现动态轨迹图
qq_40920553的博客
11-28 1927
vue+leaflet集成echarts实现动态轨迹图 2. 引入插件 3. 实现 leaflet自定义动态样式marker
Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图
BADAO_LIUMANG_QIZHI的博客
01-06 3416
场景 Leaflet快速入门与加载OSM显示地图： Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 Leaflet有很多插件，比如地图上显示Echarts的迁徙图的插件leaflet-echarts 插件地址： https://github.com/wandergis/leaflet-echarts 在线演示地址: Baidu migration Echarts Map By Leaflet 注： 博客：BADAO_LIUMA
Leaflet笔记-Leaflet与echarts结合使用（在地图上绘图表）
IT1995的博客
09-10 1万+
目录 基本概念 代码与实例 基本概念 在本地地图上绘制图表，图表经过响应弹出来。 想想真是令人兴奋的事情，到时候用Qt的Widget和QGraphicsView结合QWebEngine搞一层。来一个科技感十足的魔幻页面。 下面来说明下这个逻辑。 使用Leaflet的WMTS接口请求本地Geoserver服务，从而获取数据。然后再把echarts放到Leaflet的响应事件...
Leaflet集成Echarts示例
12-08
该资源包括修改后的Echarts 4.2.0 版本的源代码，Leaflet 1.3.4版本源代码，基于Leaflet扩展的代码以及一个散点图demo
五分钟学GIS | 快速认识Leaflet
SuperMap技术控
10-31 1万+
Leaflet是近几年新兴的广受欢迎的前端地图可视化开源框架，在Github上有高达19000多颗星，比老牌开源地图框架OpenLayers还要多哦，其火热程度可见一斑。Leaflet以简单易用高效为开发理念，设计轻巧灵活，非常易于理解和上手，这也是它被众多开发喜爱的原因之一。
leaflet离线地图(百度)+vue+echarts
weixin_40992252的博客
11-09 4073
leaflet离线地图(百度)+vue+echarts
leaflet的使用总结
rock_23的博客
09-20 574
各位博友，这篇是针对自己的项目中的产品需求所做的总结，你们可以根据自己项目进行其他的资料查询，只能说有些部分的用法是差不多的，可根据这篇博客来寻找一些leaflet的使用使用灵感。 需求说明： 安装： npm install react react-dom leaflet npm install react-leaflet npm install @supermap/iclient-leaflet npm install leaflet-heatmap npm install proj4 npm insta
在Leaflet地图上集成Echarts
wml00000的博客
12-11 9682
需求背景： 现在我要在地图上加上Echarts的散点图还有线集，看起来就很牛B的那种。上效果图： 需求分析： 我先看了看Echarts官网上有提供加载地图的例子，主要包括三种方式：         1.加载js格式的地图文件；         2.加载json格式的地图文件;         3.通过配置项bmap,就是百度地图；  参考地址：https://blog.csdn.n...
mapbox样式规范(style)
Mozifei73的博客
01-16 9131
mapbox样式规范(style)
openlayers在线地图：高德地图、天地图、谷歌、geoq(智图)
热门推荐
The Words OF GIANT
04-25 1万+
-----------------2019年修订 天地图服务接口调用需要申请开发许可（Key）（自己去官网注册），添加到请求地址后即可 ----------------------------------------------------------------------------------------------------------------------------------...
Leaflet工作笔记-GIS地图上构造echarts的3D图
IT1995的博客
02-10 8235
这里要实现的是这样的效果： 在地图上有一个柱子，3D的，直接显示，而不是使用什么label或者点击，在界面上显示。 原理如下： 1.使用leaflet的marker标签，插入一个html； 2.在这个html中设置css，将其background-color设置为transparent；并设置ID 3.把echarts直接初始化到刚刚那个ID上面 源码如下： <!DOCT...
igraph的中国/世界地图可视化---用leaflet实现
建模分析师胡选来
03-03 2328
/*********地图上的图可视化************/ #中国地图绘制 library(raster) library(igraph) china &lt;- getData('GADM', country='CN', level=1) df&lt;-data.frame("from" = c("Zhengzhou", "Beijing"), "to"= c("Beijing", &q
leaflet实现动态地图风场效果
此爱如少年
07-02 1万+
leaflet风场插件 首先，这里需要用到一款leaflet插件，它是一个js文件，插件地址： 有了它，一切都变得简单。 示例代码 // 初始化地图，返回一个map对象 function initMap(){ var Esri_DarkGreyCanvas = L.tileLayer( "http://{s}.sm.mapstack.stamen.com/" + ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值