关于实现离线地图的几种方式

Joker_zjy

已于 2023-10-12 08:46:48 修改

阅读量3.5k

点赞数 1

文章标签： java javascript jquery css vue.js html

于 2023-10-11 16:52:54 首次发布

本文链接：https://blog.csdn.net/weixin_57466771/article/details/133772840

版权

一、使用Leaflet+瓦片地图

1.引入 Leaflet 库：

在HTML文件中引入Leaflet库。

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>

2.创建地图容器：

在HTML中创建一个<div>元素，用于容纳Leaflet地图。

<div id="map" style="width: 1200px; height: 630px;"></div>

3.初始化地图：

在JavaScript中，使用Leaflet初始化地图，并设置地图的中心点和缩放级别。

var map = L.map('map').setView([22.48972, 114.03259], 9);

其中 [22.48972, 114.03259]为中心点的经纬度，9为初始缩放级别

4.添加瓦片图层：

Leaflet支持添加各种瓦片图层，包括OpenStreetMap、Google Maps等。可以通过提供瓦片图层的URL来添加图层。

L.tileLayer('/static/path/mapabc/roadmap/{z}/{x}/{y}.png', {
        maxZoom: 18,
    }).addTo(this.map);

maxZoom为最大缩放级别

5.添加其他互动

//添加标注点
    L.marker([22.83589, 113.25484], {
        title: '清晖园',
        clickable: true, // 是否可以点击
        draggable: false, // 是否可以拖拽
    }).on('click', (e) => {
        // 点击事件
        console.log('e----', e)
        console.log('"点击图标"----', '点击图标')
    }).bindPopup(`<span style="color:black;">清晖园，位于广东省佛山市顺德区大良街道清晖路23号，是始建于明代的岭南园林建筑，占地面积为2.2万平方米，与佛山梁园、番禺余荫山房、东莞可园并称为岭南四大园林清晖园主体建筑包括有船厅、碧溪草堂、澄漪亭、惜阴书屋、真砚斋、状元堂等。园内植物200多种，且有多棵百年古树、中外名木。清晖园曾为状元府邸，也曾为大良龙氏的家园，这些居住在清晖园的家族走出了不少历史名人。清晖园是中国十大名园、广东四大名园之一，还是中华文化传承基地，佛山新八景之一，顺德新十景之一，其构筑精巧，布局紧凑，建筑艺术颇高，建筑物形式轻巧灵活，雅读朴素，庭园空间主次分明，结构清晰。利用碧水、绿树、古墙、漏窗、石山、小桥、曲廊等与亭台楼阁交互融合，集中国古代建筑、园林、雕刻、诗书、灰雕等艺术于一身。清晖园的文物有李兆洛、李文田、何绍基等大家的书法。2007年12月7日，清晖园被国家旅游局批准为国家AAAA级旅游景区，2013年，国务院核定公布清晖园为第七批全国重点文物保护单位。</span>`)
      .openPopup() // 由于要取当前标点信息，下边添加信息用 (e)=>{} 而不是直接写模板字符串
      .addTo(this.map) // 为了方便清除标点，下边添加标注点不用该方法

    L.marker([23.03, 113.18], {
        title: '我是可拖动的点',
        clickable: true, // 是否可以点击
        draggable: true, // 是否可以拖拽
    }).on('click', (e) => {
        // 点击事件
        console.log('e----', e)
        console.log('"点击图标"----', '点击图标')
    }).addTo(this.map)

    var circle = L.circle([22.812321, 113.152992], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500
    }).on('click', (e) => {
        // 点击事件
        console.log('e----', e)
        console.log('"点击图标"----', '点击图标')
    }).bindPopup(`<span style="color:black;">逢简水乡，地处广东省佛山市顺德区杏坛镇北端，面积5.2平方千米，是广东四大水乡之一，有广东“小周庄”之称。 [3] [6]作为顺德早期聚居地之一，逢简的历史最早可追溯到西汉，后来发展成一方集市，南宋嘉定年间之前，已有先民迁入该地居住而渐成村落。逢简水乡内文物古迹遍布，有始建于宋朝的广东省文物保护单位明远桥、始建于明朝的广东省文物保护单位刘氏大宗祠，以及佛山市级文物保护单位巨济桥、清康熙皇帝赐建的金鳌桥，清光绪皇帝御赐金桂。同时，古庙宇、古祠堂、古民居、古树众多，历史文化积淀深厚。 [2] [4]2015年，逢简水乡被评为国家AAA级旅游景区。</span>`)
      .openPopup() // 由于要取当前标点信息，下边添加信息用 (e)=>{} 而不是直接写模板字符串
      .addTo(this.map)

    var polygon = L.polygon([
        [22.987472, 113.268586],
        [22.812321, 113.152992],
        [22.83589, 113.25484]
    ]).addTo(this.map);

