CesiumJS 案例 P35：添加图片图层（添加图片数据）
CesiumJS
- CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）
-
CesiumJS 官网：https://www.cesium.com/
-
CesiumJS 下载地址：https://www.cesium.com/platform/cesiumjs/
-
CesiumJS API 文档：https://cesium.com/learn/cesiumjs/ref-doc/index.html
添加图片图层（添加图片数据）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ImageryProvider - 添加图片图层（添加图片数据）</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");const west = 0; // 西经（西经为负）const south = 0; // 南纬（南纬为负）const east = 10; // 东经（东经为正）const north = 10; // 北纬（北纬为正）imageToBase64("../img/test.jpg", (base64) => {// 创建图片图层const imageryProvider = new Cesium.SingleTileImageryProvider({url: base64,rectangle: Cesium.Rectangle.fromDegrees(west, south, east, north),});const imageryLayer = viewer.imageryLayers.addImageryProvider(imageryProvider);});function imageToBase64(url, callback) {const img = new Image();img.crossOrigin = "Anonymous";img.onload = function () {const canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0);const base64 = canvas.toDataURL("image/jpeg");callback(base64);};img.src = url;}</script>
</html>