add

sbjw

2025-08-13 5411e296a44e26ba08ff9eec5ad9ae855ddf756a

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, {Component, PureComponent} from 'react'
import './CommonExample.css'
import {GIS} from "../iclient3d-plot-diy";
 
;
import './ExampleLayerPage.css'
import {Button} from "antd";
 
export default class ExampleToolsPage extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>'
        };
    }
 
    componentDidMount() {
        this.mapFunction.hideToolBar();
        fetch('./example/ExampleToolsPage.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            });
    }
 
    addDemLayer() {
        this.mapFunction.updateDemLayer(this.state.terrainUrl, true);
    }
 
    addDefaultLayer() {
        this.mapFunction.showDefaultLayer();
    }
 
 
    render() {
        return (
            <div className={"example"}>
                <h3>工具栏控制</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={e => {
                        this.mapFunction = e
                    }} mapRef={this}
                         addressSearchUrl="http://192.168.0.251:8090/iserver/services/addressmatch-Address/restjsr/v1/address/geocoding"
                         terrainUrl="http://192.168.0.251:8090/iserver/services/map-world/rest/maps/World"
                         terrainUrlIsSct={true}
                         showDefaultLayer={false}
                         global={[100, 30.5, 101, 31.5]}
                        // baseImageUrl="https://www.supermapol.com/realspace/services/map-scyx/rest/maps/China_DARK"
                    />
                </div>
                <div className={"button_wrapper"}>
 
                    <Button type="primary" onClick={this.addDefaultLayer.bind(this)}>添加默认图层</Button>
                    <br/>
                    <span>地形服务地址：</span>
                    <input type="text" placeholder={'请输入地形服务地址'}
                           value={this.state['terrainUrl']}
                           onChange={(v) => this.setState({terrainUrl: v.target.value})}/>
                    <Button type="primary" onClick={this.addDemLayer.bind(this)}>添加地形</Button>
                    <br/>
                    <span>视角工具：</span>
                    <Button type="primary" onClick={() => this.mapFunction.mapApiService.flyGlobal()}>全图</Button>
                    <Button type="primary" onClick={() => this.mapFunction.mapApiService.enableTilt()}>启用旋转和倾斜
                    </Button>
                    <Button type="primary" onClick={() => this.mapFunction.mapApiService.disableTilt()}>禁用旋转和倾斜
                    </Button>
                    <Button type="primary" onClick={() => this.mapFunction.mapApiService.setToHeading()}>回归到当前视角
                    </Button>
                    <br/>
                    <span>常用工具：</span>
                    <Button type="primary" onClick={() => this.mapFunction.fullScreen()}>全屏</Button>
                    <Button type="primary" onClick={() => this.mapFunction.exitFullScreen()}>退出全屏</Button>
                    <Button type="primary" onClick={() => this.mapFunction.measureDistance()}>测量距离</Button>
                    <Button type="primary" onClick={() => this.mapFunction.measureArea()}>测量面积</Button>
                    <Button type="primary" onClick={() => this.mapFunction.doAddressSearch()}>打开地名查询面板</Button>
                    <Button type="primary" onClick={() => this.mapFunction.doLocation()}>打开定位面板</Button>
                    <Button type="primary" onClick={() => this.mapFunction.doHighLight()}>打开高亮闪烁面板</Button>
                    <Button type="primary" onClick={() => this.mapFunction.doPrint()}>打开打印面板</Button>
                    {/*<Button type="primary" onClick={() => this.mapFunction.doCarLamp()}>打开动态模型面板</Button>*/}
                    {/*<Button type="primary" onClick={() => this.mapFunction.doFlyRoute()}>打开飞行面板</Button>*/}
                    <br/>
                    <span>分析功能：</span>
                    <Button type="primary" onClick={() => this.mapFunction.doProfile()}>打开剖面分析面板</Button>
                    <Button type="primary" onClick={() => this.mapFunction.doAngleSlope()}>打开坡度分析面板</Button>
                    <Button type="primary" onClick={() => this.mapFunction.doSightLine()}>打开通视分析面板</Button>
 
                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}