Highways4Good/web/client/src/sections/quanju/containers/footer/gis/bounds.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { geoJson } from './mock_data';

export default class Bounds extends Component {
    constructor(props) {
        super(props);
        this.map = props.map;
        this.pl = {};
        this.textMarker = {};
    }
    static propTypes = {
        prop: PropTypes
    }

    componentDidMount() {
        if (!window.BoundPl) {
            this.drawBounds();
        }
    }

    componentWillUnmount() {
        if (window.local_)
            window.local_.remove(this.pl);
        this.textMarker = null;
        window.BoundPl = null;
    }

    drawBounds = () => {
        var map = this.map;
        var loca = window.local_;
        loca.ambLight = {
            intensity: 0.3,
            color: '#fff',
        };
        loca.dirLight = {
            intensity: 0.6,
            color: '#fff',
            target: [0, 0, 0],
            position: [0, -1, 1],
        };
        loca.pointLight = {
            color: 'rgb(100,100,100)',
            position: [120.24289, 30.341335, 20000],
            intensity: 3,
            // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
            distance: 50000,
        };
        var geo = new Loca.GeoJSONSource({
            data: geoJson
        });

        var colors = ['#04398c', '#04398c', '#0542a5'].reverse();
        var height = [500];
        var pl = new Loca.PolygonLayer({
            // loca,
            zIndex: 1,
            opacity: 0.6,
            // cullface: 'none',
            shininess: 10,
            hasSide: true,
        });

        pl.setSource(geo);
        pl.setStyle({
            topColor: function (index, feature) {
                var i = index % 3;
                return colors[i];
            },
            sideColor: function (index, feature) {
                return '#023890';
            },
            borderColor: function () {
                return '#24dcf7'
            },
            height: function (index, feature) {
                return index == 0 ? height[0] : height[0] + index * 50;
            },
            altitude: 0,
        });
        loca.add(pl);

        // 创建纯文本标记
        var text = new AMap.Text({
            text: '纯文本标记',
            anchor: 'center', // 设置文本标记锚点
            draggable: true,
            cursor: 'pointer',
            angle: 0,
            visible: false,
            offset: [60, 60],
            extData: 'bounds_text',
            style: {
                'padding': '5px 10px',
                'margin-bottom': '1rem',
                'border-radius': '.25rem',
                'background-color': 'rgba(0,0,0,0.5)',
                // 'width': '12rem',
                'border-width': 0,
                'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
                'text-align': 'center',
                'font-size': '16px',
                'color': '#fff',
            },
        });
        // text.setMap(map);
        if (!this.textMarker)
            map.add(text);
        this.textMarker = text;
        console.log(text)
        // 拾取
        map.on('mousemove', (e) => {
            var feat = pl.queryFeature(e.pixel.toArray());
            // if (!text) {
            map.add(text);
            //     text = this.textMarker;
            // }

            if (feat) {
                text.show();
                text.setText(feat.properties.NAME);
                text.setPosition(e.lnglat);

                pl.setStyle({
                    topColor: (index, feature) => {
                        if (feature === feat) {
                            return [19, 43, 77, 1];
                        }
                        // var v = feature.properties.health * 100;
                        var i = index % 3;
                        return colors[i];
                    },
                    sideColor: (index, feature) => {
                        if (feature === feat) {
                            return '#023890';
                        }
                        return '#023890';
                    },
                    borderColor: function () {
                        return '#24dcf7'
                    },
                    height: function (index, feature) {
                        return index == 0 ? height[0] : height[0] + index * 50;

                    },
                });
            } else {
                pl.setStyle({
                    topColor: function (index, feature) {
                        var i = index % 3;
                        return colors[i];
                    },
                    sideColor: function (index, feature) {
                        return '#023890';
                    },
                    borderColor: function () {
                        return '#24dcf7'
                    },
                    height: function (index, feature) {
                        return index == 0 ? height[0] : height[0] + index * 50;
                    },
                    altitude: 0,
                });

                text.hide();
                map.remove(text);
            }
        });


        map.setZoom(11)
        map.setCenter([115.912663,28.543149]);
        map.setRotation(-68.7);
        map.setPitch(42);

        this.pl = pl;
        window.BoundPl = pl;
    }

    render() {

        return (
            <div>
            </div>
        )
    }
}