p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Shihuidev (#926) 

fix: 修复 threejs 图层导致 L7 图层失效的问题
This commit is contained in:
YiQianYao 2022-01-10 17:59:49 +08:00 committed by GitHub
parent 85d73a0425
commit 6f9714218c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 392 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/renderer/src/regl/index.ts
View File

@ -224,6 +224,7 @@ export default class ReglRendererService implements IRendererService {
},
framebuffer: null,
});
this.gl._refresh();
}
public setBaseState() {

255
stories/3D_Model/Components/amap_car.tsx Normal file
View File

@ -0,0 +1,255 @@
// @ts-ignore
import { Scene, PolygonLayer } from '@antv/l7';
import { GaodeMap, Mapbox } from '@antv/l7-maps';
import { ThreeLayer, ThreeRender } from '@antv/l7-three';
import * as React from 'react';
// import { DirectionalLight, Scene as ThreeScene } from 'three';
import * as THREE from 'three';
// tslint:disable-next-line:no-submodule-imports
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { animate, easeInOut } from 'popmotion';
let isTravel = false;
// @ts-ignore
function travel(
// @ts-ignore
mesh,
// @ts-ignore
path,
// @ts-ignore
duration,
// @ts-ignore
callback,
) {
if (path.length < 2 || isTravel) return;
isTravel = true;
let startIndex = 0;
const len = path.length;
const currentP = path[0],
nextP = path[1];
const t = duration / len;
//@ts-ignore
move(currentP, nextP);
// @ts-ignore
function move(currentP, nextP) {
animate({
from: {
x: currentP.x,
y: currentP.y,
z: currentP.z,
},
to: {
x: nextP.x,
y: nextP.y,
z: nextP.z,
},
ease: easeInOut,
duration: t,
repeatType: 'loop',
onUpdate: (o) => {
mesh.position.set(o.x, o.y, o.z);
},
onComplete: () => {
startIndex++;
if (startIndex < len - 1) {
const currentP = path[startIndex],
nextP = path[startIndex + 1];
mesh.lookAt(nextP);
move(currentP, nextP);
} else {
isTravel = false;
callback && callback();
}
},
});
}
}
export default class GlTFThreeJSDemo extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [112, 35.39847],
pitch: 45,
rotation: 30,
zoom: 5,
}),
});
this.scene = scene;
// scene.registerRenderService(ThreeRender);
scene.on('loaded', () => {
scene.registerRenderService(ThreeRender);
fetch(
'https://gw.alipayobjects.com/os/basement_prod/d2e0e930-fd44-4fca-8872-c1037b0fee7b.json',
)
.then((d) => d.json())
.then((data) => {
const polygonlayer = new PolygonLayer({
name: '01',
zIndex: -1,
})
.source(data)
.color('name', [
'#2E8AE6',
'#69D1AB',
'#DAF291',
'#FFD591',
'#FF7A45',
'#CF1D49',
])
.shape('fill')
// .select(true)
.style({
opacity: 1.0,
});
scene.addLayer(polygonlayer);
});
const threeJSLayer = new ThreeLayer({
enableMultiPassRenderer: false,
onAddMeshes: (threeScene, layer) => {
// 添加光
threeScene.add(new THREE.AmbientLight(0xffffff));
const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
sunlight.position.set(0, 80000000, 100000000);
sunlight.matrixWorldNeedsUpdate = true;
threeScene.add(sunlight);
const lineData = [
[116.71874999999999, 26.745610382199022],
[117.3779296875, 28.8831596093235],
[115.75195312499999, 31.466153715024294],
[113.466796875, 33.32134852669881],
[113.9501953125, 35.85343961959182],
[115.400390625, 38.272688535980976],
[116.5869140625, 40.3130432088809],
[115.6201171875, 42.261049162113856],
[112.236328125, 42.94033923363181],
[109.3798828125, 41.04621681452063],
[103.84277343749999, 39.80853604144591],
[98.9208984375, 39.842286020743394],
[95.2294921875, 40.713955826286046],
[91.7138671875, 39.87601941962116],
[90.8349609375, 37.125286284966805],
[90.3076171875, 35.88905007936091],
[90.703125, 33.284619968887675],
[92.94433593749999, 31.98944183792288],
[96.2841796875, 32.21280106801518],
[98.87695312499999, 32.0639555946604],
[102.919921875, 28.459033019728043],
[107.9736328125, 28.497660832963472],
[108.10546875, 24.206889622398023],
[109.072265625, 23.039297747769726],
[112.763671875, 24.44714958973082],
[116.54296874999999, 25.958044673317843],
];
// @ts-ignore
const lineCoordData = lineData.map((d) => {
// @ts-ignore
return layer.lnglatToCoord(d);
});
// @ts-ignore
const rawPoints = [];
// @ts-ignore
lineCoordData.map((d) => {
rawPoints.push(new THREE.Vector3(d[0], d[1], 0));
return '';
});
// @ts-ignore
const curve = new THREE.CatmullRomCurve3(rawPoints);
const points = curve.getPoints(200);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const line = new THREE.LineLoop(geometry, material);
threeScene.add(line);
// 使用 Three.js glTFLoader 加载模型
// const loader = new GLTFLoader();
// loader.load(
// 'https://gw.alipayobjects.com/os/antvdemo/assets/gltf/truck/CesiumMilkTruck.gltf', // Truck
// gltf => {
// // 根据 GeoJSON 数据放置模型
// const gltfScene = gltf.scene.clone();
// // setDouble(gltfScene);
// layer.getSource().data.dataArray.forEach(() => {
// layer.adjustMeshToMap(gltfScene);
// gltfScene.scale.set(500000, 500000, 500000);
// const animations = gltf.animations;
// if (animations && animations.length) {
// const mixer = new THREE.AnimationMixer(gltfScene);
// // @ts-ignore
// for (let i = 0; i < animations.length; i++) {
// const animation = animations[i];
// // There's .3333 seconds junk at the tail of the Monster animation that
// // keeps it from looping cleanly. Clip it at 3 seconds
// const action = mixer.clipAction(animation);
// action.play();
// }
// layer.addAnimateMixer(mixer);
// }
// // 向场景中添加模型
// threeScene.add(gltfScene);
// });
// travelLoop();
// function travelLoop() {
// travel(gltfScene, points, 5000, () => {
// travelLoop();
// });
// }
// // 重绘图层
// // layer.render();
// }
// );
},
}).source({
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [112, 35.39847],
},
},
],
});
// .animate(true);
scene.addLayer(threeJSLayer);
});
}
public render() {
return (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

2
stories/3D_Model/model.stories.tsx
View File

@ -6,6 +6,7 @@ import MapboxModel from './Components/mapbox_three';
import ThreeRender from './Components/threeRender';
import Threemap from './Components/threejsmap';
import Aspace from './Components/aspace';
import Car from './Components/amap_car';
storiesOf('3D 模型', module)
.add('ThreeJS Render', () => <ThreeRender />, {})
@ -13,4 +14,5 @@ storiesOf('3D 模型', module)
.add('高德模型2.x', () => <AMap2Model />, {})
.add('Mapbox模型', () => <MapboxModel />, {})
.add('Aspace', () => <Aspace />, {})
.add('Car', () => <Car />, {})
.add('Threemap', () => <Threemap />, {});

159
stories/Map/components/amap2demo_lineStreet.tsx
View File

@ -1,4 +1,4 @@
import { LineLayer, Scene } from '@antv/l7';
import { PointLayer, PolygonLayer, LineLayer, Scene } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
@ -14,54 +14,163 @@ export default class Amap2demo_lineStreet extends React.Component {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [120.19382669582967, 30.258134],
center: [120.15, 30.246],
pitch: 0,
zoom: 16,
zoom: 13.5,
style: 'dark',
pitchEnable: false,
rotation: -90,
}),
});
this.scene = scene;
scene.addImage(
'westLakeBuilding',
'https://gw.alipayobjects.com/zos/bmw-prod/8c3f6415-c1ca-4f7e-8ac6-89571ac75309.svg',
);
scene.addImage(
'arrow',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
scene.addImage(
'shop',
'https://gw.alipayobjects.com/zos/bmw-prod/238e7c7c-c26c-454c-9341-35d466c4b991.svg',
);
scene.addImage(
'hospital',
'https://gw.alipayobjects.com/zos/bmw-prod/fd08bf28-f73e-4b9c-ba8d-2c73d4fca6dc.svg',
);
scene.addImage(
'westlake',
'https://gw.alipayobjects.com/zos/bmw-prod/7b011298-454d-431b-9637-ab23a752e731.svg',
);
scene.addImage(
'ship',
'https://gw.alipayobjects.com/zos/bmw-prod/104cfca2-f3c5-49e8-b084-d339f4ba1adc.svg',
);
scene.addImage(
'travel',
'https://gw.alipayobjects.com/zos/bmw-prod/904d047a-16a5-461b-a921-98fa537fc04a.svg',
);
scene.addImage(
'pavilion',
'https://gw.alipayobjects.com/zos/bmw-prod/8839795d-43d9-46c5-a5b1-95bf9a1146a0.svg',
);
scene.addImage(
'museum',
'https://gw.alipayobjects.com/zos/bmw-prod/5436a335-8ec3-40e4-9c93-16d0f844b0e7.svg',
);
scene.addImage(
'bridge',
'https://gw.alipayobjects.com/zos/bmw-prod/b88e6f2f-ad12-4980-969e-3849cbcd28c6.svg',
);
scene.addImage(
'school',
'https://gw.alipayobjects.com/zos/bmw-prod/948e665d-ab1e-4010-b75a-236057837bec.svg',
);
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json',
)
.then((data) => data.json())
.then(
({
lakeBorderData,
lakeData,
landData,
westLakePoiData,
poiData,
}) => {
const lakeLayer = new PolygonLayer()
.source(lakeData)
.shape('fill')
.color('#1E90FF')
.style({
opacity: 0.4,
opacityLinear: {
enable: true,
dir: 'out', // in - out
},
});
const landLayer = new PolygonLayer()
.source(landData)
.shape('fill')
.color('#3CB371')
.style({
opacity: 0.4,
opacityLinear: {
enable: true,
dir: 'in', // in - out
},
});
const lakeBorderLayer = new PolygonLayer()
.source(lakeBorderData)
.shape('fill')
.color('#ccc')
.style({
opacity: 0.5,
opacityLinear: {
enable: true,
dir: 'in', // in - out
},
});
const westLakePoiLayer = new PointLayer({ zIndex: 1 })
.source(westLakePoiData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('type', (v) => v)
.size(40);
const poiLayer = new PointLayer({ zIndex: 1 })
.source(poiData, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('type', (v) => v)
.size(10);
scene.addLayer(lakeLayer);
scene.addLayer(lakeBorderLayer);
scene.addLayer(landLayer);
scene.addLayer(westLakePoiLayer);
scene.addLayer(poiLayer);
},
);
fetch(
'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json',
)
.then((res) => res.json())
.then((data) => {
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
scene.addImage(
'01',
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
);
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
const colors = ['#66c2a4', '#2ca25f', '#006d2c'];
// @ts-ignore
const layer = new LineLayer({})
.source(data)
.size(5)
.size(2.5)
.shape('line')
.texture('00')
.color('#25d8b7')
.texture('arrow')
.color('', () => {
return colors[Math.floor(Math.random() * colors.length)];
})
.animate({
interval: 1, // 间隔
duration: 1, // 持续时间，延时
trailLength: 2, // 流线长度
})
.style({
// opacity: 0.5,
// opacity: 0,
opacity: 0.6,
lineTexture: true, // 开启线的贴图功能
iconStep: 20, // 设置贴图纹理的间距
// lineType: 'dash',
// dashArray: [5, 5],
// textureBlend: 'replace',
// textureBlend: 'normal',
borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
borderColor: '#fff', // 默认为 #ccc
});