Open flywin8 opened 2 months ago
3.2.8
windows 10
3.2.47
1.117.0
https://codepen.io/pen
import { randomPoint } from '@turf/turf'; const createBillboards = (url, zIndex) => randomPoint(1000, { bbox: [95, 41, 118, 25] }).features.map(({ geometry }, i) => ({ id: 'billboards-' zIndex '-' i, name: '桥梁-' i, image: url, width: 60, height: 60, verticalOrigin: 1, heightReference: 2, eyeOffset: { x: 0, y: 0, z: zIndex }, // 控制层级 disableDepthTestDistance: Number.POSITIVE_INFINITY, scaleByDistance: new Cesium.NearFarScalar(4.0e2, 1, 2.0e6, 0.1), position: { lng: geometry.coordinates[0], lat: geometry.coordinates[1] }, })); const dataLayer = { id:'id1', page: 'page1', datasets: [] }; let billboards = createBillboards('./resource/images/a.png',0) dataLayer.datasets.push({ component: 'VcCollectionBillboard', props: { billboards }}); mapStore.addDataLayer(dataLayer);
const dataLayer2 = { id:'id1', page: 'page1', datasets: [] }; billboards = createBillboards('./resource/images/b.png',100) dataLayer2.datasets.push({ component: 'VcCollectionBillboard', props: { billboards }}); mapStore.addDataLayer(dataLayer2);
const layers: any[] = []; layers.push(createBillboards('./resource/images/a.svg', 0)); layers.push(createBillboards('./resource/images/b.svg', 100)); billboardLayers.value = layers; 使用这种方式渲染就没有缩放重影的问题
多层级动态创建组件不会出现缩放重影问题
出现了缩放重影
提交一个在线能看的啊,
https://stackblitz.com/~/github.com/zouyaoji/vue-cesium-demo
或者 https://codepen.io/zouyaoji/pen/bGBOyJM
VueCesium version
3.2.8
OS/Browsers version
windows 10
Vue version
3.2.47
Cesium version
1.117.0
Reproduction Link
https://codepen.io/pen
Steps to reproduce
import { randomPoint } from '@turf/turf'; const createBillboards = (url, zIndex) => randomPoint(1000, { bbox: [95, 41, 118, 25] }).features.map(({ geometry }, i) => ({ id: 'billboards-' zIndex '-' i, name: '桥梁-' i, image: url, width: 60, height: 60, verticalOrigin: 1, heightReference: 2, eyeOffset: { x: 0, y: 0, z: zIndex }, // 控制层级 disableDepthTestDistance: Number.POSITIVE_INFINITY, scaleByDistance: new Cesium.NearFarScalar(4.0e2, 1, 2.0e6, 0.1), position: { lng: geometry.coordinates[0], lat: geometry.coordinates[1] }, })); const dataLayer = { id:'id1', page: 'page1', datasets: [] }; let billboards = createBillboards('./resource/images/a.png',0) dataLayer.datasets.push({ component: 'VcCollectionBillboard', props: { billboards }}); mapStore.addDataLayer(dataLayer);
const dataLayer2 = { id:'id1', page: 'page1', datasets: [] }; billboards = createBillboards('./resource/images/b.png',100) dataLayer2.datasets.push({ component: 'VcCollectionBillboard', props: { billboards }}); mapStore.addDataLayer(dataLayer2);
const layers: any[] = []; layers.push(createBillboards('./resource/images/a.svg', 0)); layers.push(createBillboards('./resource/images/b.svg', 100)); billboardLayers.value = layers; 使用这种方式渲染就没有缩放重影的问题![image](https://github.com/zouyaoji/vue-cesium/assets/13073744/f9f327de-aeb8-4b35-a828-19c5c06144bf)
What is Expected?
多层级动态创建组件不会出现缩放重影问题
What is actually happening?
出现了缩放重影