echarts + echarts-gl - 使用geo3D + map3D + scatter3D做3d地图
一、使用插件
echarts@5.2.2、echarts-gl@2.0.8、jquery;jquery 是使用ajax加载json文件的。
二、准备地图json文件
因为找了一圈，网上的地图js文件都需要花钱去购买，json文件可以在阿里云数据可视化平台下载，下载链接为：免费地图json文件下载
ECharts 提供了两种格式的地图数据，一种是可以直接通过 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。
下面是两种类型的使用使用示例：
// javascript引入示例 <script src="echarts.js"></script> <script src="map/js/china.js"></script> <script> var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); </script>// json引入示例 $.get('map/json/china.json', function (chinaJson) { echarts.registerMap('china', chinaJson); var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); });
三、上代码（含详细注释）
文件目录
文章来源：https://www.toymoban.com/news/detail-602608.html
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d地图</title>
<style>
*{
padding: 0;
margin: 0;
}
.chart{
width: 100vw;
height: 100vh;
background-color: #020202;
}
</style>
</head>
<body>
<div class="chart" id="chart"></div>
<!-- 引入jq -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./mapData/echarts.js"></script>
<script src="./mapData/echarts-gl.js"></script>
<script>
let chart = null;
// 图表配置
let options = {};
// 地图贴图图片
let bg = '';
// 视图容器
const chartEle = document.getElementById('chart');
// geo3d + map3d公用图表配置
const setting = {
top: '0%',
right: '0%',
bottom: '-20%',
distance: 90,
alpha: 50,
beta: 5,
regionHeight: 6,
}
// 地图上显示的数据
const mapData = {
geoCoordMap: {
广东省: [113.429919, 23.334643, 50],
云南省: [101.485106, 25.008643, 50],
辽宁省: [122.604994, 41.299712, 50],
},
projectData: [
{ name: '广东省', value: (Math.random() * 300).toFixed(2), projectName: 'OA系统' },
{ name: '云南省', value: (Math.random() * 300).toFixed(2), projectName: '项目管理系统' },
{ name: '辽宁省', value: (Math.random() * 300).toFixed(2), projectName: '人工智能园区' },
],
}
// 适配不同尺寸浏览器，避免地图上的字号过小或过大
function getSize(res) {
const docEl = document.documentElement;
const clientWidth = window.innerWidth || document.documentElement.clientWidth
|| document.body.clientWidth;
if (!clientWidth) return;
const fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
}
// 转化已有数据到地图上显示的配置数据
function convertData(data) {
const res = [];
// eslint-disable-next-line no-plusplus
for (let i = 0; i < data.length; i++) {
const geoCoord = mapData.geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
projectName: data[i].projectName,
label: {
show: true,
position: 'top',
distance: -5,
formatter(param) {
return `{sty1|${param.data.projectName}}`;
},
rich: {
sty1: {
padding: getSize(0.07),
backgroundColor: 'rgba(7, 28, 38, 0.7)',
borderWidth: 1,
borderColor: '#FF771A',
borderRadius: 2,
fontSize: getSize(0.14),
},
},
textStyle: {
color: '#ffffff',
},
},
emphasis: {
label: {
show: true,
position: 'top',
distance: 0,
formatter(param) {
return `{sty1|${param.data.projectName}}`;
},
rich: {
sty1: {
padding: 7,
backgroundColor: 'rgba(7, 28, 38, 0.7)',
borderWidth: 1,
borderColor: '#FF771A',
borderRadius: 2,
fontSize: getSize(0.14),
},
},
textStyle: {
color: '#ffffff',
},
},
},
});
}
}
return res;
}
// 获取图表配置
function getOptions() {
const options = {
tooltip: {
show: false,
trigger: 'item',
},
textStyle: {
color: '#ffffff', // 高亮时标签颜色变为 白色
fontSize: 6, // 高亮时标签字体 变大
},
// 地图主要配置
geo3D: {
show: true,
map: 'map',
boxHeight: 10,
top: setting.top,
right: setting.right,
left: '0%',
bottom: setting.bottom,
regionHeight: setting.regionHeight, // 三维高度
shading: 'realistic',
realisticMaterial: {
detailTexture: bg, // 纹理贴图
textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
},
label: { // 标签的相关设置
show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
distance: 20,
formatter(param) {
const city = (param.name).substr(0, 2);
return `{sty1|${city}}`;
},
rich: {
sty1: {
color: '#ffffff',
fontSize: getSize(0.14),
align: 'center',
},
},
textStyle: { // 标签的字体样式
color: '#ffffff', // 地图初始化区域字体颜色
opacity: 1, // 字体透明度
},
},
itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
color: '#FE9D0B', // 地图板块的颜色
// color: '#00F6FF',
opacity: 1, // 图形的不透明度 [ default: 1 ]
borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
borderColor: '#A74A11', // 图形描边的颜色。[ default: #333 ]
},
emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
label: { // label高亮时的配置
show: true,
textStyle: {
color: '#fff', // 高亮时标签颜色变为 白色
fontSize: getSize(0.15), // 高亮时标签字体 变大
},
},
},
light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。
// 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
color: '#ffeeee', // 主光源的颜色。[ default: #fff ]
intensity: 1.1, // 主光源的强度。[ default: 1 ]
shadow: true, // 主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
},
ambient: { // 全局的环境光设置。
color: '#fff', // 环境光的颜色。[ default: #fff ]
intensity: 0.1, // 环境光的强度。[ default: 0.2 ]
},
},
viewControl: {
projection: 'perspective',
distance: setting.distance,
beta: setting.beta,
alpha: setting.alpha,
},
},
series: [
// 叠加地图上需要显示的数据，插牌
{
type: 'scatter3D',
name: 'scatter3D',
coordinateSystem: 'geo3D',
symbol: 'path://M262.775253 0m64 0l0 0q64 0 64 64l0 896q0 64-64 64l0 0q-64 0-64-64l0-896q0-64 64-64Z',
symbolSize: [4, 28],
itemStyle: {
color: '#FF771A',
opacity: 1,
},
data: convertData(mapData.projectData),
},
// 使用和geo3d的配置数据，叠加一层暗沉的厚度
{
name: 'map3D', // series名称
type: 'map3D', // series图表类型
map: 'map',
top: setting.top,
right: setting.right,
left: '0%',
bottom: setting.bottom,
regionHeight: setting.regionHeight - 0.2, // 三维高度
label: { // 标签的相关设置
show: false, // (地图上的城市名称)是否显示标签 [ default: false ]
},
itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
color: '#95830A', // 地图板块的颜色
opacity: 1, // 图形的不透明度 [ default: 1 ]
borderWidth: 0, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以清晰的区分每个区域
borderColor: '#A74A11', // 图形描边的颜色。[ default: #333 ]
},
emphasis: { // 鼠标hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
label: { // label高亮时的配置
show: false,
},
},
viewControl: {
projection: 'perspective',
distance: setting.distance,
beta: setting.beta,
alpha: setting.alpha,
},
},
],
};
return options;
}
// 初始化图标
function init() {
const that = this;
if (chart) {
chart.clear();
}
// 加载贴图材质图片
const img = document.createElement('img');
img.src = 'mapData/ebg.jpg';
bg = img;
// 初始化
chart = echarts.init(chartEle);
chart.showLoading({
maskColor: 'rgba(0, 0, 0, 0.2)',
});
// 获取地图数据
$.getJSON('mapData/nation.json', (json) => {
echarts.registerMap('map', json);
chart.hideLoading();
options = getOptions();
chart.setOption(options);
setTimeout(() => {
window.addEventListener('resize', () => {
that.chart.resize();
that.init();
});
}, 200);
});
}
// 执行
init();
</script>
</body>
</html>
效果
文章来源地址https://www.toymoban.com/news/detail-602608.html
到了这里，关于echarts + echarts-gl - 使用geo3d + map3d + scatter3D做3d地图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
