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
95
96
97
import React, {Component} from 'react'
import './CommonExample.css'
import './ExampleLayerPage.css'
import {GIS} from "../iclient3d-plot-diy";
 
;
import {Button} from "antd";
 
export default class ExampleLayerPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            terrainUrl: "",
            geojsonUrl: "https://www.supermapol.com/realspace/services/data-cbd/rest/data/datasources/%E4%BA%8C%E7%BB%B4%E6%95%B0%E6%8D%AE/datasets/Building/features.geojson",
            superMapImageryUrl: "https://www.supermapol.com/realspace/services/map-scyx/rest/maps/China_DARK",
            htmlString: '<h3>正在加载中...</h3>'
        };
    }
 
    componentDidMount() {
        fetch('./example/ExampleLayerPage.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            });
    }
 
    addDefaultLayer() {
        this.mapFunction.showDefaultLayer();
    }
 
    addDemLayer() {
        this.mapFunction.updateDemLayer(this.state.terrainUrl, true);
    }
 
    addGeoJsonLayer() {
        this.mapFunction.showGeoJsonDataSource({
            code: 'id_for_geojson',
            url: this.state.geojsonUrl,
            name: 'geojson',
            stroke: '#ff0000',
            fill: '#dec388',
            strokeWidth: 3,
            markerSymbol: '?'
        }, true);
    }
 
    addSuperMapImageryLayer() {
        this.mapFunction.showSuperMapImageryProvider({
            code: 'id_for_imagery_provider',
            url: this.state.superMapImageryUrl,
            name: 'supermap_imagery_provider'
        }, true);
    }
 
    render() {
        return (
            <div className={"example"}>
                <h3>图层相关</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={
                        e => {
                            this.mapFunction = e
                        }
                    }
                         mapRef={this}
                         showDefaultLayer={false}
                    />
                </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>
                    <input type="text" placeholder={'请输入矢量服务地址'}
                           value={this.state['geojsonUrl']}
                           onChange={(v) => this.setState({geojsonUrl: v.target.value})}/>
                    <Button type="primary" onClick={this.addGeoJsonLayer.bind(this)}>添加矢量</Button>
                    <br/>
                    <span>影像服务地址：</span>
                    <input type="text" placeholder={'请输入影像服务地址'}
                           value={this.state['superMapImageryUrl']}
                           onChange={(v) => this.setState({superMapImageryUrl: v.target.value})}/>
                    <Button type="primary" onClick={this.addSuperMapImageryLayer.bind(this)}>添加影像</Button>
                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}