发表于-1-16 16:30
悬赏1
未解决
楼主
请问如何修改下面的脚本能够实现Echarts自定义的标点地图(这段代码的option部分加上格式化出来的数据res能够在Echarts上能够运行出来正确标点地图，只不过是中国地图)
//区域名称及值
varcaptions = '';
varvalues='';
captions = eval(captions);
values=eval(values);
//存放点击事件
vardqCell='GRID1.A1'
varclickStrMap={};
vardq='';
varbiaodian='';
//地图副标题
vartitleShow=true;
var secondTitle='我是地图副标题';
//注册地图
if(!dq){
dq='黔东南';
biaodiandq="biaodian";
}
var pathurl =EUI.getContextPath() + 'vfs/root/mapjson/'+dq+'.json';//地图json
var datas= EUI.QueryObj.create(pathurl);
var geoJson= datas.getResponseJSON();
console.log(dq,"geoJson:",geoJson);
echartsesen.registerMap(dq,geoJson);
var biaodianpathurl =EUI.getContextPath() + 'vfs/root/mapjson/'+biaodiandq+'.txt';//标点的经纬度信息
var biaodiandatas= EUI.QueryObj.create(biaodianpathurl);
var biaodiangeoJson= biaodiandatas.getResponseJSON();
console.log(biaodiandq,"biaodiangeoJson:",biaodiangeoJson);
//格式化地图数据
functionformatData(captions,values){
vardataArray=new Array();
console.log("captions",captions);
console.log("values",values);
for(var i=0;i
var obj={name:captions,value:values};
dataArray.push(obj);
}
return dataArray;
}
//格式化标点数据
function concatData(arrayData) {
console.log("arrayData",arrayData.length);
var res =new Array();
for (var i = 0; i < arrayData.length; i++) {
var geoCoord = biaodiangeoJson[arrayData.name];
console.log("geoCoord",geoCoord);
if(geoCoord) {
var obj={name: arrayData.name,value: geoCoord.concat(arrayData.value)};
res.push(obj);
}
}
return res;
}
var tmp=formatData(captions,values);
console.log("dataArray",tmp);
var tempData=concatData(tmp);
console.log("res",tempData);
//表元点击事件
var getClickStr = function (rowIndex,tableDom,colIndex){
return tableDom.children[rowIndex].children[colIndex].children[0].getAttribute("onclick");
}
vargetClickStrMap =function(clickStrMap,dqCell,captions){
var gridName = dqCell.split(".")[0];
var cellName= dqCell.split(".")[1];
var colIndex = cellName.charAt(0).charCodeAt()-65;
var startRowIndex= cellName.charAt(1)-1;
var tableDom = g_rptpage.getGridById(gridName).tabdom.firstElementChild.nextElementSibling;
var capLen=captions.length;
for(var i=0;i
var rowIndex =startRowIndex + i;
clickStrMap[captions] = getClickStr(rowIndex,tableDom,colIndex);
}
}
getClickStrMap(clickStrMap,dqCell,captions);
myChart.clickStrMap=clickStrMap;
var option = {
tooltip: {},
visualMap: {
min: 0,
max: 1500,
left: 'left',
top: 'bottom',
text: ['High','Low'],
seriesIndex: [1],
inRange: {
color: ['#e0ffff', '#006edd']
},
calculable : true
},
geo: {
map: 'china',
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal:{
borderColor: 'rgba(0, 0, 0, 0.2)'
}
}
},
series : [
{
type: 'scatter',
coordinateSystem: 'geo',
//data: convertData(data),
data: res,
symbolSize: 20,
symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00'
}
}
}
]
};
//绑定点击事件
myChart.on("click",function(params){
var self=this;
var dq=params.name;
if(dq){
var clickStr=this.clickStrMap[params.name];
eval(clickStr);
}
});
return option;
/*以下是读取资源管理器里的文件格式化出来的res
res = [
{
"name": "凯里市",
"value": [
107.977541,
26.582964,
76.5779558
]
},
{
"name": "凯里站",
"value": [
107.982583,
26.607196,
70.2523303
]
},
{
"name": "凯里南站",
"value": [
107.894046,
26.518008,
24.8582357
]
},
{
"name": "黄平县",
"value": [
107.901337,
26.896973,
36.7851834
]
},
{
"name": "施秉县",
"value": [
108.12678,
27.034657,
22.9946154
]
},
{
"name": "三穗县",
"value": [
108.681121,
26.959884,
75.6305307
]
},
{
"name": "从江县",
"value": [
108.912648,
25.747058,
58.6900758
]
},
{
"name": "雷山县",
"value": [
108.079613,
26.381027,
87.6251433
]
},
{
"name": "麻江县",
"value": [
107.593172,
26.494803,
34.5340544
]
},
{
"name": "丹寨县",
"value": [
107.794808,
26.199497,
30.6691709
]
}
]
*/
vfs.zip
(40.6 KB, 下载次数: 0)
-1-16 16:30 上传
点击文件名下载附件
标点坐标及两个地图json文件
最近看过此主题的会员
如果觉得《echarts 世界地图标点_Echarts自定义实现标点地图》对你有帮助，请点赞、收藏，并留下你的观点哦！
