diff --git a/src/scene/CesiumGlobe.js b/src/scene/CesiumGlobe.js index 97006f6..9cfbe10 100644 --- a/src/scene/CesiumGlobe.js +++ b/src/scene/CesiumGlobe.js @@ -54,7 +54,7 @@ function sphericalAreaKm2(polys) { // 生成便签 canvas:黄底圆角 + 左侧箭头 + 黑色加粗文字(整张图,箭头尖端指向坐标) function makeStickyNote(text, fontSize, selected = false) { - const padX = 10, padY = 6, radius = 8, arrowW = 12, arrowH = 16, S = 2; // S: 2x 超采样 + const padX = 8, padY = 5, radius = 7, arrowW = 10, arrowH = 14, S = 2; // S: 2x 超采样 const font = `bold ${fontSize}px "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif`; const m = document.createElement('canvas'); const mctx = m.getContext('2d'); @@ -260,8 +260,8 @@ export class CesiumGlobe { _buildMarkers() { ENTRIES.forEach((entry, i) => { const position = Cesium.Cartesian3.fromDegrees(entry.lng, entry.lat); - const noteNormal = makeStickyNote(entry.name, 19, false); - const noteSelected = makeStickyNote(entry.name, 19, true); + const noteNormal = makeStickyNote(entry.name, 16, false); + const noteSelected = makeStickyNote(entry.name, 16, true); this.markers.push({ position, noteNormal, noteSelected, index: i }); }); this._initMarkerLayer(); @@ -415,7 +415,7 @@ export class CesiumGlobe { // 全部城市:Natural Earth 10m 人口稠密点(7342 个),中文名直接用数据自带的 name_zh async _buildCityLabels() { - const viewer = this.viewer; + const scene = this.viewer.scene; const textGold = Cesium.Color.fromCssColorString('#e0c46a'); const black = Cesium.Color.fromCssColorString('#14100d'); const ddc = new Cesium.DistanceDisplayCondition(0, 4e6); @@ -430,30 +430,36 @@ export class CesiumGlobe { cities = []; } + // 用 primitive 集合替代 7342 个 entity,大幅降低 Cesium 实体系统开销 + const points = new Cesium.PointPrimitiveCollection(); + const labels = new Cesium.LabelCollection({ scene }); + scene.primitives.add(points); + scene.primitives.add(labels); + for (const c of cities) { - viewer.entities.add({ - position: Cesium.Cartesian3.fromDegrees(c.lng, c.lat), - point: { - pixelSize: 3, - color: textGold, - outlineColor: black, - outlineWidth: 1, - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, - distanceDisplayCondition: ddc, - translucencyByDistance: tdc, - }, - label: { - text: c.name, - font: 'bold 14px "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif', - fillColor: black, - style: Cesium.LabelStyle.FILL, - horizontalOrigin: Cesium.HorizontalOrigin.CENTER, - verticalOrigin: Cesium.VerticalOrigin.BOTTOM, - pixelOffset: new Cesium.Cartesian2(0, -6), - heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, - distanceDisplayCondition: ddc, - translucencyByDistance: tdc, - }, + const position = Cesium.Cartesian3.fromDegrees(c.lng, c.lat); + points.add({ + position, + pixelSize: 3, + color: textGold, + outlineColor: black, + outlineWidth: 1, + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + distanceDisplayCondition: ddc, + translucencyByDistance: tdc, + }); + labels.add({ + position, + text: c.name, + font: 'bold 14px "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif', + fillColor: black, + style: Cesium.LabelStyle.FILL, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + pixelOffset: new Cesium.Cartesian2(0, -6), + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + distanceDisplayCondition: ddc, + translucencyByDistance: tdc, }); } this._dataReady();