实现效果：

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>leaflet</title>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
</head>
<body>
<!-- Container for the map -->
<div id="map" style="width: 1200px; height: 630px;"></div>

<script type="text/javascript">
    // 创建Leaflet地图
    var map = L.map('map').setView([22.48972, 114.03259], 9);

    // 添加瓦片地图图层
    L.tileLayer('/static/path/mapabc/roadmap/{z}/{x}/{y}.png', {
        maxZoom: 18,
    }).addTo(this.map);

    //添加标注点
    L.marker([22.91191, 113.21789]).addTo(this.map);
    L.marker([23.03, 113.18]).addTo(this.map);

</script>

</body>
</html>

二、使用ECharts加载离线的 GeoJSON 地图数据

1.引入 ECharts 库

在页面中引入 ECharts 库。

<script src="/static/js/echarts.min.js"></script>

2.获取 GeoJSON 数据

3.实现效果

4.具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>geojson</title>
    <!-- Include ECharts library -->
    <script src="/static/js/echarts.min.js"></script>
</head>
<body>
<!-- Container for the map -->
<div id="map" style="width: 1260px; height: 630px;"></div>

<script type="text/javascript">

    // Create an ECharts instance and bind it to the 'map' div
    var chart = echarts.init(document.getElementById('map'));

    // Define your custom map data (GeoJSON format)
    var customMapData = ;//放入具体的GeoJSON数据

    // Register the custom map in ECharts
    echarts.registerMap('custom_map', customMapData);

    // ECharts configuration and data setup
    var option = {
        title: {
            text: 'ECharts Map with Custom Map',
        },
        tooltip: {
            trigger: 'item',
        },
        geo: {
            map: 'custom_map', // 此处的 'custom_map' 是自定义地图的名称
            roam: true, // 启用缩放和拖动功能
        },
        series: [
            {
                type: 'map',
                map: 'custom_map', // Use the registered custom map ID
                label: {
                    show: true,
                },
                // Your ECharts map series configuration here
            },
        ],
    };

    // Set the ECharts options
    chart.setOption(option);
</script>
</body>
</html>

三、使用ECharts实现

具体实现步骤和（二）相似

以下有一些示例可以参考：

1.ECharts社区：

series-line折线图 - makeapie echarts社区图表可视化案例

2.ECharts官方示例：

Examples - Apache ECharts

实现效果：

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>离线地图</title>
    <!-- 引入 ECharts 的 JavaScript 文件 -->
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/echarts.js"></script>
    <script src="/static/js/china.js"></script>
