使用了示例中的配置,发现scatter3D中地图出现偏移,没次传入值不同,就会出现这样的问题,同时symbol大小固定时,数值为1的图标显示一办
配置项如下
var uploadedDataURL = "/asset/get/s/data-1545447470075-Agehfllqq.js";
var foot = [{
id: "150",
img: "http://127.0.0.1:81/data/upload/portal/20181127/5bfcf8200a048.jpg",
name: "兴隆镇",
title: "流动科技馆-兴隆站",
value: [127.9, 46.44, 10]
}]
var size = parseInt($(window).width());
var mapSize = 100;
if (1720 < size && size < 1920) {
mapSize = 75;
}
if (1200 < size && size < 1720) {
mapSize = 90;
}
// 弹窗详情页的显示和控制
function get(point, params) {
var id = params.data.id;
$('#detail').css({
top: point[1] - 60,
left: point[0] + 120
});
var href = "{:U('Show/flow_content')}" + "/id/" + id;
$('#detail a').attr('href', href);
$('#detail img').attr('src', params.data.img);
$('#detail,#mask').show();
$('#detail h3').text(params.data.title);
$('#mask').click(function() {
$('#detail,#mask').hide();
})
$('#detail').on('mouseleave', function() {
$('#detail,#mask').hide();
})
}
var option = {
tooltip: {
show: true,
backgroundColor: 'transparent',
textStyle: {
color: 'transparent'
},
position: function(point, params, dom, rect, size) {
// 鼠标浮动控制展示的显示
get(point, params)
}
},
geo3D: {
map: 'hlj', // 地图的名称,与hjk.js中的注册地图属性相对应
itemStyle: {
color: 'rgb(220,239,242)', // 颜色值
areaColor: ['rgb(220,239,242)'], // 区域颜色
borderWidth: 2, // 绘制边的粗细
borderColor: '#f5f5f5', // 区域边的颜色
opacity: 1, // 边的透明度
emphasis: {
areaColor: 'rgb(220,239,242)', // 鼠标悬浮的效果
}
},
silent: true,
boxHeight: 15,
instancing: true,
groundPlane: {
show: false
},
aspectScale: 0.92,
layoutCenter: ['50%', '50%'],
layoutSize: 600,
viewControl: {
rotateSensitivity: 0, // 不能旋转
alpha: 70, // x轴旋转
beta: 0,
projection: 'orthographic',
orthographicSize: mapSize,
maxOrthographicSize: mapSize,
minOrthographicSize: mapSize,
animationDurationUpdate: 5,
},
label: {
show: true, // 初始化是否显示文本
textStyle: {
color: '#999', // 地图初始化区域字体颜色
fontSize: 0, // 初始化字体大小
opacity: 1, // 初始化透明度
backgroundColor: '' // 初始化的背景颜色
},
},
emphasis: { //当鼠标放上去 地区区域是否显示名称
label: {
show: true,
textStyle: {
color: '#000',
fontSize: 3,
backgroundColor: ''
}
}
},
light: { //光照阴影
main: {
color: '#fff', //光照颜色
intensity: 1.2, //光照强度
//shadowQuality: 'high', //阴影亮度
shadow: true, //是否显示阴影
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.3
}
}
},
visualMap: {
min: 10,
max: 1000,
textStyle: {
color: '#fff',
},
formatter: function(val) {
return val / 10
},
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [{
name: 'scatter3D',
type: 'scatter3D', // 这里可以选择map(非3d的效果)、bar3D
coordinateSystem: 'geo3D', // 坐标系的旋转
symbol: 'path://M201.142857 58.514286v658.285714s131.657143-160.914286 336.457143-73.142857c80.457143 43.885714 153.6 109.714286 277.942857 109.714286 124.342857 0 204.8-73.142857 204.8-73.142858V43.885714s-182.857143 182.857143-409.6 29.257143C552.228571 29.257143 449.828571-14.628571 369.371429 7.314286 281.6 29.257143 201.142857 58.514286 201.142857 58.514286M54.857143 1024c-29.257143 0-51.2-21.942857-51.2-58.514286V51.2C3.657143 21.942857 25.6 0 54.857143 0s51.2 21.942857 51.2 51.2v914.285714c7.314286 36.571429-14.628571 58.514286-51.2 58.514286z',
//标点的大小
data: foot,
symbolSize: 30,
label: {
normal: {
distance: 10,
position: 'right',
formatter: '{b}',
show: true //根据需求可以更改标点标签是否显示
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#ff5f5f'
},
emphasis: {
color: '#1f6ccc'
}
}
}]
};
myChart.setOption(option);