typescript类型的相关问题,该怎么修改类型定义?
下面这个贴图中的告警怎么去除呢,需要怎么修改呢?
代码如下:
import PbfLayer from './MVTImageryProvider';
interface State{
mapInstance: Map,
pbfLayerInstance: PbfLayer
};
const state: State = reactive({
mapInstance: {} as Map,
pbfLayerInstance: {} as PbfLayer
});
问题补充:
实例化后为其赋值时 ts警告:类型实例化过深,且可能无限
const pbfLayer = new PbfLayer();
await pbfLayer.initPbfLayer(
'http://xxx.xx.xx.xx:xxxx/sj_vector/v6/api/style/10001/style.json?ak=mf72ff9295c740ec0f37e61433e8a3ad8d&mapbox=1',
state.mapInstance.viewer
);
state.pbfLayerInstance = pbfLayer;
PbfLayer这个类中的完整代码如下:
import MVTImageryProvider from '@/components/Map/MVTImageryProvider/lib';
import type { StyleSpecification, LayerSpecification } from '@/components/Map/MVTImageryProvider/lib';
import { ImageryProvider, ImageryLayer, Viewer } from 'cesium';
export * from '@/components/Map/MVTImageryProvider/lib';
import { cloneDeep } from 'lodash';
import axios from 'axios';
export default class PbfLayer {
providers: MVTImageryProvider[] = [];
layersSpecification: LayerSpecification[] = [];
pbfLayers: ImageryLayer[] = [];
defaultLon = 107.21833;
defaultLat = 33.22319;
defaultHeight = 9500000;
/**
* 初始化pbf图层
*/
initPbfLayer = async (style: StyleSpecification | string, viewer: Viewer): Promise<boolean> => {
return new Promise<boolean>(async (resolve, reject) => {
const styles: StyleSpecification[] = []
if (typeof style === 'string') {
const { data } = await axios.get<StyleSpecification>(style);
this.layersSpecification = data.layers;
data.layers.forEach((layer) => {
const newStyleItem = cloneDeep(data);
newStyleItem.layers = [layer];
newStyleItem.sources = {[layer.source]: data.sources[layer.source]};
styles.push(newStyleItem)
});
if (data.center) {
this.defaultLon = data.center[0];
this.defaultLat = data.center[1];
}
};
if (styles.length) {
const providers = await this.createProvider(styles);
this.addPbfProvide(viewer, providers);
};
resolve(true)
})
};
/**
* 创建一组MVTImageryProvider实例,并等待其异步初始化完成
*/
private createProvider = (styles: StyleSpecification[]): Promise<MVTImageryProvider[]> => {
const pList: MVTImageryProvider[] = [];
return new Promise<MVTImageryProvider[]>(async (resolve, reject) => {
const list = styles.map((style) => {
const p = new MVTImageryProvider({ style });
pList.push(p)
return p.readyPromise
})
await Promise.all(list);
resolve(pList)
})
};
/**
* 使用给定的MVTImageryProvider创建其栅格图层
* 该操作将返回创建的图层并添加到当前图层集合,并展示倒地球
*/
private addPbfProvide = (viewer: Viewer, providers: MVTImageryProvider[]) => {
providers.forEach(provider => {
const layer = viewer.imageryLayers.addImageryProvider(provider as unknown as ImageryProvider);
this.pbfLayers.push(layer);
});
this.providers = providers
};
/**
* 更新图层
* 这里的更新实际上是修改provider对象,重新添加生成新的图层
*/
updatePbfLayer = async (
viewer: Viewer,
layerSpecification: LayerSpecification
): Promise<ImageryLayer | undefined> => {
if (this.providers.length === 0) {
console.error('未初始化');
return;
};
// 拿到要操作的图层在当前layer.imageryLayers中的索引
const allLayerIndex = this.getLayerIndexByLayerSpecification(viewer, layerSpecification);
// 因为layer.imageryLayers包含地球中默认的瓦片图层,这里先获取非pbfLayer图层的数量
const defaultLayerNum = viewer.imageryLayers.length - this.pbfLayers.length;
// 计算该图层在pbfLayer列表中的索引
const pbfLayerIndex = allLayerIndex - defaultLayerNum;
/**
* 深拷贝一份该索引对应图层的原有的style对象,
* 将新的样式更新到layers第一项,
* 这里更新到第一项,是因为接下来要单独重新渲染这一个图层
*/
const style = cloneDeep(this.providers[pbfLayerIndex].style);
style.layers[0] = layerSpecification;
/**
* 使用样式创建MVTImageProvider实例,
* 创建新图层并将新图层设置到旧图层的上层
*/
const newProviders = await this.createProvider([style]);
const newProvider = newProviders?.[0];
if (!newProvider) return;
this.pbfLayers[pbfLayerIndex] = viewer.imageryLayers.addImageryProvider(newProvider as unknown as ImageryProvider, allLayerIndex + 1);
this.providers[pbfLayerIndex] = newProvider;
/**
* 延迟移除旧的图层,避免出现新图层正在载时的空白闪烁
* 新图层正在加载是指,矢量瓦片的网络请求耗时这段时间。
*/
setTimeout(() => {
viewer.imageryLayers.remove(viewer.imageryLayers.get(allLayerIndex))
}, 1000)
};
/**
* 通过样式配置信息获取其所在图层的图层index
*/
getLayerIndexByLayerSpecification = (viewer: Viewer, layerSpecification: LayerSpecification): number => {
function getLayer(index: number): number {
const layer = viewer.imageryLayers.get(index);
if (!layer) return -1;
if (layer.imageryProvider instanceof MVTImageryProvider) {
if (layer.imageryProvider.style.layers[0]["source-layer"] === layerSpecification['source-layer']) {
return index
};
return getLayer(index + 1);
};
return getLayer(index + 1);
};
return getLayer(0);
}
}
回复
1个回答
test
2024-06-29
你似乎搞错了概念,reactive()
的返回值不可能是 State
,如下:
// number
const a = 1;
// 并不是 number,而是 Ref<number>
const b = ref(2);
在你的场景中,应当使用的是泛型来做限制,而不是去显式声明 state
的类型:
const state = reactive<State>({
// ....
})
参见:
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容