</head>
<body>
<div id="map" style="width: 1260px; height: 630px;"></div>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('map'));
    //var name_title = "中国人民大学2017年各省市计划录取人数"
    //var subname = '上海、浙江无文理科录取人数'
    //var nameColor = " rgb(55, 75, 113)"
    //var name_fontFamily = '等线'
    //var subname_fontSize = 15
    //var name_fontSize = 18
    var mapName = 'china'
    var data = [
        {name:"北京",value:177},
        {name:"天津",value:42},
        {name:"河北",value:102},
        {name:"山西",value:81},
        {name:"内蒙古",value:47},
        {name:"辽宁",value:67},
        {name:"吉林",value:82},
        {name:"黑龙江",value:66},
        {name:"上海",value:24},
        {name:"江苏",value:92},
        {name:"浙江",value:114},
        {name:"安徽",value:109},
        {name:"福建",value:116},
        {name:"江西",value:91},
        {name:"山东",value:119},
        {name:"河南",value:137},
        {name:"湖北",value:116},
        {name:"湖南",value:114},
        {name:"重庆",value:91},
        {name:"四川",value:125},
        {name:"贵州",value:62},
        {name:"云南",value:83},
        {name:"西藏",value:9},
        {name:"陕西",value:80},
        {name:"甘肃",value:56},
        {name:"青海",value:10},
        {name:"宁夏",value:18},
        {name:"新疆",value:67},
        {name:"广东",value:123},
        {name:"广西",value:59},
        {name:"海南",value:14},
    ];

    var geoCoordMap = {};
    var toolTipData = [
        {name:"北京",value:[{name:"文科",value:95},{name:"理科",value:82}]},
        {name:"天津",value:[{name:"文科",value:22},{name:"理科",value:20}]},
        {name:"河北",value:[{name:"文科",value:60},{name:"理科",value:42}]},
        {name:"山西",value:[{name:"文科",value:40},{name:"理科",value:41}]},
        {name:"内蒙古",value:[{name:"文科",value:23},{name:"理科",value:24}]},
        {name:"辽宁",value:[{name:"文科",value:39},{name:"理科",value:28}]},
        {name:"吉林",value:[{name:"文科",value:41},{name:"理科",value:41}]},
        {name:"黑龙江",value:[{name:"文科",value:35},{name:"理科",value:31}]},
        {name:"上海",value:[{name:"文科",value:12},{name:"理科",value:12}]},
        {name:"江苏",value:[{name:"文科",value:47},{name:"理科",value:45}]},
        {name:"浙江",value:[{name:"文科",value:57},{name:"理科",value:57}]},
        {name:"安徽",value:[{name:"文科",value:57},{name:"理科",value:52}]},
        {name:"福建",value:[{name:"文科",value:59},{name:"理科",value:57}]},
        {name:"江西",value:[{name:"文科",value:49},{name:"理科",value:42}]},
        {name:"山东",value:[{name:"文科",value:67},{name:"理科",value:52}]},
        {name:"河南",value:[{name:"文科",value:69},{name:"理科",value:68}]},
        {name:"湖北",value:[{name:"文科",value:60},{name:"理科",value:56}]},
        {name:"湖南",value:[{name:"文科",value:62},{name:"理科",value:52}]},
        {name:"重庆",value:[{name:"文科",value:47},{name:"理科",value:44}]},
        {name:"四川",value:[{name:"文科",value:65},{name:"理科",value:60}]},
        {name:"贵州",value:[{name:"文科",value:32},{name:"理科",value:30}]},
        {name:"云南",value:[{name:"文科",value:42},{name:"理科",value:41}]},
        {name:"西藏",value:[{name:"文科",value:5},{name:"理科",value:4}]},
        {name:"陕西",value:[{name:"文科",value:38},{name:"理科",value:42}]},
        {name:"甘肃",value:[{name:"文科",value:28},{name:"理科",value:28}]},
        {name:"青海",value:[{name:"文科",value:5},{name:"理科",value:5}]},
        {name:"宁夏",value:[{name:"文科",value:10},{name:"理科",value:8}]},
        {name:"新疆",value:[{name:"文科",value:36},{name:"理科",value:31}]},
        {name:"广东",value:[{name:"文科",value:63},{name:"理科",value:60}]},
        {name:"广西",value:[{name:"文科",value:29},{name:"理科",value:30}]},
        {name:"海南",value:[{name:"文科",value:8},{name:"理科",value:6}]},
    ];

    /*获取地图数据*/
    myChart.showLoading();
    var mapFeatures = echarts.getMap(mapName).geoJson.features;
    myChart.hideLoading();
    mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;

    });

    // console.log("============geoCoordMap===================")
    // console.log(geoCoordMap)
    // console.log("================data======================")
    console.log(data)
    console.log(toolTipData)
    var max = 480,
        min = 9; // todo
    var maxSize4Pin = 100,
        minSize4Pin = 20;

    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                });
            }
        }
        return res;
    };
    option = {
        /*title: {
            text: name_title,
            subtext: subname,
            x: 'center',
            textStyle: {
                color: nameColor,
                fontFamily: name_fontFamily,
                fontSize: name_fontSize
            },
            subtextStyle:{
                fontSize:subname_fontSize,
                fontFamily:name_fontFamily
            }
        },*/
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                if (typeof(params.value)[2] == "undefined") {
                    var toolTiphtml = ''
                    for(var i = 0;i<toolTipData.length;i++){
                        if(params.name==toolTipData[i].name){
                            toolTiphtml += toolTipData[i].name+':<br>'
                            for(var j = 0;j<toolTipData[i].value.length;j++){
                                toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
                            }
                        }
                    }
                    console.log(toolTiphtml)
                    // console.log(convertData(data))
                    return toolTiphtml;
                } else {
                    var toolTiphtml = ''
                    for(var i = 0;i<toolTipData.length;i++){
                        if(params.name==toolTipData[i].name){
                            toolTiphtml += toolTipData[i].name+':<br>'
                            for(var j = 0;j<toolTipData[i].value.length;j++){
                                toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
                            }
                        }
                    }
                    console.log(toolTiphtml)
                    // console.log(convertData(data))
                    return toolTiphtml;
                }
            }
        },
        // legend: {
        //     orient: 'vertical',
        //     y: 'bottom',
        //     x: 'right',
        //     data: ['credit_pm2.5'],
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        visualMap: {
            show: true,
            min: 0,
            max: 200,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {
                // color: ['#3B5077', '#031525'] // 蓝黑
                // color: ['#ffc0cb', '#800080'] // 红紫
                // color: ['#3C3B3F', '#605C3C'] // 黑绿
                // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                // color: ['#23074d', '#cc5333'] // 紫红
                color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#1488CC', '#2B32B2'] // 浅蓝
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿

            }
        },
        /*工具按钮组*/
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //         dataView: {
        //             readOnly: false
        //         },
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },
        geo: {
            show: true,
            map: mapName,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7',
                }
            }
        },
        series: [{
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function(val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#05C3F9'
                }
            }
        },
            {
                type: 'map',
                map: mapName,
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#3B5077',
                    },
                    emphasis: {
                        areaColor: '#2B91B7'
                    }
                },
                animation: false,
                data: data
            },
            {
                name: '点',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin', //气泡
                symbolSize: function(val) {
                    var a = (maxSize4Pin - minSize4Pin) / (max - min);
                    var b = minSize4Pin - a * min;
                    b = maxSize4Pin - a * max;
                    return a * val[2] + b;
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 9,
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#F62157', //标志颜色
                    }
                },
                zlevel: 6,
                data: convertData(data),
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data.sort(function(a, b) {
                    return b.value - a.value;
                }).slice(0, 5)),
                symbolSize: function(val) {
                    return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'yellow',
                        shadowBlur: 10,
                        shadowColor: 'yellow'
                    }
                },
                zlevel: 1
            },

        ]
    };
    myChart.setOption(option);
