标记便签字体和尺寸调小
This commit is contained in:
+33
-27
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user