需求
需要加载MapBOX规范中expression的数据
javascript
const lineColor = [
"match",
[
"get",
"Layer"
],
"巷道",
"#EBEBF4",
"煤巷",
"#FF7F00",
"0",
"#FF7F00",
"乏风",
"#FF0000",
"新鲜风流",
"#00FF00",
"通风设施",
"#FF0000",
"#EBEBF4"
]
const lineWidth = [
"match",
[
"get",
"Layer"
],
"巷道",
2,
"煤巷",
3,
"0",
3,
"乏风",
1.5,
"新鲜风流",
1.5,
2
]
const fillColor = [
"match",
[
"get",
"Layer"
],
"通风设施",
"#00FF00",
"巷道",
"#EBEBF4",
"乏风",
"#FF0000",
"新鲜风流",
"#00FF00",
"#EBEBF4"
]
const textColor = [
"match",
[
"get",
"Layer"
],
"通风设施",
"#00FF00",
"巷道",
"#EBEBF4",
"#EBEBF4"
]实现
其实就是把样式数据提取出来，然后加载还是一样的geojson数据去加载
javascript
async _cadEffect(layerOption) {
const { id, urlFormat, url,needFly = false,clampToGround = true, } = layerOption;
const geojsonDataSources = [];
try {
const responseData = await this._axios.get(this._getUrl(urlFormat || url));
responseData.data.layers.forEach(async layer => {
const { source, type, paint } = layer;
const geojsonDataUrl = urlFormat.replace('style.json', source.data);
// const geoJsonData = await this._axios.get(this._getUrl(geojsonDataUrl));
await Cesium.GeoJsonDataSource.load(geojsonDataUrl, {
clampToGround: clampToGround?true:false,
}).then(data => {
data.name = `${id}_${layer.id}`;
const entities = data.entities.values;
if (type === 'line') {
const lineColor = paint['line-color'];
const lineWidth = paint['line-width'];
const processedDataLineColor = this.processSingleMatchArray(lineColor);
const processedDataLineWidth = this.processSingleMatchArray(lineWidth);
const matchLineColorPropertyNames = processedDataLineColor.matchName;
const matchLineWidthPropertyNames = processedDataLineWidth.matchName;
entities.forEach(entity => {
const colorName =
entity._properties[matchLineColorPropertyNames]._value;
const lineWidthName =
entity._properties[matchLineWidthPropertyNames]._value;
if (colorName && processedDataLineColor.matchData[colorName]) {
entity.polyline.material = Cesium.Color.fromCssColorString(
processedDataLineColor.matchData[colorName]
);
} else {
entity.polyline.material = Cesium.Color.fromCssColorString(
processedDataLineColor.matchData.other
);
}
if (lineWidthName && processedDataLineWidth.matchData[lineWidthName]) {
entity.polyline.width =
processedDataLineWidth.matchData[lineWidthName];
} else {
entity.polyline.width = processedDataLineWidth.matchData.other;
}
});
} else if (type === 'fill') {
const fillColor = paint['fill-color'];
const processedDataFillColor = this.processSingleMatchArray(fillColor);
const matchFillColorPropertyNames = processedDataFillColor.matchName;
entities.forEach(entity => {
const name = entity._properties[matchFillColorPropertyNames]._value;
if (name && processedDataFillColor.matchData[name]) {
entity.polygon.material = Cesium.Color.fromCssColorString(
processedDataFillColor.matchData[name]
);
} else {
entity.polygon.material = Cesium.Color.fromCssColorString(
processedDataFillColor.matchData.other
);
}
});
} else if (type === 'symbol') {
const symbolColor = paint['text-color'];
const processedDataSymbolColor = this.processSingleMatchArray(symbolColor);
const matchISymbolPropertyNames = processedDataSymbolColor.matchName;
entities.forEach(entity => {
if (entity._properties[matchISymbolPropertyNames]) {
const name = entity._properties[matchISymbolPropertyNames]._value;
if (name && processedDataSymbolColor.matchData[name]) {
entity.polyline.material = Cesium.Color.fromCssColorString(
processedDataSymbolColor.matchData[name]
);
} else {
entity.polyline.material = Cesium.Color.fromCssColorString(
processedDataSymbolColor.matchData.other
);
}
} else {
entity.polyline.material = Cesium.Color.fromCssColorString(
processedDataSymbolColor.matchData.other
);
}
});
}
map3d_viewer.viewer.dataSources.add(data);
if(needFly){
map3d_viewer.viewer.flyTo(entities, {
maximumHeight: 2000,
});
}
geojsonDataSources.push(data);
});
});
this._cadDataSources.set(id, geojsonDataSources);
} catch (error) {
log.error('LayerManagerService ~ _addCADLayer ~ error', error);
}
}
processSingleMatchArray(matchArray) {
const matchName = matchArray[1][1]; // 提取 matchName
const matchData = {};
for (let i = 2; i < matchArray.length - 2; i += 2) {
const key = matchArray[i];
const value = matchArray[i + 1];
matchData[key] = value;
}
const defaultValue = matchArray[matchArray.length - 1];
matchData.other = defaultValue;
return { matchName, matchData };
}