</script>

</body>
</html>

四、综合实现

当你学会了以上三种方式之后，就可以自己实现如下图的类似效果了

具体的HTML代码如下，其他css、js就不放出来了

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>时实客流量监控中心</title>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/js.js"></script>
    <script src="/static/js/echarts.js"></script>
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/china.js"></script>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
    <link rel="stylesheet" href="/static/css/ckin.css">
    <link rel="stylesheet" href="/static/css/style.css">

    <script>
        $(window).load(function () {
            $(".loading").fadeOut()
        })
    </script>
</head>
<body>
<div class="loading">
    <div class="loadbox"><img src="/static/images/loading.gif"> 页面加载中...</div>
</div>

<div class="mainbox">
    <ul class="clearfix nav1">
        <li style="width: 25%">
            <div class="box">
                <div class="tit"><span>数据分析</span></div>
                <div id="bintu" class="boxnav" style=" height: 907px;"></div>
            </div>
            <div class="box">
                <div class="tit"><span>中国地图</span></div>
                <div id="china-map" class="boxnav" style=" height: 300px;">
                </div>
            </div>

        </li>
        <li style="width: 50%">
            <div class="tongji" style="height: 120px;">
                <h1>时实客流量<span>9104</span>人</h1>
                <ul>
                    <li>对比次时昨日累计：<span>2</span>人</li>
                    <li>同比增长：<span>2%</span></li>
                    <li>安装设备：<span>94</span></li>
                    <li>在线设备：<span>62</span></li>
                </ul>
            </div>

            <div id="map" class="box mapbox" style="width: 100%; height: 818px;"></div>

            <div>
                <div class="box" style="float: left; width: 49.5%;  padding: 0 15px; ">
                    <div class="tit"><span>男女比例</span></div>
                    <div id="echart1" style="height: 300px;"></div>
                </div>
                <div class="box" style="float: right; width: 49.5%;padding: 0 15px; ">
                    <div class="tit"><span>各年龄段比例</span></div>
                    <div id="echart2" style="height: 300px;"></div>
                </div>

            </div>
        </li>
        <li style="width: 25%">

            <div class="box box2">
                <div class="tit"><span>数据分析</span></div>
                <div id="main" class="boxnav" style=" height: 907px;"></div>
            </div>

            <div class="box">
                <div class="tit"><span>到访次数</span></div>
                <div class="boxnav" id="echart3" style=" height: 300px;"></div>
            </div>

        </li>

    </ul>
