<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Globe World 3D</title>
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
color: #602bdd;
background-color: rgba(0, 0, 0, 0.8);
}
#main {
width: 100%;
height: 100%;
min-height: 600px;
}
</style>
</head>
<body>
<div id="main"></div>
<script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
<script src="https://unpkg.com/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
<script>
var globeChart = null;
var mapChart = null;
function setMapOption(data) {
echarts.registerMap("world", data);
const canvas = document.createElement("canvas");
mapChart = echarts.init(canvas, null, {
width: 2048,
height: 1024,
});
mapChart.setOption({
backgroundColor: "rgba(3, 52, 93,.1)",
geo: {
type: "map",
map: "world",
top: 0,
left: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90],
],
itemStyle: {
borderWidth: 1,
normal: {
borderColor: "rgba(255,255,255,0.7)",
areaColor: "rgba(0, 90, 171, 1)",
label: {
show: false,
},
},
},
emphasis: {
itemStyle: {
areaColor: "#602bdd",
borderColor: "#f29100",
},
},
},
series: [
{
type: "scatter",
coordinateSystem: "geo",
label: { show: true },
data: [
{
value: [103.012761, 33.113421],
label: {
color: "rgba(25, 228, 253, 1)",
fontSize: 12,
fontWeight: "bold",
formatter: "GDP: 126.06 trillion yuan",
},
},
],
},
],
});
}
function setGlobeOption(param) {
var globeChart = echarts.init(document.getElementById("main"));
globeChart.setOption({
globe: {
baseTexture: mapChart,
shading: "realistic",
realisticMaterial: {
roughness: 0.7,
metalness: 0.5,
},
light: {
ambient: {
intensity: 0.6,
},
main: {
intensity: 1,
shadow: true,
},
},
postEffect: {
enable: true,
bloom: 10,
},
viewControl: {
center: [0, 0, 0],
alpha: 20,
beta: 50,
autoRotate: true,
autoRotateAfterStill: 3,
distance: 200,
autoRotateSpeed: 15,
},
},
});
}
// 鍔犺浇涓栫晫鍦板浘鏁版嵁
fetch("https://unpkg.com/@surbowl/world-geo-json-zh@2.1.4/world.zh.json")
.then((res) => res.json())
.then((geojson) => {
setMapOption(geojson);
setGlobeOption();
});
</script>
</body>
</html>