<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D地图</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/echarts-gl.min.js"></script>
</head>
<body>
<!-- 3D地图容器 -->
<div id="main" style="width: 100%; height: 800px;"></div>
<script>
// 初始化图表
var myChart = echarts.init(document.getElementById('main'));
// JSON文件(地图数据)路径
var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v3/bound/230000_full.json";
// 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画,在数据加载完成后调用 hideLoading 隐藏加载动画。
myChart.showLoading();
// 引入JSON文件
$.getJSON(uploadedDataURL, function(geoJson) {
// 注册地图名字(china)和数据(geoJson)
echarts.registerMap('china', geoJson);
// 隐藏动画加载效果。
myChart.hideLoading();
// 图表配置项
var option = {
title : { // 标题
top : '5%',
text : '3D地图',
subtext : '',
x : 'center',
textStyle : {
color : '#ccc'
}
},
tooltip: {
show: true,
},
geo3D: {
map: 'china',
roam: true,
regionHeight: 5, //地图厚度
itemStyle: {
color: '#326a9a',
opacity: 0.8,
borderWidth: 0.8,
borderColor: '#c3d7de'
},
label:{
normal:{
show:false,
},
emphasis:{
show:false,
},
},
emphasis: { //当鼠标放上去 地区区域是否显示名称
disabled: true, //是否可以被选中
label: {
formatter: function(params) { // 鼠标经过的回调函数
// console.log('hover', params)
dataObj = params;
return params.name
},
},
},
light: { //光照阴影
main: {
color: '#fff', //光照颜色
intensity: 1.2, //光照强度
shadowQuality: 'high', //阴影亮度
shadow: false, //是否显示阴影
alpha: 55,
beta: 10
},
ambient: {
intensity: 0.3
}
},
viewControl: {
distance: 120, // 地图视角 控制初始大小
// rotateSensitivity: 0, // 旋转
// zoomSensitivity: 0, // 缩放
// autoRotate: false,
// maxBeta: Infinity,
// minBeta: -Infinity,
// beta: -15, //旋转视角
alpha: 35, //视角
panMouseButton: 'left',
rotateMouseButton: 'right',
center: [-1, 0, 5],
},
},
series: [
{
type: 'scatter3D',
coordinateSystem: 'geo3D',
symbolSize: 5,
rippleEffect: {
//坐标点动画
period: 3,
scale: 5,
brushType: 'fill'
},
data: [
{
name: "阿城区",
value: [126.972726,45.538372],
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: '#f99',
fontWeight: "bold",
fontSize: 18
}
},
itemStyle: {
normal: {
color: 'red'
}
},
},
{
name: "牡丹江",
value: [129.650322,44.567084],
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}',
color: '#f99',
fontWeight: "bold",
fontSize: 18
}
},
itemStyle: {
normal: {
color: 'blue'
}
},
},
{
name: "齐齐哈尔",
value: [123.891969,47.388143],
label: {
normal: {
show: false,
position: 'right',
formatter: '{b}',
color: '#f99',
fontWeight: "bold",
fontSize: 18
}
},
itemStyle: {
normal: {
color: 'black'
}
},
},
{
name: "伊春",
value: [128.859239,47.743023],
label: {
normal: {
show: false,
position: 'right',
formatter: '{b}',
color: '#f99',
fontWeight: "bold",
fontSize: 18
}
},
itemStyle: {
normal: {
color: 'orange'
}
},
},
],
},
],
};
myChart.setOption(option);
});
</script>
</body>
</html>
echarts 3D 地图 点标记
最新推荐文章于 2024-06-19 15:10:02 发布