</div>

<script src="/static/js/ckin.js"></script>

<script type="text/javascript">
    // 创建Leaflet地图
    var map = L.map('map').setView([22.48972, 114.03259], 9);

    // 添加瓦片地图图层
    L.tileLayer('/static/path/mapabc/roadmap/{z}/{x}/{y}.png', {
        maxZoom: 18,
    }).addTo(map);

    //添加标注点
    L.marker([22.83589, 113.25484], {
        title: '清晖园',
        clickable: true, // 是否可以点击
        draggable: false, // 是否可以拖拽
    }).on('click', (e) => {
        // 点击事件
        console.log('e----', e)
        console.log('"点击图标"----', '点击图标')
    }).bindPopup(`<span style="color:black;">清晖园，位于广东省佛山市顺德区大良街道清晖路23号，是始建于明代的岭南园林建筑，占地面积为2.2万平方米，与佛山梁园、番禺余荫山房、东莞可园并称为岭南四大园林清晖园主体建筑包括有船厅、碧溪草堂、澄漪亭、惜阴书屋、真砚斋、状元堂等。园内植物200多种，且有多棵百年古树、中外名木。清晖园曾为状元府邸，也曾为大良龙氏的家园，这些居住在清晖园的家族走出了不少历史名人。清晖园是中国十大名园、广东四大名园之一，还是中华文化传承基地，佛山新八景之一，顺德新十景之一，其构筑精巧，布局紧凑，建筑艺术颇高，建筑物形式轻巧灵活，雅读朴素，庭园空间主次分明，结构清晰。利用碧水、绿树、古墙、漏窗、石山、小桥、曲廊等与亭台楼阁交互融合，集中国古代建筑、园林、雕刻、诗书、灰雕等艺术于一身。清晖园的文物有李兆洛、李文田、何绍基等大家的书法。2007年12月7日，清晖园被国家旅游局批准为国家AAAA级旅游景区，2013年，国务院核定公布清晖园为第七批全国重点文物保护单位。</span>`)
      .openPopup() // 由于要取当前标点信息，下边添加信息用 (e)=>{} 而不是直接写模板字符串
      .addTo(this.map) // 为了方便清除标点，下边添加标注点不用该方法

    L.marker([23.03, 113.18], {
        title: '我是可拖动的点',
        clickable: true, // 是否可以点击
        draggable: true, // 是否可以拖拽
    }).on('click', (e) => {
        // 点击事件
        console.log('e----', e)
        console.log('"点击图标"----', '点击图标')
    }).addTo(this.map)

    var circle = L.circle([22.812321, 113.152992], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500
    }).on('click', (e) => {
        // 点击事件
        console.log('e----', e)
        console.log('"点击图标"----', '点击图标')
    }).bindPopup(`<span style="color:black;">逢简水乡，地处广东省佛山市顺德区杏坛镇北端，面积5.2平方千米，是广东四大水乡之一，有广东“小周庄”之称。 [3] [6]作为顺德早期聚居地之一，逢简的历史最早可追溯到西汉，后来发展成一方集市，南宋嘉定年间之前，已有先民迁入该地居住而渐成村落。逢简水乡内文物古迹遍布，有始建于宋朝的广东省文物保护单位明远桥、始建于明朝的广东省文物保护单位刘氏大宗祠，以及佛山市级文物保护单位巨济桥、清康熙皇帝赐建的金鳌桥，清光绪皇帝御赐金桂。同时，古庙宇、古祠堂、古民居、古树众多，历史文化积淀深厚。 [2] [4]2015年，逢简水乡被评为国家AAA级旅游景区。</span>`)
      .openPopup() // 由于要取当前标点信息，下边添加信息用 (e)=>{} 而不是直接写模板字符串
      .addTo(this.map)

    var polygon = L.polygon([
        [22.987472, 113.268586],
        [22.812321, 113.152992],
        [22.83589, 113.25484]
    ]).addTo(this.map);

