我用的是 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);
});
}