terriajs
Version:
Geospatial data visualization platform.
128 lines • 5.04 kB
JavaScript
import Color from "terriajs-cesium/Source/Core/Color";
import isDefined from "../../../Core/isDefined";
import { OutlineSymbolTraits } from "../../../Traits/TraitsClasses/Table/OutlineStyleTraits";
import TablePointSizeStyleTraits from "../../../Traits/TraitsClasses/Table/PointSizeStyleTraits";
import { PointSymbolTraits } from "../../../Traits/TraitsClasses/Table/PointStyleTraits";
import createStratumInstance from "../../Definition/createStratumInstance";
export function esriStyleToTableStyle(esriStyle, label) {
if (!esriStyle)
return {};
return {
// For esriPMS - just use white color
// This is so marker icons aren't colored by default
color: esriStyle.type === "esriPMS"
? "#FFFFFF"
: convertEsriColorToCesiumColor(esriStyle.color)?.toCssColorString(),
pointSize: createStratumInstance(TablePointSizeStyleTraits, {}),
point: createStratumInstance(PointSymbolTraits, {
marker: esriStyle.type === "esriPMS"
? `data:${esriStyle.contentType};base64,${esriStyle.imageData}`
: convertEsriMarkerToMaki(esriStyle.style),
// symbol.size is used by "esriSMS"
// height and width is used by "esriPMS"
height: convertEsriPointSizeToPixels(esriStyle.size) ??
convertEsriPointSizeToPixels(esriStyle.height),
width: convertEsriPointSizeToPixels(esriStyle.size) ??
convertEsriPointSizeToPixels(esriStyle.width),
rotation: esriStyle.angle,
pixelOffset: [esriStyle.xoffset ?? 0, esriStyle.yoffset ?? 0],
legendTitle: label || undefined
}),
outline: esriStyle.outline?.style !== "esriSLSNull"
? createStratumInstance(OutlineSymbolTraits, {
color: esriStyle.type === "esriSLS"
? convertEsriColorToCesiumColor(esriStyle.color)?.toCssColorString()
: convertEsriColorToCesiumColor(esriStyle.outline?.color)?.toCssColorString(),
// Use width if Line style
width: esriStyle.type === "esriSLS"
? convertEsriPointSizeToPixels(esriStyle.width)
: convertEsriPointSizeToPixels(esriStyle.outline?.width),
legendTitle: label || undefined,
dash: esriStyle.type === "esriSLS"
? convertEsriLineStyleToDashArray(esriStyle.style)
: convertEsriLineStyleToDashArray(esriStyle.outline?.style)
})
: undefined
};
}
function convertEsriMarkerToMaki(esri) {
switch (esri) {
case "esriSMSCross":
return "hospital";
case "esriSMSDiamond":
return "diamond";
case "esriSMSSquare":
return "square";
case "esriSMSTriangle":
return "triangle";
case "esriSMSX":
return "cross";
case "esriSMSCircle":
default:
return "point";
}
}
// ESRI uses points for styling while cesium uses pixels
export function convertEsriPointSizeToPixels(pointSize) {
if (!isDefined(pointSize))
return undefined;
// 1 px = 0.75 point
// 1 point = 4/3 point
return (pointSize * 4) / 3;
}
function convertEsriColorToCesiumColor(esriColor) {
if (!esriColor)
return;
return Color.fromBytes(esriColor[0], esriColor[1], esriColor[2], esriColor[3]);
}
const defaultDashArray = [4, 3];
const esriLineStyleCesium = {
esriSLSNull: 0,
esriSLSSolid: 255,
esriSLSDash: 3087, //" ----" parseInt("110000001111", 2)
esriSLSDot: 7, //" -"
esriSLSDashDot: 2017, //" ---- -"
esriSLSDashDotDot: 16273, // ' -------- - - '
esriSLSLongDash: 2047, // ' --------'
esriSLSLongDashDot: 4081, // ' -------- -'
esriSLSShortDash: 4095, //' ----'
esriSLSShortDot: 13107, //' ---- -'
esriSLSShortDashDot: 8179, //' ---- - -'
esriSLSShortDashDotDot: 16281 //' - - - -'
};
const cesiumDashNumberToDashArray = {
0: [],
255: [],
3087: [6, 6],
7: [1, 3],
2017: [4, 3, 1, 3],
16273: [8, 3, 1, 3, 1, 3],
2047: [8, 3],
4081: [8, 3, 1, 3],
4095: [4, 1],
13107: [1, 1],
8179: [4, 1, 1, 1],
16281: [4, 1, 1, 1, 1, 1]
};
export function convertCesiumDashNumberToDashArray(dashPattern) {
if (cesiumDashNumberToDashArray[dashPattern]) {
return cesiumDashNumberToDashArray[dashPattern];
}
return defaultDashArray;
}
export function convertEsriLineStyleToCesiumDashNumber(styleName) {
if (styleName in esriLineStyleCesium) {
return esriLineStyleCesium[styleName];
}
return undefined;
}
function convertEsriLineStyleToDashArray(styleName) {
if (styleName) {
const dashNumber = convertEsriLineStyleToCesiumDashNumber(styleName);
if (dashNumber !== undefined) {
return convertCesiumDashNumberToDashArray(dashNumber);
}
}
return [];
}
//# sourceMappingURL=esriStyleToTableStyle.js.map