</script>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('china-map'));
    //var name_title = "中国人民大学2017年各省市计划录取人数"
    //var subname = '上海、浙江无文理科录取人数'
    //var nameColor = " rgb(55, 75, 113)"
    //var name_fontFamily = '等线'
    //var subname_fontSize = 15
    //var name_fontSize = 18
    var mapName = 'china'
    var data = [
        {name: "北京", value: 177},
        {name: "天津", value: 42},
        {name: "河北", value: 102},
        {name: "山西", value: 81},
        {name: "内蒙古", value: 47},
        {name: "辽宁", value: 67},
        {name: "吉林", value: 82},
        {name: "黑龙江", value: 66},
        {name: "上海", value: 24},
        {name: "江苏", value: 92},
        {name: "浙江", value: 114},
        {name: "安徽", value: 109},
        {name: "福建", value: 116},
        {name: "江西", value: 91},
        {name: "山东", value: 119},
        {name: "河南", value: 137},
        {name: "湖北", value: 116},
        {name: "湖南", value: 114},
        {name: "重庆", value: 91},
        {name: "四川", value: 125},
        {name: "贵州", value: 62},
        {name: "云南", value: 83},
        {name: "西藏", value: 9},
        {name: "陕西", value: 80},
        {name: "甘肃", value: 56},
        {name: "青海", value: 10},
        {name: "宁夏", value: 18},
        {name: "新疆", value: 67},
        {name: "广东", value: 123},
        {name: "广西", value: 59},
        {name: "海南", value: 14},
    ];

    var geoCoordMap = {};
    var toolTipData = [
        {name: "北京", value: [{name: "文科", value: 95}, {name: "理科", value: 82}]},
        {name: "天津", value: [{name: "文科", value: 22}, {name: "理科", value: 20}]},
        {name: "河北", value: [{name: "文科", value: 60}, {name: "理科", value: 42}]},
        {name: "山西", value: [{name: "文科", value: 40}, {name: "理科", value: 41}]},
        {name: "内蒙古", value: [{name: "文科", value: 23}, {name: "理科", value: 24}]},
        {name: "辽宁", value: [{name: "文科", value: 39}, {name: "理科", value: 28}]},
        {name: "吉林", value: [{name: "文科", value: 41}, {name: "理科", value: 41}]},
        {name: "黑龙江", value: [{name: "文科", value: 35}, {name: "理科", value: 31}]},
        {name: "上海", value: [{name: "文科", value: 12}, {name: "理科", value: 12}]},
        {name: "江苏", value: [{name: "文科", value: 47}, {name: "理科", value: 45}]},
        {name: "浙江", value: [{name: "文科", value: 57}, {name: "理科", value: 57}]},
        {name: "安徽", value: [{name: "文科", value: 57}, {name: "理科", value: 52}]},
        {name: "福建", value: [{name: "文科", value: 59}, {name: "理科", value: 57}]},
        {name: "江西", value: [{name: "文科", value: 49}, {name: "理科", value: 42}]},
        {name: "山东", value: [{name: "文科", value: 67}, {name: "理科", value: 52}]},
        {name: "河南", value: [{name: "文科", value: 69}, {name: "理科", value: 68}]},
        {name: "湖北", value: [{name: "文科", value: 60}, {name: "理科", value: 56}]},
        {name: "湖南", value: [{name: "文科", value: 62}, {name: "理科", value: 52}]},
        {name: "重庆", value: [{name: "文科", value: 47}, {name: "理科", value: 44}]},
        {name: "四川", value: [{name: "文科", value: 65}, {name: "理科", value: 60}]},
        {name: "贵州", value: [{name: "文科", value: 32}, {name: "理科", value: 30}]},
        {name: "云南", value: [{name: "文科", value: 42}, {name: "理科", value: 41}]},
        {name: "西藏", value: [{name: "文科", value: 5}, {name: "理科", value: 4}]},
        {name: "陕西", value: [{name: "文科", value: 38}, {name: "理科", value: 42}]},
        {name: "甘肃", value: [{name: "文科", value: 28}, {name: "理科", value: 28}]},
        {name: "青海", value: [{name: "文科", value: 5}, {name: "理科", value: 5}]},
        {name: "宁夏", value: [{name: "文科", value: 10}, {name: "理科", value: 8}]},
        {name: "新疆", value: [{name: "文科", value: 36}, {name: "理科", value: 31}]},
        {name: "广东", value: [{name: "文科", value: 63}, {name: "理科", value: 60}]},
        {name: "广西", value: [{name: "文科", value: 29}, {name: "理科", value: 30}]},
        {name: "海南", value: [{name: "文科", value: 8}, {name: "理科", value: 6}]},
    ];

    /*获取地图数据*/
    myChart.showLoading();
    var mapFeatures = echarts.getMap(mapName).geoJson.features;
    myChart.hideLoading();
    mapFeatures.forEach(function (v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;

    });

    // console.log("============geoCoordMap===================")
    // console.log(geoCoordMap)
    // console.log("================data======================")
    console.log(data)
    console.log(toolTipData)
    var max = 480,
        min = 9; // todo
    var maxSize4Pin = 100,
        minSize4Pin = 20;

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                });
            }
        }
        return res;
    };
    option = {
        /*title: {
            text: name_title,
            subtext: subname,
            x: 'center',
            textStyle: {
                color: nameColor,
                fontFamily: name_fontFamily,
                fontSize: name_fontSize
            },
            subtextStyle:{
                fontSize:subname_fontSize,
                fontFamily:name_fontFamily
            }
        },*/
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                if (typeof (params.value)[2] == "undefined") {
                    var toolTiphtml = ''
                    for (var i = 0; i < toolTipData.length; i++) {
                        if (params.name == toolTipData[i].name) {
                            toolTiphtml += toolTipData[i].name + ':<br>'
                            for (var j = 0; j < toolTipData[i].value.length; j++) {
                                toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "<br>"
                            }
                        }
                    }
                    console.log(toolTiphtml)
                    // console.log(convertData(data))
                    return toolTiphtml;
                } else {
                    var toolTiphtml = ''
                    for (var i = 0; i < toolTipData.length; i++) {
                        if (params.name == toolTipData[i].name) {
                            toolTiphtml += toolTipData[i].name + ':<br>'
                            for (var j = 0; j < toolTipData[i].value.length; j++) {
                                toolTiphtml += toolTipData[i].value[j].name + ':' + toolTipData[i].value[j].value + "<br>"
                            }
                        }
                    }
                    console.log(toolTiphtml)
                    // console.log(convertData(data))
                    return toolTiphtml;
                }
            }
        },
        // legend: {
        //     orient: 'vertical',
        //     y: 'bottom',
        //     x: 'right',
        //     data: ['credit_pm2.5'],
        //     textStyle: {
        //         color: '#fff'
        //     }
        // },
        visualMap: {
            show: true,
            min: 0,
            max: 200,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            inRange: {
                // color: ['#3B5077', '#031525'] // 蓝黑
                // color: ['#ffc0cb', '#800080'] // 红紫
                // color: ['#3C3B3F', '#605C3C'] // 黑绿
                // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                // color: ['#23074d', '#cc5333'] // 紫红
                color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#1488CC', '#2B32B2'] // 浅蓝
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿
                // color: ['#00467F', '#A5CC82'] // 蓝绿

            }
        },
        /*工具按钮组*/
        // toolbox: {
        //     show: true,
        //     orient: 'vertical',
        //     left: 'right',
        //     top: 'center',
        //     feature: {
        //         dataView: {
        //             readOnly: false
        //         },
        //         restore: {},
        //         saveAsImage: {}
        //     }
        // },
        geo: {
            show: true,
            map: mapName,
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false,
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#3B5077',
                },
                emphasis: {
                    areaColor: '#2B91B7',
                }
            }
        },
        series: [{
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#05C3F9'
                }
            }
        },
            {
                type: 'map',
                map: mapName,
                geoIndex: 0,
                aspectScale: 0.75, //长宽比
                showLegendSymbol: false, // 存在legend时显示
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: false,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#031525',
                        borderColor: '#3B5077',
                    },
                    emphasis: {
                        areaColor: '#2B91B7'
                    }
                },
                animation: false,
                data: data
            },
            {
                name: '点',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin', //气泡
                symbolSize: function (val) {
                    var a = (maxSize4Pin - minSize4Pin) / (max - min);
                    var b = minSize4Pin - a * min;
                    b = maxSize4Pin - a * max;
                    return a * val[2] + b;
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 9,
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#F62157', //标志颜色
                    }
                },
                zlevel: 6,
                data: convertData(data),
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data.sort(function (a, b) {
                    return b.value - a.value;
                }).slice(0, 5)),
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'yellow',
                        shadowBlur: 10,
                        shadowColor: 'yellow'
                    }
                },
                zlevel: 1
            },

        ]
    };
    myChart.setOption(option);
