import React, {Component} from 'react'
import './CommonExample.css'
import {GIS} from "iclient3d-plot-diy";

export default class ExampleSimpleEventPage extends Component {
    drawOps = [];

    constructor(props) {
        super(props);
        this.state = {
            htmlString: '<h3>正在加载中...</h3>',
        };
    }

    componentDidMount() {
        this.showData();

        fetch('./example/ExampleSimpleEventPage.md')
            .then(response => response.text())
            .then(mdText => {
                this.setState({htmlString: window.marked.parse(mdText)});
            });
        //监听拨盘事件
    }

    showData() {
        this.mapFunction.mapApiService.mapClickEvent.addEventListener((id, primitive, isPoint) => {
            alert(id);
        }, this);
        this.mapFunction.mapApiService.mapRightClickEvent.addEventListener((id, primitive, isPoint) => {
            alert(id);
        }, this);
    }

    render() {
        return (
            <div className={"example_fwy_container"}>
                <h3>自定义事件</h3>
                <div className={"map_wrapper"}>
                    <GIS refs={e => {
                        this.mapFunction = e
                    }}
                         plotUrl={this.state.plotUrl}
                         mapRef={this}
                         showDefaultLayer={true}
                    />
                </div>
                <div className={"code_wrapper"}>
                    <div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
                </div>
            </div>
        )
    }
}