1.scale:
外部缩放参数,主要针对外部有 transform: scale;通过传入scale值,使地图事件模拟保持正确。
2.width:
绘图区宽度。
3.height:
绘图区高度。
1.options:
地图配置,子级参数除options.baseConfig.map和options.baseConfig.mapOutline
均为可选,不传使用默认,传入覆盖默认:
{
background: 'none',//绘图区背景色
baseConfig: {//地图基础配置
map: {},//地图数据,子级区域轮廓数据(*必要参数)
mapOutline: {},//地图外轮廓数据(*必要参数)
rotation: [0, 0, 0],//地图部分旋转参数
position: [0, 0, this.height / 15],//地图部分位置参数
scale: 1,//地图部分缩放参数
thickness: 35,//地图厚度
rotateAnimation: {//地图旋转动画参数
on: false,//开启地图自转功能(旋转开启后,请控制区域itemStyle透明度opacity为1,否则会出现标识黑底情况,three.js贴图使用透明材质,下面又叠加透明材质的bug,three.js框架bug,暂无法解决)
speed: 1//自转速度
},
labelAnimation: true,//地图标识图标闪烁动画控制
mapStyle: {//地图样式(注:地图分4层,最上层为子区域层,在options.itemStyle中配置,该处配置外轮廓主图3层样式)
top: {//顶部薄片层
color: '#056CE3',
opacity: 0.3
},
center: {//中间厚度层
color: '#004493',
opacity: 0.5
},
bottom: {//底部薄片层
color: '#0062DB',
opacity: 1
}
},
plate: {//底部旋转圆盘控制
show: true,
position: [0, 0, -this.height / 2],
rotation: [0.8 * Math.PI, 0, 0]
}
},
linesConfig: {//飞线配置参数
show: false,
type: 'dash',//飞线类型,可选dash(虚线)和solid(实线)
color: '#F4E925',//飞线颜色
symbolColor: '#F4E925',//飞线动画实体颜色
symbolSize: 1,//飞线动画实体尺寸缩放控制
height: 300,//飞线最高点高度
symbolDefine(THREE){//自定义沿飞线运动的symbol实体,新手可查阅three.js相关手册
return new THREE.Mesh(new THREE.SphereGeometry(10, 50, 50), new THREE.MeshBasicMaterial({
color: '#F4E925'
}));
}
},
eventDebounceConfig: {//事件节流函数控制参数
on: false,//是否开启事件节流函数
duration: 50//节流时间
},
itemStyle: {//地图最上层子区域层样式配置
normal: {//非激活状态
color: '#00ccff',
opacity: 0.2,
borderColor: '#00DFFF'//轮廓线颜色
},
active: {//激活状态
color: '#91D5FF',
opacity: 0.3,
borderColor: '#00DFFF'
}
},
labelStyle: {//地图区域标识样式
color: '#ffffff',
fontSize: 14,
icon: '',//使用base64编码图标
iconWidth: 14,//图标尺寸宽
iconHeight: 14//图标尺寸高
},
eventHooks: [{//地图事件监听
type: 'click',//绑定事件类型
active: true,//事件是否触发激活状态
select: true,//事件是否触发区域选中
handle(data){//事件触发回调句柄(data.data: 事件外传数据;data.e:事件详情参数,用于外部根据地图事件添加需要定位的dom元素相关功能)
console.log(data);
},
cancelHandle(){//事件反向取消句柄,用于控制操作地图外让地图取消选中和某些外部handle触发功能
console.log(999)
}
}, {
type: 'mousemove',
active: true
}],
series: [{//地图拓展功能
type: 'item-data',//地图子区域数据绑定,样式自定义控制
data: [{
name: '合肥市',//区域名称
code: '340100',//区域编码(优先使用code匹配item对应项,其次使用name,两者都无法匹配中则不处理)
itemStyle: {},//覆盖options.itemStyle统一配置
labelStyle: {},//覆盖options.labelStyle统一配置
data: {//需要绑定的事件外传数据
a: 1,
b: 2
}
}]
}, {
type: 'line-data',//飞线数据,支持中文地名(请保持中文地名准确)和经纬度两种方式
data: [['合肥市', '六安市'], [[117.283042, 31.86119], [116.2, 33.3]], ['合肥市', '宣城市']]//支持中文名和准确坐标两种方式
}]
}