文档章节

leeflet+echars做基于地图的迁移

Z
 ZCedars
发布于 2018/06/15 11:37
字数 1485
阅读 64
收藏 0
  • 先看一下效果图

迁移图效果展示

  • 接下来我们看一下它的具体实现:
    • 首先导入必要的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>

© 著作权归作者所有

Z
粉丝 2
博文 30
码字总数 25291
作品 0
遵义
私信 提问
geoserver服务迁移小技巧

说不上技巧,比如说,要将geoserver从A服务器迁移到B服务器,上面所配置的style、store和layer都保持不变要怎么做? 每一次往geoserver里面添加store或是layer的时候,都会在geoserver目录下...

土匪强
2012/12/08
1K
4
百度地图2.0瓦片地址获取(窗口内瓦片)

获取百度地图窗口内的当前显示内容瓦片,可以通过地图对象的当前配置变量的计算重新得到,因此调整窗口位置、缩放,可以很容易的获取所需要的瓦片的下载地址。下载瓦片,然后部署到对应的路径...

于忠达
2016/03/02
9.3K
18
单用户博客程序--SDBlog

SDBlog是一款使用Python编写的运行在Google Appengine上的单用户免费博客程序。 SDBlog1.0Beta版的功能做下 介绍。 浏览显示 文章列表显示和摘要显示两种显示方式; 使用Google地图显示自己所...

匿名
2010/03/05
1K
0
基于nuxt和iview搭建OM后台管理系统实践(5)-高德地图地块气象数据展示组件的封装

目录结构 这是《基于nuxt和iview搭建OM后台管理系统实践》这一个系列文章的目录,大致思路如下: 简要介绍OM后台管理系统,以及开发环境 自行封装的公共组件,富文本quill[已完成]、地图、上...

愿爱无忧dk_
2018/07/11
0
0
极益发布地图插件,用于背景地图与业务地图

极益科技发布基于 NGOOS 的插件——地图(map),用于呈现各种直观的地图位置效果,该插件基于NGOOS2.0(TYPO3 8.X)。 该插件有两个功能: 作为背景地图,以地图做背景,更好的显示网页效果...

极益科技
2017/10/12
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

程序性能checklist

程序性能checklist

Moks角木
2分钟前
1
0
VUE 计算属性

本文转载于:专业的前端网站▶VUE 计算属性 1、示例代码 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>vue示例</title> </hea......

前端老手
3分钟前
1
0
快速搭建LNMT平台和环境部署

一、Tomcat部署的基本概念   1. CATALINA_HOME与CATALINA_BASE分别指什么?     CATALINA_HOME指的是Tomcat的安装目录,在Windows下Tomcat的安装目录如下:          bin:\\T...

网络小虾米
3分钟前
1
0
float浮动

float浮动 float浮动概念及原理: 文档流:文档流是文档中可显示对象在排列时所占用的位置。 加浮动的元素,会脱离文档流,会沿父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动...

studywin
25分钟前
1
0
实战项目-学成在线(一)

之前看的黑马程序员实战项目之一,打算以博客的形式写出来,也让自己重新温习一下。 1、项目背景 略(就是当前这东西很火,我们重点在开发,这些就略过) 2、功能模块 门户,学习中心,教学管...

lianbang_W
48分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部