arcgis api使用Slice挖开BIM模型

BIM模型

挖开效果

加载BIM

import React, { useEffect, useRef } from 'react';
import Map from '@arcgis/core/Map';
import SceneView from '@arcgis/core/views/SceneView';
import Basemap from '@arcgis/core/Basemap';
import TileLayer from '@arcgis/core/layers/TileLayer';
import BuildingSceneLayer from '@arcgis/core/layers/BuildingSceneLayer';
import IntegratedMeshLayer from '@arcgis/core/layers/IntegratedMeshLayer';
import './index.less';
import { useSetRecoilState } from 'recoil';
import { viewAtom } from '@/store/view';
import WebScene from '@arcgis/core/WebScene';

export default function Maps() {
    const dom = useRef<HTMLDivElement | null>(null);
    const setView = useSetRecoilState(viewAtom);

    useEffect(() => {
        if (dom.current) {
            const find = window.baseMap.find(f => f.select);
            const tile = new TileLayer({
                url: find?.url,
                id: 'basemap',
            });
            const baseLayers: any[] = [tile];
            const basemap = new Basemap({
                baseLayers,
            });
            const map = new Map({
                basemap: basemap,
            });

            const view = new SceneView({
                container: dom.current,
                map: map,
            });
            const qx = window.sceneServer.find(f => f.id === 'zbqx');

            if (qx) {
                const instegrLayer = new IntegratedMeshLayer({
                    url: qx.url,
                    id: qx.id,
                });
                view.map.add(instegrLayer, -1);
            }
            const bim = window.sceneServer.find(f => f.id === 'bim');
            if (bim) {
                const buildLayer = new BuildingSceneLayer({
                    url: bim.url,
                    id: bim.id,
                    title: bim.name,
                    visible: true,
                });
                view.map.add(buildLayer, 100);

                buildLayer.when(() => {
                    buildLayer.allSublayers.forEach(layer => {
                        console.log(layer.modelName);

                        layer.visible = true;
                    });
                });
            }

            view.ui.remove(view.ui.components);

            view.when(() => {
                setView(view);
            });
        }
    }, []);
    return <div ref={dom} className="Maps"></div>;
}

挖开

import Footer from '@/components/Footer';
import Header from '@/components/Header';
import Left from '@/components/Left';
import Maps from '@/components/Maps';
import Right from '@/components/Right';
import TypesList from '@/components/TypesList';
import { viewAtom } from '@/store/view';
import { useEffect, useRef } from 'react';
import { useRecoilValue } from 'recoil';
import Point from '@arcgis/core/geometry/Point';
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
import './index.less';
import MarkerWrap from '@/components/MarkerWrap';
import pointImg from '@/assets/images/blur_point.png';
import Slice from '@arcgis/core/widgets/Slice';
import { Button } from 'antd';
import { useToggle } from 'ahooks';
const Home = (props: {}) => {
    const view = useRecoilValue(viewAtom);
    const sliceRef = useRef<Slice>();
    const [state, { toggle }] = useToggle();

    useEffect(() => {
        if (view) {
            sliceRef.current = new Slice({
                view: view,
            });
        }
    }, [view]);
    useEffect(() => {
        if (state) {
            sliceRef.current?.viewModel.start();
        } else {
            sliceRef.current?.viewModel.clear();
        }
    }, [state]);
    const onClick = () => {
        toggle();
    };
    return (
        <>
            
            <Button type="primary" className="slice-btn" onClick={onClick}>
                {state ? '取消' : '挖开'}
            </Button>
           
            <Maps />
         
            
            {view && (
                <MarkerWrap view={view} position={{ x: 120.99916563327463, y: 31.312911753490518 }}>
                    <div className="point-img">
                        <img src={pointImg} alt="" />
                    </div>
                </MarkerWrap>
            )}
        </>
    );
};

export default Home;