sbjw
2025-08-27 5ebdc4d6d2501908342e3740e65bb89090a91f81
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
import React, {Component} from 'react'
import './ExampleDrawPage.css'
import {GIS} from "iclient3d-plot-diy";
 
export default class ExampleDynamicDlcPage extends Component {
 
    constructor(props) {
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>',
        };
    }
 
    options = [
        {
            "bz": true,
            "bzlx": "simple",
            "jbwb": "R:00017",
            "type": "2002",
            "useModify": false,
            "lon": 102.73181802939419,
            "lat": 30.982754659441543,
            "height": 0,
            iconSizes: [[40, 40], [30, 30], [20, 20], [15, 15], [8, 8]]
        }
    ]
 
    componentDidMount() {
 
        fetch('./example/ExampleDynamicDlcPage.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            });
 
        this.showData();
    }
 
    showData() {
        this.mapFunction.mapApiService.showDrawDatas(this.options);
    }
 
    render() {
        return (
            <div className={"example_draw_container"}>
                <h3>切换比例尺</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={(e) => this.mapFunction = e}
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={true}
                         iconScales={[[0, 100000], [100000, 500000], [500000, 1000000], [1000000, 2000000], [2000000, 20000000]]}
                    />
                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}