xyj3d · 高性能 Cesium 封装插件

基于 Cesium.js 的三维地理可视化封装库：图层、覆盖物、影像、地形、材质、特效、测量、标绘开箱即用，用简洁的 API 快速做出专业的三维地球应用。

快速开始查看示例

核心特性

把 Cesium 摊平的底层 API 收成一套顺手的封装

⚡

卓越性能

图元族与实体族双通道，支持批次渲染与自定义材质；大数据量场景下依然流畅。

🧩

高度可配置

场景、图层、工具的默认值全部可覆盖，false 也能真正生效，不会被默认值吞掉。

🗂

多源数据支持

GeoJSON / TopoJSON / KML / GPX / CZML / 3D Tiles / I3S，以及 WMS、WMTS、XYZ、TMS 标准服务。

🛰

国内底图开箱用

高德、百度、腾讯、天地图、星图内置 GCJ02 / BD09 切片方案，不再整体偏移几百米。

🎯

标绘与测量

军标箭头、集结地、贝塞尔曲线；距离、面积、贴地距离、角度、高度等 9 种测量。

📱

跨端一致

桌面、移动、平板统一体验，触摸手势与鼠标交互共用一套拾取与事件分发。

快速开始

三步把三维地球跑起来

引入 Cesium 与 xyj3d

Cesium 由宿主页面以 <script> 注入，本库把它当作全局变量。

创建场景

new xyj3d.Viewer('map')，容器 id 或元素本身都可以。

加图层与覆盖物

底图、图层、图形、定位、事件，一行一件事。

<!-- 1. Cesium 必须先加载，并暴露为全局变量 Cesium -->
<link rel="stylesheet" href="Cesium/Widgets/widgets.css" />
<script src="Cesium/Cesium.js"></script>
<script src="xyj.3d.min.js"></script>

// 2. 创建场景
const viewer = new xyj3d.Viewer("map", { shouldAnimate: true });

// 3. 加载底图（天地图，key 到官网申请）
const base = xyj3d.imagery.ImageryLayerFactory.createImageryLayer(
  xyj3d.imagery.TDT, { key: "your-tianditu-token", style: "img_w" }
);
viewer.addBaseLayer(base);

// 4. 建图层 + 加点
const layer = new xyj3d.layer.GraphicLayer("graphic");
viewer.addLayer(layer);
const point = new xyj3d.entity.PointEntity([105.97, 35.0]);
point.setStyle({ pixelSize: 12, color: xyj3d.Color.from("#ff3300") });
layer.addGraphic(point);
viewer.flyTo(point);