下面这个贴图中的告警怎么去除呢,需要怎么修改呢?
代码如下:
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); }}
你似乎搞错了概念,reactive()
的返回值不可能是 State
,如下:
// numberconst a = 1;// 并不是 number,而是 Ref<number>const b = ref(2);
在你的场景中,应当使用的是泛型来做限制,而不是去显式声明 state
的类型:
const state = reactive<State>({ // ....})
参见:
我想解决的是res.Code下面的红线问题 下面是loginApi接口的类型定义: 其中UserType类型的定义: IResponse类型的定义: 为什么Promise的返回值Code,Data,Msg下面都带红线? 代码:
在文件 /src/stores/otpInfos.ts 的第 7 行,TypeScript 报出以下错误(但是执行 pnpm dev 运行是没有任何问题的): 如果没有引用 ".pnpm/@vueuse+shared@9.13.0_vue@3.3.4/node_modules/@vueuse/shared",则无法命名 "useOTPInfosStore" 的推断类型。这很可能不可移植。需要类型注
整笔记时发现了个挺奇怪的问题 (Java 版本是 17) 首先, int 类型的取值范围是 -2147483648 ~ 2147483647 那么, 如果我定义一个这样的值, 在通过运算突破极值范围, 那他还是个 int 类型吗? 于是我试着写了这样一段代码 这个问题没有什么实际的意义, 只是纯好奇 有没有大佬知道, numGreater 的值为什么会等于 -2 ? 好像只要在极限的边缘做运算得出
下面有一个解构赋值,[invoice, customers] 中两个元素的推断类型分别是 const invoice 和 const customers: 现在我要把下面两个类型手动指定给 [invoice, customers] 中对应的元素,即 invoice 的类型为 InvoiceForm,customers 的类型为 CustomerField,语法应该怎么写?
我试图在typescript中编写一个去Bounce函数,但不确定设置分配给setTimeout的变量的类型。我的代码如下所示:
我想通过TypeScript泛型定义函数返回类型。所以R可以是我将定义的任何东西。 <代码>。。。许诺 错误:(29,9)TS2322:类型“字符串”不可分配给类型“R”。“字符串”可分配给类型“R”的约束,但“R”可以用约束“{}”的不同子类型实例化。