绘制echarts地图（小圆点，发射线）

我用的是 jquery还有echarts

第一步：寻找你需要的地图.json文件，下载后放到目录下 留着备用（注：地点区分可以理解为是身份证号区分）；

第二步：开始写代码（需要查询标点及中心点的经纬坐标）

$(function(){
        created();
    });
    function created(){
        var sanData=[
            [{name: '义乌机场', value: 1}],
            [{name: '义乌站', value: 2}],
            [{name: '松山风景区', value: 3}],
            [{name: '福田湿地公园', value: 4}],
            [{name: '凌云寺', value: 5}]
        ];
        var geoCoordMap={
            '义乌机场':[119.933733,29.27913],
        '义乌站':[120.049674,29.385449],
        '松山风景区':[120.072383,29.137404],
        '福田湿地公园':[120.145973,29.339617],
        '凌云寺':[119.719277,29.107542],
        };
        var fromCoord='义乌机场'  //中心点
 
        var convertData = function (data) {
            console.log(data);
            var res = [];
            for (var i = 0; i < data.length;i++) {
            console.log('***',data[i]);
            var dataItem = data[i];  
            var  fromCoord= geoCoordMap[dataItem[0].name]; 
            console.log('fromCoord',fromCoord);
            var toCoord =[119.933733,29.27913]; //中心点地理坐标
            if (dataItem) {
                res.push([
                    {
                        coord:toCoord,//出发点
                    },{
                        coord:fromCoord,//终点
                        value:dataItem[0].value,
                    }
                ]);
 
            };
        }
        console.log('数据的信息',res);//数据的信息
        return res;
        };
    var series=[];
    [[fromCoord,sanData]].forEach(function(item,i){
        console.log('62',item);
        // item[1].map(x=>{
        //     console.log(x);
        // })
        console.log('item[1]',item[1]);
        series.push(
                  {
                    type: 'lines',
                    coordinateSystem: 'geo',
                    zlevel: 0,
                    effect: {
                      show: true,
                      period: 4, //箭头指向速度，值越小速度越快
                      trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                      symbol: 'arrow', //箭头图标
                      symbolSize: 12, //图标大小
                      color: '#fcdd6e', // 图标颜色
                    },
                    lineStyle: {
                      normal: {
                        show: true,
                        width: 1, //尾迹线条宽度
                        opacity: 1, //尾迹线条透明度
                        curveness: 0.1, //尾迹线条曲直度
                        color: '#fcdd6e', // 飞线颜色
                      },
                      color: '#fcdd6e',
                    },
                    data: convertData(item[1]),
                  },
                  {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel:-1,
                    rippleEffect: {
                      //涟漪特效
                      period: 4, //动画时间，值越小速度越快
                      brushType: 'stroke', //波纹绘制方式 stroke, fill
                      scale: 3, //波纹圆环最大限制，值越大波纹越大
                      color: '#fcdd6e',
                    },
                    label: {
                      normal: {
                        show: false,
                        position: 'right', //显示位置
                        offset: [5, 0], //偏移设置
                        formatter: function (params) {
                          //圆环显示文字
                          return params.data.name
                        },
                        fontSize: 13,
                      },
                      emphasis: {
                        show: false,
                      },
                    },
                    symbol: 'circle',
                    symbolSize: function (val) {
                      return 16 //圆环大小
                    },
                    itemStyle: {
                      normal: {
                        show: false,
                        color: '#fce182',
                      },
                    },
                    data: item[1].map(function (dataItem) {
                    console.log(dataItem);
                      return {
                        //在这里定义你所要展示的数据
                        // name: dataItem[0].name,
                        // value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
                        name: dataItem[0].name,
                        value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
                      }
                    }),
                  },
                  //中心点
                  {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 0,
                    rippleEffect: {
                      period: 4,
                      brushType: 'stroke',
                      scale: 8,
                      color: '#38ff85',
                    },
                
                    label: {
                      normal: {
                        show: false,
                        position: 'right',
                        //offset:[5, 0],
                        color: '#38ff85',
                        formatter: '{b}',
                        textStyle: {
                          color: '#38ff85',
                        },
                      },
                      emphasis: {
                        show: false,
                        color: '#38ff85',
                      },
                    },
                    symbol: 'circle',
                    symbolSize:29,
                    itemStyle: {
                      color: '#38ff85',
                    },
                    data: [
                      {
                        name: item[0],
                        value: geoCoordMap[item[0]].concat([10]),
                      },
                    ],
                  }
                )
    });
    initchartForjs(series);
    };
 
 
//引入相应的js文件，然后就可以加载相应的地图
function initchartForjs(series) {
    // console.log('成功调用',data);
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
 
    $.get('map/json/citys/330700.json', function (geoJson){
        console.log('111',geoJson);  //下面的县及坐标点
        var is=[];
        var geoJson2={features:[]};
        $(geoJson.features).each(function(i,item){
            
                console.log(item);
                // if(item.properties.name=="金东区"||item.properties.name=="义乌市"){
                    geoJson2.features.push(item);
                // };
        });
        $(is).each(function(k,index){
            //geoJson.features.splice(index,1);
        });
        echarts.registerMap('xz', geoJson2);  //导入地图
        var option = {
            
            title:{
                text:'义乌市',
                symbolSize:45,
                x:'center',
                y:'center',
                textStyle: {
                fontSize: 24,
                fontWeight: 'bolder',
                color: 'black'          // 主标题文字颜色
            },
            },
            tooltip : {
                trigger: 'item',
                // formatter: '{b}'
            },
            visualMap: {
                  //颜色的设置  dataRange
                  // textStyle: { color: '#1a1e45' },
                  x: 'left',
                  y: 'bottom',
                  // splitList: [{ start: 0, end: 150000 }],
                  show: false,
                  // text:['高','低'],// 文本，默认为数值文本
                  // color: ['#1a1e45'],
                },
            geo:{
                show:true,
                map:'xz',
                label:{//绘制地图
                    normal:{show:true},
                    emphasis:{show:false},
                },
                roam: false, //是否允许缩放
                itemStyle:{
                        normal: {
                            areaColor: '#00405b',  //地图背景
                            borderColor: '#1290cc', //是边界线
                            borderWidth: 2,
                            color:'#fff',
                            label:{color:'#fff',show:false}
                        },
                        emphasis: {
                            areaColor: '#00405b',
                            borderColor: '#1290cc',
                            label:{color:'#fff',show:true}
                        }
                },
                zlevel: -1,
                data:{
                    name:'义乌市',
                    
                }
            },
        
            series 
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });
  
}复制