</script>

<script type="text/javascript">
    var chartDom = document.getElementById('bintu');
    var myChart = echarts.init(chartDom);
    var option;

    var datas = [
        
        [
            {name: '圣彼得堡来客', value: 5.6},
            {name: '陀思妥耶夫斯基全集', value: 1},
            {name: '史记精注全译（全6册）', value: 0.8},
            {name: '加德纳艺术通史', value: 0.5},
            {name: '表象与本质', value: 0.5},
            {name: '其它', value: 3.8}
        ],
        // 
        [
            {name: '银河帝国5：迈向基地', value: 3.8},
            {name: '俞军产品方法论', value: 2.3},
            {name: '艺术的逃难', value: 2.2},
            {name: '第一次世界大战回忆录（全五卷）', value: 1.3},
            {name: 'Scrum 精髓', value: 1.2},
            {name: '其它', value: 5.7}
        ],
        
        [
            {name: '克莱因壶', value: 3.5},
            {name: '投资最重要的事', value: 2.8},
            {name: '简读中国史', value: 1.7},
            {name: '你当像鸟飞往你的山', value: 1.4},
            {name: '表象与本质', value: 0.5},
            {name: '其它', value: 3.8}
        ]
    ];
    option = {

        series: datas.map(function (data, idx) {
            var top = idx * 33.3;
            return {
                type: 'pie',
                radius: [20, 60],
                top: top + '%',
                height: '33.33%',
                left: 'center',
                width: 400,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    alignTo: 'edge',
                    formatter: '{name|{b}}\n{time|{c} 小时}',
                    minMargin: 5,
                    edgeDistance: 10,
                    lineHeight: 15,
                    rich: {
                        time: {
                            fontSize: 10,
                            color: '#999'
                        }
                    }
                },
                labelLine: {
                    length: 15,
                    length2: 0,
                    maxSurfaceAngle: 80
                },
                labelLayout: function (params) {
                    const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                    const points = params.labelLinePoints;
                    // Update the end point.
                    points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                    return {
                        labelLinePoints: points
                    };
                },
                data: data
            };
        })
    };

    option && myChart.setOption(option);
</script>

<script type="text/javascript">
    var app = {};

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        legend: {},
        tooltip: {},
        dataset: {
            dimensions: ['product', '2015', '2016', '2017'],
            source: [
                {product: 'Matcha Latte', 2015: 43.3, 2016: 85.8, 2017: 93.7},
                {product: 'Milk Tea', 2015: 83.1, 2016: 73.4, 2017: 55.1},
                {product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2, 2017: 82.5},
                {product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9, 2017: 39.1}
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}]
    };

    option && myChart.setOption(option);
</script>
</body>
</html>