精华内容
下载资源
问答
  • 2020-12-20 06:24:22

    达到的效果:

    1.本身是个中国地图‘

    2.直接通过经纬度标注

    3.标注点可以是其他样子(比如:五角星)

    4.标注点具有提示框并且鼠标可以进入

    5.提示框里的链接可点击(可以添加为链接事件);

    所需要技术

    直接上代码

    $(document).ready(function(){

    $.ajax({

    url:'',

    type:'POST',

    dataType:'json',

    data:{num:1000},

    dataType:'json',

    success:function(data){

    var list=data.result;

    var markPointData=[];

    for (var i = 0; i < list.length; i++) {

    var num=[];

    var ok=list[i].address;

    var num=ok.split(",");

    markPointData.push({

    "name": list[i].organizationName,

    "coord": num,

    "runConut": list[i].mun17,

    "unitCount": list[i].mun18,

    "organizationId":list[i].organizationId

    });

    };

    console.log(markPointData);

    //地图

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

    // mapChart的配置

    var option = {

    "tooltip": {//提示框组件。

    "trigger": 'item',//触发类型 散点图

    "enterable": true,//鼠标是否可进入提示框

    "transitionDuration": 1,//提示框移动动画过渡时间

    "formatter": function(params) {

    console.log(params);

    return '' + params.name + '

    管理干部培训  ' + params.data.runConut + '人

    卓越教师培训  ' + params.data.unitCount + '人

    '

    // if (params.seriesIndex == 0 && JSON.stringify(markPointData).indexOf(params.name) > -1) {

    // return '

    ' + params.data.name + '

    管理干部培训  ' + params.data.runConut + '人

    卓越教师培训  ' + params.data.unitCount + '人'

    // }

    },

    "backgroundColor": '#fff',

    "borderWidth": '1px',

    "borderRadius": '5',

    "borderColor": 'rgba(72,150,128,1)',

    "textStyle": {

    //"color": 'rgba(94,194,222,1)'

    },

    "padding": 22

    },

    "series": [{//系列列表

    "name": "中国",

    "type": "map",

    "mapType": "china",

    "zoom": 1,//当前视角的缩放比例。

    "selectedMode": false,

    "layoutCenter": ['50%', '53%'],

    "layoutSize": "102%",

    "label": {//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等

    "normal": {

    "show": false,

    "textStyle": {

    "color": "#fff",

    "fontSize": "12"

    }

    },

    "emphasis": {

    "show": false,

    "textStyle": {

    "color": "#fff",

    "fontSize": "12"

    }

    }

    },

    "markPoint": {//图表标注。

    "symbol": 'path://M512 39.384615l169.353846 295.384615 342.646154 63.015385-240.246154 248.123077L827.076923 984.615385l-315.076923-145.723077L196.923077 984.615385l43.323077-334.769231L0 401.723077l342.646154-63.015385L512 39.384615',

    "symbolSize":10,

    "label": {

    "normal": {

    "show": true,

    },

    "emphasis": {

    show: true,

    }

    },

    "itemStyle": {

    "normal": {

    "color": 'rgba(72,150,128,1)'

    }

    },

    "data": markPointData

    }

    }]

    };

    myChart.setOption(option);

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

    }

    })

    更多相关内容
  • 基于echarts制作中国地图全国销售网点分布特效。支持自定义设置热点城市标注
  • 如果需要地图geojson或js文件的话,可以到我的个人 github 上自取:https://github.com/zhangqian00/echarts3-mapFile 1、初始化地图: 2、 声明label数据: 配置需要铺设的label,value值为坐标点,注释的四个区,...
  • ECharts如何自定义省、市、县区地图(各省市直辖区的map地图),ECharts如何在地图上自定义图片、图标,根据经纬度显示自定义建筑图片、添加自定义覆盖物 前言 最近在做一个项目中,需求是:要显示中国某个省份下...

    ECharts如何自定义省、市、县区地图(各省市直辖区的map地图),ECharts如何在地图上自定义图片、图标,根据经纬度显示自定义建筑图片、添加自定义覆盖物

    前言


    最近在做一个项目中,需求是:要显示中国某个省份下,某个市的地图,而地图还要有块级效果,自定义地图颜色,还要在地图上显示不同的建筑物图片,还要每隔几秒后(数据是从后端用ws实时推送过来的,要根据推送过来的数据,动态切换显示对应建筑物的相关信息)。

    之前Echarts我也用得挺多的,但是没做过要在地图上显示自定义图片,因为echarts的地图用canvas渲染出来的,而且自定义的图片位置是要根据要求出显示,还要不间断来回切换显示。

    刚开始有点懵,在网上一阵狂搜,然而结果并无卵用,都是参差不齐,最多显示一个小圆点之类的,更没什么实例代码。所以,那两天就有点头大,看Echarts官网也不知从那里看起。

    最后,还是搞定了,相信在当你看到这篇文章之前,你和我之前的感受应该差不多,都有点头大吧!哈哈,开个玩笑哈!!

    好吧,话就说到这里,先来看一下效果图:这里以贵州遵义为例!!

    这是中国地图数据图形:

    怎么样?

    和你现在的项目需求差不多吗,哈哈,又浪了一下?现在来看看实现代码吧!

    代码


    HTML用来渲染地图用的,宽度和高度自己定义,我这里是以1440 * 916 为例。

     <div id="map-box" style="width:1440px; height:916px"></div>

    CSS用于在地图上自动切换时,显示建筑地址及相关信息的样式。

    body{background:url(../img/body-bg.jpg) no-repeat;background-size:cover;}
    .map-box{border:1px solid #fff;}
    #map-box{margin:auto;}
    .map-hover-box{position:relative;margin-top:-160px;padding:12px 16px;min-width:200px;border-radius:20px 0 20px 0;background:rgba(11,21,50,.8);box-shadow:0 0 12px 1px #ec7d0f;word-wrap:break-word;}
    .map-hover-box::before{position:absolute;top:-1px;right:-1px;width:73px;height:38px;background:url(../img/map-href-rt.png) no-repeat;background-size:contain;content:"";}
    .map-hover-box::after{position:absolute;bottom:-1px;left:-1px;width:73px;height:38px;background:url(../img/map-href-lb.png) no-repeat;background-size:contain;content:"";}
    .map-hover-box h3{font-size:18px;}
    .map-hover-box p{padding-top:12px;font-size:16px;}
    .map-hover-box i{position:absolute;bottom:-108px;left:-75px;display:block;width:100px;height:108px;background:url(../img/map-href-zb.png) no-repeat;background-size:contain;}

    JavaScript 引用文件

    //echarts.min.js 这个就不用说了
    <script src="./js/echarts.min.js"></script>
    
    //zunyi.js 是指定让echarts显示的地图(这里是贵州省 遵义市 的地图数据)
    <script src="./js/zunyi.js"></script>
    
    //zunyi-data.js 是要在地图上显示的内容(建筑地址、名称、图片、经纬度等,这里一般是从后端传过来的,这里是演示用的哈!!)
    <script src="./js/zunyi-data.js"></script>
    
    zunyi-data.js 数据结构如下:
    const zunyiData = [
        {
            "adcode": "520321",
            "people_count_2010": 942904,
            "lat": 27.535288,
            "lng": 106.831668,
            "name": "遵义县",
            "level": "district",
            "parent": "遵义市"
        },
    
        {
            "adcode": "520330",
            "people_count_2010": 523180,
            "lat": 28.327826,
            "lng": 106.200954,
            "name": "习水县",
            "level": "district",
            "parent": "遵义市"
        }
    ];
    

    这里面的数据结构你可以自己添加 或 删除,一般是从后端传过来的,由于是演示,所以我没有把建筑图片路径加在这里面(因为是本地图片,当然本地图片也可以加),而是直接在调用时添加进去的,具体请看下面JS代码中 注释 //自定义图片的 路径下的JS代码 。

    JavaScript实例代码

            //自动切换定时器, 自动切换项目
            let timer = null, nows = -1;
    
            //初始Echarts实例对象
            const oMap = echarts.init(document.querySelector('#map-box'));
    
    
            //指定加载省、市、县、区 (注:这里是重点!!!,zunyi是zunyi.js中大数据变量,而用引号括起来的'zunyi'是要在map: 'zunyi',中加载的变量)
            echarts.registerMap('zunyi', zunyi);
    
            //(注:由于这里没有用模块化方式导入,所以把zunyi.json文件改为zunyi.js文件,并在里面用一个zunyi常量来引入的)
    
    
            //如果你当前环境支持模块化导入方式的话可以直接导入xxxx.json文件,就不用向上面改成js文件后用常量来引入
            //echarts.registerMap('zunyi', require('./js/zunyi.json'));
     
            //(注:想问zunyi.json文件是从哪里来的(或者 是想要其他省、市、县区等),请再向下看!!)
    
    
            //图片相关配置信息
            oMap.setOption({
                //标题文本配置
                title: {
                    text: '中国 贵州省 遵义市 地理图形',
                    textStyle: {
                        color: 'white',
                        fontStyle: 'normal',
                        fontWeight: 'bold',
                        fontSize: 32,
                        lineHeight: 80,
                        textBorderColor: 'green',
                        textBorderWidth: 1,
                        textShadowColor: 'green',
                        textShadowBlur: 10,
                        textShadowOffsetX: 2,
                        textShadowOffsetY: 2
                    }
                },
    
                //提示框组件(可以设置在多种地方)       
                tooltip: {
                    show: true, //是否显示提示框组件,包括提示框浮层和 axisPointer。
                    trigger: 'item', //触发类型。item,axis,none
                    enterable: true,//鼠标是否可进入提示框浮层中,默认为false,
                    showContent: true,          //是否显示提示框浮层
                    triggerOn: 'mousemove',//提示框触发的条件(mousemove|click|none)  
                    showDelay: 0,               //浮层显示的延迟,单位为 ms,默认没有延迟,也不建议设置。在 triggerOn 为 'mousemove' 时有效。
                    textStyle: {
                        color: 'white',
                        fontSize: 12
                    },
                    padding: [0, 8],
                    hideDelay: 10,             //浮层隐藏的延迟
                    formatter: (o) => (o.data) ? `<section class="map-hover-box"><div class="map-hover-mov"><h3>建筑地址:${o.name}</h3></div><i></i></section>` : '',
                    // backgroundColor: 'green',  //提示框浮层的背景颜色。
                    // borderColor: "white",  //图形的描边颜色
                    // borderWidth: 2,
                    alwaysShowContent: true,
                    transitionDuration: 1,      //提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动。
                },
    
                //地理坐标系组件。地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制散点图,线集。
                geo: {
                    show: true,
                    map: 'zunyi',
                    roam: false,
                    top: 90,
                    left: 306,
                    zoom: 1.02,
                    aspectScale: 0.9,
                    itemStyle: {
                        normal: {
                            opacity: 1,              //图形透明度 0 - 1
                            borderColor: "yellow",  //图形的描边颜色
                            borderWidth: 2,          //描边线宽。为 0 时无描边。
                            borderType: 'solid',     //柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'。
                            areaColor: "yellow",   //图形的颜色 #eee
                        }
                    }
                },
    
                //系列列表。每个系列通过 type(map, scatter, bar, line, gauge, tree.....) 决定自己的图表类型
                series: [{
                    name: '贵州省遵义市',
                    map: 'zunyi',
                    type: "scatter",
                    coordinateSystem: "geo",
                    symbolSize: 0,
                    silent: 'none',
                    data: zunyiData.map(item => {
                        return {
                            name: item.name,
                            value: [item.lng, item.lat]
                        };
                    })
                },
                {
                    map: 'zunyi',
                    type: "map",
                    zoom: 1,                //当前视角的缩放比例。
                    aspectScale: 0.9,       //这个参数用于 scale 地图的长宽比。geoBoundingRect.width / geoBoundingRect.height * aspectScale
                    roam: false,            //是否开启鼠标缩放和平移漫游。默认不开启
                    label: {
                        show: false,
                        textStyle: {
                            color: "white",
                            fontSize: 12,
                            backgroundColor: ''  //文字背景色
                        }
                    },
    
                    itemStyle: {
                        normal: {
                            borderColor: "#00ff00",     //图形的描边颜色
                            borderWidth: 2,             //描边线宽。为 0 时无描边。
                            borderType: 'solid',        //柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'。
                            areaColor: "rgba(0, 186, 0, 0.8)",   //图形的颜色 #eee
                            shadowBlur: 100,            //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                            shadowColor: '#002900',     //阴影色
                            shadowOffsetX: 20,          //X轴阴影
                            shadowOffsetY: -20,         //Y轴阴影
    
                            label: {
                                show: true,
                                textStyle: {
                                    color: "white",
                                    fontSize: 14
                                }
                            }
                        },
                        //鼠标移入时
                        emphasis: {
                            borderColor: "#005b89",
                            borderWidth: "1",
                            areaColor: "yellow",
                            label: {
                                show: false,
                                textStyle: {
                                    color: "purple",
                                    fontSize: 14
                                }
                            }
                        },
    
                        effect: {
                            show: true,
                            shadowBlur: 10,
                            loop: true
                        },
                    },
                    
                    //自定义图片数组对象[{}, {}...]
                }, ...zunyiData.map((item, index) => {
                    return {
                        type: "scatter",
                        coordinateSystem: "geo",
                        //自定义图片的 位置(lng, lat)
                        data: [{ name: item.name, value: [item.lng, item.lat] }],
                        //自定义图片的 大小
                        symbolSize: [80, 60],
                        //自定义图片的 路径
                        symbol: `image://img/icon/icon (${index}).png`
                    }
                })
                ]
            });
    
            //自动切换
            const autoShow = (length) => {
                nows = (nows + 1) % length;
                oMap.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: nows
                });
            };
    
            //每隔5秒钟自动切换到下一个数据点
            autoShow(zunyiData.length);
            clearInterval(timer);
            timer = window.setInterval(() => {
                autoShow(zunyiData.length);
            }, 5000);
    
            // 点击事件
            oMap.on('click', function (res) {
                console.log(res);
                if('scatter' === res.componentSubType){
                    alert(`点击了 ${res.name} 图标`);
                }
                if('map' === res.componentSubType){
                    alert(`点击了 ${res.name} 地图`);
                }
            });

    Demo地址


    实例效果:https://muguilin.github.io/Echarts-Map-Icon 

    代码地址:https://github.com/MuGuiLin/Echarts-Map-Icon

    你可能会问


    1、echarts.min.js 从哪里可以下载?

    <script src="https://cdn.bootcss.com/echarts/4.3.0-rc.2/echarts.min.js"></script>

    在这里:

    (1)、 下载 - Apache ECharts Echarts官网下载

    (2) 、https://www.bootcdn.cn/echarts 公共静态资源库

    2、zunyi.js 又从哪里可以下载?

    <script src="./js/zunyi.js"></script>

    注:根据你项目需求的不同,所有想要显示的Echarts地图json也不同,而且可以能是 整个中国的地图数据,也可能是某个省的,市的,县的,区的等,这时怎么办?

    (1)、去网上搜也有很多的,但是可能数据不全,或者 需要积分才能下载

    (2)、https://github.com/ecomfe/awesome-echarts 去这里查找 

    (3)、DataV.GeoAtlas地理小工具系列 去这里下载

    在地图上点击选择需要的地图区域后,就可以在左下角下载当前对应区域的地图.json(geoJson)文件啦(里面还包括了其他的格式如svg等,根据自己的需求下载)!

    扩展


    1、地图拆分:

    如果想把地图做一下拆分什么,可以这样做:当你把需要的地图数据.json下载下来以后,可以打开这个网址:http://www.dnccn.com/mapchaifen.html 地图拆分 ,将你下载的地图.json文件拖到里面,可查看地图效果,折分地图区域、编辑等

    2、自定义地图区域:

    一般下载的地图.json文件最详细就只到到县级 或 区级 的geo.json,如果就想要乡镇级别的,或者其他区域的数据,可以在当前地图.json的基础上,绘制自己想要的地图数据。

    绘制自定义地图网站:http://geojson.io 自定义地图区域

    最后


    最后想说,Echarts是百度出的一个很强大的商业级数据图表(数据可视化)库(ECharts 底层依赖 ZRender)它提供商业产品常用图表库,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、地图、力导向布局图,同时支持任意维度的堆积和多图表混合展现等,

    如果配合上D3.js还可以做出更优秀,更酷炫的效果!比如:3D地球

    当然类似的库还有 兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts    Highcharts  让数据可视化更简单兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库!

    展开全文
  • echarts城市地图标注

    千次阅读 2019-09-18 17:59:46
    引入文件的地址可以用echarts官方网站的github的内容,也可以点进去这个链接https://blog.csdn.net/WWW_share8/article/details/90348799,找到这位高手博文中的github链接 生成效果图如下 代码如下(转自上边的链接) ...

    成都市人口密度统计

    首先引入地图json文件

    引入文件的地址可以用echarts官方网站的github的内容,也可以去这个链接
    https://blog.csdn.net/WWW_share8/article/details/90348799,
    找到这篇博文中的github链接

    生成效果图如下
    在这里插入图片描述
    代码如下

    		var markdata=[];//这是为了给地图上添加气泡图标,拿取备用数据
    
            //取得json的样式,读取json文件
            $.getJSON("./chengdu.json", "", function(data) {
                markdata=convertData(data.features)
                //生成地图
                createMap(data);
            })
            //生成地图
            function createMap(data){
                echarts.registerMap('cd',data);
                var chart = echarts.init(document.getElementById('map'));
                chart.setOption({
                    title:{
                        x:'center',
                        text:'成都',
                        textStyle:{
                            color:'#fff'
                        }
                    },
                    dataRange: {
                        min: 80,//颜色区间的最小值
                        max: 500,//颜色区间的最大值,和data中的最大值一致
                        x: 'left',
                        y: 'bottom',
                        text:['高','低'], // 文本,默认为数值文本
                        calculable : true,
                        inRange: {
                            //颜色区间
                            color: ['lightskyblue','yellow', 'orangered','red']
                        },
                        show:false
                    },
                    tooltip : {
                        show:true,
                        formatter: ' {b}<br /> 钻石段位: {c}'
                    },
                    series: [{
                        type: 'map',
                        map: 'cd',
                        itemStyle:{
                            normal:{label:{show:false}},
                            emphasis:{label:{show:true}}
                        },
                        data:markdata,
                        markPoint:{
                            symbolSize: 45,
                            itemStyle: {
                                normal: {
                                    borderColor: '#33CBFF',
                                    color:'#33CBFF',
                                    borderWidth: 1,            // 标注边线线宽,单位px,默认为1
                                    label: {
                                        show: true
                                    }
                                }
                            },
                            data:markdata
                        }
                    }]
                });
                window.addEventListener('resize', function () {
                    chart.resize();
                });
            }
            //处理整合   气泡图标数据
            function convertData(arrs) {
                var markdata = [];
                var valuess = [100,300,200,500,211,203,305,406,507,202,100,210,101,1];
                for (var i = 0; i < arrs.length; i++) {
                    markdata.push({})
                    if (arrs[i].properties.name == '青羊区') {
                        markdata[i].coord = new Array(parseFloat(arrs[i].properties.center[0]) + 0.1, parseFloat(arrs[i].properties.center[1]) - 0.18);
                        console.log(markdata[i])
                    } else {
                        markdata[i].coord = arrs[i].properties.center;
                    }
                    markdata[i].name = arrs[i].properties.name;
    
                    markdata[i].value = valuess[i]
                }
                return markdata
            }
    
    展开全文
  • 安装 echartsecharts-gl依赖包 。 npm i echarts echarts-gl -S assets下新增 mapdata资源包(中国各省市 json文件) 可以在网上自行查找下载,也可通过本文案例链接,在码云上拉取获得 。完整示例链接...

    市区地图标注 


    安装依赖

    安装 echarts 和 echarts-gl 依赖 。

    npm i echarts echarts-gl -S

    新增 mapdata 资源包

    assets 下新增 mapdata 资源包(中国个省市区县 json 文件),可以在网上自行查找下载,也可通过本文案例链接,在码云上拉取获得 。 完整示例链接https://gitee.com/wu241617/echarts-map

    新建 map.json 文件

    assets 下新增 config 目录,下新建 map.json 文件。我这里案例中只做了抚州市和荆州市的配置,后续有其他区域需要,新增添加即可 。文件中 coord 字段是对应 name 子区域的经纬度,可以在网上搜索查询,后续这里要进行微调,控制标注的位置 。
    区域经纬度https://max.book118.com/html/2021/0507/6030102121003144.shtm

    {
      "抚州市": {
        "geoJson": "/geometryCouties/361000.json",
        "qxwz": [
          {
            "name": "东乡区",
            "coord": [116.6, 28.18]
          },
          {
            "name": "临川区",
            "coord": [116.35, 27.98]
          },
          {
            "name": "金溪县",
            "coord": [116.75, 28]
          },
          {
            "name": "崇仁县",
            "coord": [116.05, 27.79]
          },
          {
            "name": "宜黄县",
            "coord": [116.25, 27.5]
          },
          {
            "name": "南城县",
            "coord": [116.66, 27.65]
          },
          {
            "name": "资溪县",
            "coord": [117.05, 27.8]
          },
          {
            "name": "乐安县",
            "coord": [115.83, 27.47]
          },
          {
            "name": "南丰县",
            "coord": [116.45, 27.24]
          },
          {
            "name": "黎川县",
            "coord": [116.85, 27.2]
          },
          {
            "name": "广昌县",
            "coord": [116.35, 26.87]
          }
        ]
      },
      "荆州市": {
        "geoJson": "/geometryCouties/421000.json",
        "qxwz": [
          {
            "name": "洪湖市",
            "coord": [113.59, 30.02]
          },
          {
            "name": "江陵县",
            "coord": [112.49, 30.01]
          },
          {
            "name": "荆州区",
            "coord": [112.08, 30.49]
          },
          {
            "name": "沙市区",
            "coord": [112.35, 30.41]
          },
          {
            "name": "松滋市",
            "coord": [111.62, 30.03]
          },
          {
            "name": "公安县",
            "coord": [112.12, 29.87]
          },
          {
            "name": "监利县",
            "coord": [112.96, 29.91]
          },
          {
            "name": "石首市",
            "coord": [112.51, 29.82]
          }
        ]
      }
    }
    

    组件案例

    • HTML:
    <template>
      <div>
        <select v-model="selectCity"
          @change="cityChange"
          class="select">
          <option :label='item.name'
            :value="item.value"
            v-for="item in options"
            :key="item.value"></option>
        </select>
        <div class="selectedText">{{selectedText}}</div>
        <div class="mapMain"
          id="mapMain"></div>
      </div>
    </template>
    • JS:

    【注意】:地图配置中, geo 数组中有两个子项,渲染两个地图,通过控制 center 属性值配置,形成微错位,视觉上立体, 注意 center 值要处于当前区域经纬度之间,需要微调否则看不到地图渲染 ,其他具体配置请查看官方文档配置项。
    官方文档https://echarts.apache.org/zh/option.html#title

    import * as echarts from 'echarts';
    import 'echarts-gl';
    import { mapState } from 'vuex'
    
    export default {
      name: 'Main',
      data() {
        return {
          selectCity: '361000',
          mapConfigJson: require("../../assets/config/map.json"),
          map: '',
          mapLoadCity: '',
          cityName: [],
          mapdataJson: [],
          selectedText: ''
        }
      },
      mounted() {
        this.cityChange();
      },
      computed: {
        ...mapState(['JZtestData', 'FZtestData', 'options'])
      },
      methods: {
        // 下拉框城市区域切换  
        cityChange() {
          this.selectedText = ''
          this.cityName = []
          this.options.map(item => {
            if (item.value === this.selectCity) {
              this.mapLoadCity = item.name
              this.cityName.push(item.name)
            }
          })
          this.mapChart();
        },
        //显示地图
        mapChart() {
          this.map = echarts.init(document.getElementById('mapMain'));
          this.initMenu();
          this.map.on("click", this.mapClick);
        },
        //地图点击事件
        mapClick(param) {
          this.selectedText = `当前选中区域为: ${this.mapLoadCity}--${param.name}`;
        },
        initMenu() {
          this.loadMap(this.mapLoadCity, this.loadData(this.mapLoadCity));
        },
        loadData(mapLoadCity) {
          if (mapLoadCity === '荆州市') {
            return this.JZtestData;
          }
          if (mapLoadCity === '抚州市') {
            return this.FZtestData;
          }
        },
        /**
          * 加载地图
          * @param name
        */
        loadMap(name, mapdataJson) {
          let markPointData = this.mapConfigJson[name]["qxwz"];
          if (!this.mapConfigJson[name].geoJson) {
            return;
          }
          let geoJson = require("../../assets/mapdata" + this.mapConfigJson[name].geoJson);
          echarts.registerMap(name, geoJson);
          let dataColor = () => {
            let colorlist = [];
            for (let i = 0; i < mapdataJson.length; i++) {
              if (mapdataJson[i].value < 1000) {
                colorlist.push("rgb(207,234,254)");
              } else if (mapdataJson[i].value >= 1000 && mapdataJson[i].value < 2000) {
                colorlist.push("rgb(138,184,252)");
              } else if (mapdataJson[i].value >= 2000 && mapdataJson[i].value < 3000) {
                colorlist.push("rgb(101,162,249)");
              } else if (mapdataJson[i].value >= 3000) {
                colorlist.push("rgb(79,132,235)");
              }
            }
            return colorlist;
          }
          let option = {
            geo: [
              {
                geoIndex: 0,
                z: 1,
                type: 'map',
                map: name,
                center: [116.38, 27.56],
                zoom: 1,
                aspectScale: 1.3, //长宽比
                scaleLimit: {
                  "min": 1.1,
                  "max": 15
                },
                label: { //标签样式设置
                  show: true,
                  fontSize: 14,
                  color: 'rgba(255,255,255)',
                },
                itemStyle: {
                  normal: {
                    borderColor: "#fff",
                    borderWidth: 1,
                    areaColor: 'rgb(207,234,254)',
                    fontWeightL: 700,
                  },
                  emphasis: {
                    areaColor: 'rgb(243,215,115)',
                    borderWidth: 0
                  }
                },
                select: {
                  itemStyle: {
                    areaColor: 'rgb(243,215,115)',
                    borderColor: '#fff',
                    borderWidth: 3,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    opacity: 1,
                  }
                },
                selectedMode: 'multiple',
              },
              {
                geoIndex: 0,
                map: name,
                z: 0,
                zoom: 1,
                center: [116.348, 27.58],
                aspectScale: 1.3, //长宽比
                scaleLimit: {
                  "min": 1.1,
                  "max": 15
                },
                label: { //标签样式设置
                  show: true,
                  fontSize: 14,
                  color: 'rgba(150,181,246,0)',
                },
                itemStyle: {
                  normal: {
                    shadowColor: '#ececec',
                    shadowOffsetX: 5,
                    shadowOffsetY: 5,
                    borderColor: "#fff",
                    borderWidth: 1,
                    areaColor: 'rgb(187,217,253)',
                  },
                  emphasis: {
                    areaColor: 'rgb(187,217,253)',
                    borderWidth: 0
                  },
                }
              },
            ],
            visualMap: [{
              min: 0,
              max: 10,
              left: 'left',
              top: 'bottom',
              text: ['高', '低'],
              calculable: true,
              show: false,
              inRange: {
                color: dataColor()
              }
            }],
            color: ['white'],
            series: [
              {
                name: "热力图",
                type: "heatmap",
                coordinateSystem: "geo",
                geoIndex: 0,
                markPoint: { //标记点
                  symbol: 'roundRect',
                  symbolKeepAspect: true,
                  symbolSize: [35, 15], //图形大小
                  label: {
                    width: 100,
                    height: 50,
                    normal: {
                      color: '#000',
                      formatter: function (params) {
                        for (let i = 0; i < mapdataJson.length; i++) {
                          if (mapdataJson[i].name == params.name) {
                            return mapdataJson[i].value;
                          }
                        }
                      },
                      show: true,
                    },
                    emphasis: {
                      show: true,
                    }
                  },
                  itemStyle: {
                    color: '#fff',
                  },
                  data: markPointData
                }
              },
              {
                name: '地市',
                type: 'map',
                geoIndex: 0,
                data: this.getMapColor(geoJson)
              }
            ]
          };
          if (this.mapLoadCity === '荆州市') {
            option.geo[0].center = [112.71, 29.71];
            option.geo[0].zoom = 1.2;
            option.geo[1].center = [112.73, 29.73];
            option.geo[1].zoom = 1.2;
          }
          this.map.setOption(option, true);
        },
        /**
         * 生成地图颜色
         * @param geoJson
         * @returns {Array}
         */
        getMapColor(geoJson) {
          let list = [];
          for (let i in geoJson.features) {
            let feature = geoJson.features[i];
            let name = feature.properties.name;
            let json = {};
            json.name = name;
            json.value = i % 11;
            if (this.cityName.length == 2) {
              if (this.cityName[1] == name) {
                json.selected = true;
              }
            }
            list.push(json);
          }
          return list;
        },
      }
    }
    • CSS:

    组件内样式

    .mapMain {
      width: 1000px;
      height: 750px;
    }

    全局样式(在 assets 下新建 CSS 目录,下新增 common.css 文件)

    * {
        margin: 0;
        padding: 0;
    }
    
    html,
    body {
        font-size: 24px;
        font-family: '楷体' !important;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    
    .home {
        width: 1000px;
        height: 800px;
        border: 1px solid black;
        padding: 10px;
        margin: 0 auto;
    }
    
    .header {
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: white;
        background: black;
    }
    
    .main {
        width: 100%;
        height: 750px;
        background: lavender;
        position: relative;
        z-index: 1;
    }
    
    .select {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 80px;
        height: 30px;
        border: 1px solid rgba(0, 0, 0, .4);
        cursor: pointer;
        text-align: center;
        line-height: 30px;
        z-index: 999;
    }
    
    .selectedText {
        border-bottom: 2px solid lightblue;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 15px;
        z-index: 999;
    }

    模拟测试数据

    使用 vuex 模拟后端请求到的地图数据,存放在 store 下的 index.js 文件中的 state 内 。

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
        state: {
            JZtestData: [{
                    name: "洪湖市",
                    qxdm: "421083",
                    value: 654
                },
                {
                    name: "江陵县",
                    qxdm: "421024",
                    value: 13
                },
                {
                    name: "荆州区",
                    qxdm: "421003",
                    value: 4222
                },
                {
                    name: "沙市区",
                    qxdm: "421002",
                    value: 1854
                },
                {
                    name: "松滋市",
                    qxdm: "421087",
                    value: 1023
                },
                {
                    name: "公安县",
                    qxdm: "421022",
                    value: 10
                },
                {
                    name: "监利县",
                    qxdm: "421023",
                    value: 2183
                },
                {
                    name: "石首市",
                    qxdm: "421081",
                    value: 12
                }
            ],
            FZtestData: [{
                    name: "东乡区",
                    qxdm: "361029",
                    value: 654
                },
                {
                    name: "临川区",
                    qxdm: "361002",
                    value: 13
                },
                {
                    name: "金溪县",
                    qxdm: "361027",
                    value: 4222
                },
                {
                    name: "崇仁县",
                    qxdm: "361024",
                    value: 1854
                },
                {
                    name: "宜黄县",
                    qxdm: "361026",
                    value: 1023
                },
                {
                    name: "南城县",
                    qxdm: "361021",
                    value: 10
                },
                {
                    name: "资溪县",
                    qxdm: "361028",
                    value: 2183
                },
                {
                    name: "乐安县",
                    qxdm: "361025",
                    value: 12
                },
                {
                    name: "南丰县",
                    qxdm: "361023",
                    value: 10
                },
                {
                    name: "黎川县",
                    qxdm: "361022",
                    value: 2183
                },
                {
                    name: "广昌县",
                    qxdm: "361030",
                    value: 12
                }
            ],
             options: [{
                 name: '荆州市',
                 value: '421000'
             }, {
                 name: '抚州市',
                 value: '361000'
             }]
        },
        mutations: {},
        actions: {},
        modules: {}
    })

    中国地图下钻省市区县


    获取中国【省市区县】json 数据 

    安装 province-city-china 依赖。 

    npm i province-city-china -S

    数据项解析 

    请求已安装的 province-city-china 依赖包,获取各项数据。

    参考链接https://juejin.cn/post/6844903527844675591

    const { data, province, city, area, town } = require('province-city-china/data');
    // data - 总数据(省/地/县/乡)
    // province - 省级(省/直辖市/特别行政区)
    // city - 地级(城市)
    // area - 县级(区县)
    // town - 乡级(乡镇/街)

    组件案例

    • HTML
    <template>
      <div>
        <div id="tool">
          <span @click="goBackChina">{{firstTitle}}</span>
          <span @click="goBackProvince">{{currentProvince.name}}</span>
          <span @click="goBackCity">{{currentCity.name}}</span>
        </div>
        <div id="chinaMap"></div>
      </div>
    </template>
    • JS 
    import * as echarts from 'echarts';
    const { province, city } = require('province-city-china/data');
    
    export default {
      name: 'ChinaMain',
      data() {
        return {
          firstTitle: '中国',
          myChart: '',
          currentClick: '',
          currentProvince: {},
          currentCity: {},
          cityState: false,
          provinceState: false
        }
      },
      mounted() {
        this.initEcharts("china", "中国");
      },
      methods: {
        goBackChina() {
          this.initEcharts("china", "中国");
          this.currentProvince.name = '';
          this.currentCity.name = '';
        },
        goBackProvince() {
          this.initEcharts(this.currentProvince.province, this.currentProvince.name, "1");
          this.currentCity.name = '';
        },
        goBackCity() {
          this.initEcharts(this.currentCity.code, this.currentCity.name);
        },
        initEcharts(pName, Chinese_, state = "0") {
          this.myChart = echarts.init(document.getElementById('chinaMap'));
          let tmpSeriesData = [];
          if (pName === "china") {
            let geoJson = require('../../assets/mapdata/china.json');
            echarts.registerMap(pName, geoJson);
          } else {
            if (this.currentClick === 'province' || state === "1") {
              let geoJson = require(`../../assets/mapdata/geometryProvince/${pName}.json`);
              echarts.registerMap(pName, geoJson);
            } else {
              let geoJson = require(`../../assets/mapdata/geometryCouties/${pName}.json`);
              echarts.registerMap(pName, geoJson);
            }
          }
          let option = {
            series: [
              {
                name: Chinese_ || pName,
                type: 'map',
                mapType: pName,
                roam: false,//是否开启鼠标缩放和平移漫游
                itemStyle: {//地图区域的多边形 图形样式
                  normal: {//是图形在默认状态下的样式
                    label: {
                      show: true,//是否显示标签
                      textStyle: {
                        color: "#303133",
                        fontSize: '10px'
                      }
                    }
                  },
                  emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                    label: {
                      show: true,
                      textStyle: {
                        fontSize: '14px'
                      }
                    }
                  }
                },
                data: tmpSeriesData,//后端数据
                top: "10%"//组件距离容器的距离
              }
            ]
          };
          this.myChart.setOption(option, true);
          this.myChart.off("click");
          if (pName === "china") { // 全国时,添加click 进入省级
            this.currentClick = 'province'
            this.myChart.on('click', this.mapClick);
          } else {
            this.currentClick = 'city'
            this.myChart.on('click', this.mapClick);
          }
        },
        //地图点击事件
        mapClick(param) {
          this.provinceState = false;
          this.cityState = false;
          if (this.currentClick === 'province') {
            //遍历取到provincesText 中的下标  去拿到对应的省js
            for (var i = 0; i < province.length; i++) {
              if (param.name === province[i].name) {
                this.provinceState = true;
                this.currentProvince = { ...province[i] };
                this.currentProvince.name = ` -->${this.currentProvince.name} `;
                //显示对应省份的方法
                this.showProvince(province[i].province, province[i].name);
                break;
              }
            }
            !this.provinceState ? alert('暂不支持该区域地图展示!') : '';
          } else {
            for (var l = 0; l < city.length; l++) {
              if (param.name === city[l].name) {
                this.cityState = true;
                this.currentCity = { ...city[l] };
                this.currentCity.name = ` -->${this.currentCity.name} `;
                //显示对应城市的方法
                this.showProvince(city[l].code, city[l].name);
                break;
              }
            }
            !this.cityState ? alert('暂不支持该区域地图展示!') : '';
          }
        },
        showProvince(pName, Chinese_) {
          this.initEcharts(pName, Chinese_);
        }
      }
    }
    • CSS 
    #tool {
      height: 30px;
      line-height: 30px;
      color: deepskyblue;
      cursor: pointer;
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 10000;
      font-size: 18px;
      text-align: left;
    }
    #chinaMap {
      width: 1000px;
      height: 750px;
    }

    完整示例,注意事项 


    完整示例

    完整示例链接https://gitee.com/wu241617/echarts-map

    注意事项 

    【注意】: 在完整示例中,码云下拉代码到本地后,npm install 安装依赖,npm run serve 启动项目,默认显示 /home 路由页面,中国下钻省市区县页面通过 /cm 路由访问。依赖于 mapdata 资源包和 province-city-china  依赖。

    展开全文
  • echarts自定义地图

    2020-12-25 16:54:21
    echarts自定义地图,根据地图的坐标进行绘制自己相关的地图,用html+css+echarts来实现,费用值得借鉴过来使用。
  • Echarts 修改地图标注

    千次阅读 2019-06-03 13:36:30
    echarts.registerMap('name', shandongJson)
  • 使用百度地图api绘制热力图,并使用百度地图提供的Label结合Echarts,对地图标注点marker进行自定义提示的实例源代码
  • 除了 scatter (散点图) 在地图上标记的方式之外,我们也可以使用 markPoint 图表标注的方式在地图上标记.
  • echarts 区域地图 添加标注

    万次阅读 2018-10-16 17:21:11
    // 标注数据 var mapData = [ {'latitude':24.5080777697, 'longitude':109.4743093819 , 'name':'1', 'value':32358260, 'color':'#0394d9'}, {'latitude':24.4683698180, 'longitude':109.3094042452 , 'name'...
  • 在main.js中引入地图 import echarts from 'echarts' Vue.prototype.$echarts = echarts; 省份是动态引入的,在.vue文件中 html部分 <div id="province_map_box"> <div id=province_map"></div>...
  • echarts 地图标注 symbol

    万次阅读 2018-06-20 18:07:05
    Echarts3 关系图-力导向布局图 因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts。注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础...
  • 1、安装echarts依赖 npm install echarts --save 2、main.js中引入echarts import echarts from '...-- 地图容器div --> <div class="overview_mian_mapBox" id="mapChart" ref="mapChart" ></div>
  • Echarts显示自定义标注点/地图map引导线 先贴效果。这里实现了 1.地图上县区名的显示,鼠标移入显示相应的项目数(如下图东源县) 2.地图上增加自定义地图(这里增加了没有的高新区&市辖区&江东新区) 3.较...
  • Echarts地图上添加自定义图片标注

    万次阅读 2020-04-02 14:30:00
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #chart{ width:500px; height:...
  • 引入echarts后: 阿里云下载json数据: DataV.GeoAtlas地理小工具系列 引入数据: import chongqing from '@/assets/js/chongqing.json' 同样需要一个放置容器: <template> <div> <div ...
  • echarts地图标注自定义图片路径

    万次阅读 2019-03-22 15:04:35
    记录一下在使用echarts地图插件过程中遇到的标注icon自定义路径的问题, 要实现的效果在地图上添加如下图红色圈出标注icon echarts的series方法中有一个symbol属性可以引入图片路径,以下列出三种方法: 第一...
  • 根据省份位置,在Echarts 地图上画柱状图, 可点击放大单个柱状图
  • echarts地图插入图片

    千次阅读 2021-08-20 13:18:31
    参考地址官网: https://echarts.apache.org/zh/option.html#series-line.symbol 实现: 主要是做一些小图标,实现的逻辑就是定义一个iconData的变量,然后series.push进去,代码如下: 遇到的问题 插图图片不显示...
  • 点击地图弹出层,点击地图某个省,弹出相关省信息,可以转为动态 点击地图弹出层,点击地图某个省,弹出相关省信息,可以转为动态
  • ECharts地图的使用

    2021-02-01 02:41:49
    前台界面样式map.png介绍根据点的经纬度,和两点之间的联通状态,动态显示两点的状态。...world.jsjs方法/*** ECharts地图* @param {Object} dataPoint 点数据* @param {Object} dataLine 线数据* @param {Object} t...
  • 一、前言 开工第一天,打开电脑不知道干啥,下午发现一个私信,询问一个前端问题。...使用ECharts地图的文档 点击事件的文档 画中国地图的资料(这个也不知道谁抄谁的反正看到好多一样的) 四、实操
  • //图表的配置文件 this.mapChartOption1 = { //鼠标放置在地图上的显示 tooltip: { trigger: "item", formatter: (p) => { // console.log('guo'); // console.log(p); //这里p可以获取到所有的数据 let val = p....
  • echarts地图标注一个城市显示城市名,其它的隐藏 目前有个需求,是需要把崇信的名称标注出来,但是其它城市的名称需要隐藏,并且要用不一样的样式颜色、标注大小等; 直接上代码: const series = []; [['崇信',...
  • <p>echarts渲染出的地图,当点击某一块地图区域时,放大该区域。 现在已经实现了放大效果,通过修改地图的center和zoom属性实现的,但是没有过渡动画,求帮助。 $.get...
  • this.chinaChart = echarts.init(this.$refs.Map) 点击事件 this.chinaChart.on('click', (data) => {}) 拖动事件 this.chinaChart.on('georoam', (params) => { // // 如果是拖拽事件,则返回 if (params.dy || ...
  • echarts 3D地图地图区域点击触发事件,3d地图加数据
  • 云南echarts地图资源

    2019-12-30 10:47:45
    云南echarts地图资源
  • echarts 地图json数据全国省市(区县不显示), 精确到市级。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,043
精华内容 417
关键字:

echarts地图标注