3D环球地图-英文版本HTML

夜空繁星vv

已于 2022-12-04 18:26:02 修改

阅读量656

点赞数 1

分类专栏： js 文章标签： 3d html echarts

于 2022-12-04 18:25:36 首次发布

本文链接：https://blog.csdn.net/weixin_43852094/article/details/128175236

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端html写的3D环球地图英文办-笔记记录

在这里插入图片描述

实现的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

* {
  margin: 0;
  padding: 0;
}
 
html,
body {
  height: 100%;
  width: 100%;
}
</style>
<script src="./js/echarts.min.js"></script>
<script src="./js/echarts-gl.min.js"></script>
</head>
<body>

<div id="earth" style="width: 100%; height: 100%"></div>
</body>
<script type="text/javascript">

var dom = document.getElementById("earth")
var myChart = echarts.init(dom);
var baseTexture = null
var option = null
var geoJson = null
 
// 加载世界地图
function getGeoJsonData() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', './js/world.json', false);
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200 || xhr.status == 304) {
        geoJson = JSON.parse(xhr.responseText)
        getBaseTexture()
      }
    }
  }
  xhr.send();
}
 
// 使用echarts生成贴图，用于创建球体表面纹理
function getBaseTexture() {
  echarts.registerMap("world", geoJson);
  let canvas = document.createElement("canvas");
  baseTexture = echarts.init(canvas, null, {
    width: 4096,
    height: 2048
  });
  baseTexture.setOption({
    backgroundColor: "rgb(3,28,72)",
    geo: {
      type: "map",
      map: "world",
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      boundingCoords: [
        [-180, 90],
        [180, -90],
      ],
      zoom: 0,
      roam: false,
      itemStyle: {
        borderColor: "#000d2d",
        normal: {
          areaColor: "#2455ad",
          borderColor: "#000c2d",
        },
        emphasis: {
          areaColor: "#357cf8",
        },
      },
      label: {
        normal: {
          fontSize: 20,
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
        emphasis: {
          fontSize: 30,
          show: true,
          textStyle: {
            color: "yellow",
          },
        },
      },
    },
  });
  drawEarth()
}
 
// 绘制球体
function drawEarth() {
  option = {
    backgroundColor: "#013954",
    tooltip: {
      trigger: "item",
    },
    globe: {
      baseTexture: baseTexture,
      globeRadius: 150,
      environment: "#000",
      //shading: "lambert",
      shading: "color",
      light: {
        // 光照阴影
        main: {
          color: "#fff", // 光照颜色
          intensity: 1, // 光照强度
          //shadowQuality: "high", //阴影亮度
          //shadow: true, // 是否显示阴影
          alpha: 40,
          beta: -30,
        },
        ambient: {
          color: "#fff",
          intensity: 1,
        },
      },
      viewControl: {
        alpha: 30,
        beta: 160,
        // targetCoord: [116.46, 39.92],
        autoRotate: true,
        autoRotateAfterStill: 10,
        distance: 240,
      },
    },
    series: [
      {
        name: "lines3D",
        type: "lines3D",
        coordinateSystem: "globe",
        effect: {
          show: true,
        },
        blendMode: "lighter",
        lineStyle: {
          width: 2,
        },
        data: [],
        silent: false,
      },
    ],
  };
  // 随机数据 i控制线数量
  for (let i = 0; i < 100; i++) {
    option.series[0].data = option.series[0].data.concat(randomData());
  }
  myChart.setOption(option, true);
}
 
// 随机生成起始及终点经纬度坐标
function randomData() {
  let name = "随机点" + Math.random().toFixed(5) * 100000;
  // 起点经纬度-北京
  let longitude = 116.2, latitude = 39.56;
  // 随机终点经纬度
  let longitude2 = Math.random() * 360 - 180;
  let latitude2 = Math.random() * 180 - 90;
  return {
    coords: [
      [longitude, latitude],
      [longitude2, latitude2],
    ],
    value: (Math.random() * 3000).toFixed(2),
  };
}
 
// 初始化入口
getGeoJsonData()


</script>

</html>

3D环球地图重要文件下载链接-https://download.csdn.net/download/weixin_43852094/87241548

点击链接加入群聊【问题交流群】：https://qm.qq.com/cgi-bin/qm/qr?k=sI1HQw6MVRVDruwDOaiL4oQz9d6NF2Nn&authKey=v047sYXV29VsjoW/FOMAMbsDpzV164ZTiv2oVOE+ZzCs48Nvhvh40EK30qD2dxww&noverify=0

在这里插入图片描述