清除缓存并更新.gitignore

web/client/src/sections/fillion/components/gis/bounds.js

@@ -1,188 +1,188 @@
-import React, { Component } from 'react'
+import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types'
-import { geoJson } from './mock_data';
+import { geoJson } from './mock_data';
-
+
-export default class Bounds extends Component {
+export default class Bounds extends Component {
-    constructor(props) {
+    constructor(props) {
-        super(props);
+        super(props);
-        this.map = props.map;
+        this.map = props.map;
-        this.pl = {};
+        this.pl = {};
-        this.textMarker = {};
+        this.textMarker = {};
-    }
+    }
-    static propTypes = {
+    static propTypes = {
-        prop: PropTypes
+        prop: PropTypes
-    }
+    }
-
+
-    componentDidMount() {
+    componentDidMount() {
-        if (!window.BoundPl) {
+        if (!window.BoundPl) {
-            this.drawBounds();
+            this.drawBounds();
-        }
+        }
-    }
+    }
-
+
-    componentWillUnmount() {
+    componentWillUnmount() {
-        if (window.local_)
+        if (window.local_)
-            window.local_.remove(this.pl);
+            window.local_.remove(this.pl);
-        this.textMarker = null;
+        this.textMarker = null;
-        window.BoundPl = null;
+        window.BoundPl = null;
-    }
+    }
-
+
-    drawBounds = () => {
+    drawBounds = () => {
-        var map = this.map;
+        var map = this.map;
-        var loca = window.local_;
+        var loca = window.local_;
-        loca.ambLight = {
+        loca.ambLight = {
-            intensity: 0.3,
+            intensity: 0.3,
-            color: '#fff',
+            color: '#fff',
-        };
+        };
-        loca.dirLight = {
+        loca.dirLight = {
-            intensity: 0.6,
+            intensity: 0.6,
-            color: '#fff',
+            color: '#fff',
-            target: [0, 0, 0],
+            target: [0, 0, 0],
-            position: [0, -1, 1],
+            position: [0, -1, 1],
-        };
+        };
-        loca.pointLight = {
+        loca.pointLight = {
-            color: 'rgb(100,100,100)',
+            color: 'rgb(100,100,100)',
-            position: [120.24289, 30.341335, 20000],
+            position: [120.24289, 30.341335, 20000],
-            intensity: 3,
+            intensity: 3,
-            // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
+            // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
-            distance: 50000,
+            distance: 50000,
-        };
+        };
-        var geo = new Loca.GeoJSONSource({
+        var geo = new Loca.GeoJSONSource({
-            data: geoJson
+            data: geoJson
-        });
+        });
-
+
-        var colors = ['#04398c', '#04398c', '#0542a5'].reverse();
+        var colors = ['#04398c', '#04398c', '#0542a5'].reverse();
-        var height = [500];
+        var height = [500];
-        var pl = new Loca.PolygonLayer({
+        var pl = new Loca.PolygonLayer({
-            // loca,
+            // loca,
-            zIndex: 1,
+            zIndex: 1,
-            opacity: 0.6,
+            opacity: 0.6,
-            // cullface: 'none',
+            // cullface: 'none',
-            shininess: 10,
+            shininess: 10,
-            hasSide: true,
+            hasSide: true,
-        });
+        });
-
+
-        pl.setSource(geo);
+        pl.setSource(geo);
-        pl.setStyle({
+        pl.setStyle({
-            topColor: function (index, feature) {
+            topColor: function (index, feature) {
-                var i = index % 3;
+                var i = index % 3;
-                return colors[i];
+                return colors[i];
-            },
+            },
-            sideColor: function (index, feature) {
+            sideColor: function (index, feature) {
-                return '#023890';
+                return '#023890';
-            },
+            },
-            borderColor: function () {
+            borderColor: function () {
-                return '#24dcf7'
+                return '#24dcf7'
-            },
+            },
-            height: function (index, feature) {
+            height: function (index, feature) {
-                return index == 0 ? height[0] : height[0] + index * 50;
+                return index == 0 ? height[0] : height[0] + index * 50;
-            },
+            },
-            altitude: 0,
+            altitude: 0,
-        });
+        });
-        loca.add(pl);
+        loca.add(pl);
-
+
-        // 创建纯文本标记
+        // 创建纯文本标记
-        var text = new AMap.Text({
+        var text = new AMap.Text({
-            text: '纯文本标记',
+            text: '纯文本标记',
-            anchor: 'center', // 设置文本标记锚点
+            anchor: 'center', // 设置文本标记锚点
-            draggable: true,
+            draggable: true,
-            cursor: 'pointer',
+            cursor: 'pointer',
-            angle: 0,
+            angle: 0,
-            visible: false,
+            visible: false,
-            offset: [60, 60],
+            offset: [60, 60],
-            extData: 'bounds_text',
+            extData: 'bounds_text',
-            style: {
+            style: {
-                'padding': '5px 10px',
+                'padding': '5px 10px',
-                'margin-bottom': '1rem',
+                'margin-bottom': '1rem',
-                'border-radius': '.25rem',
+                'border-radius': '.25rem',
-                'background-color': 'rgba(0,0,0,0.5)',
+                'background-color': 'rgba(0,0,0,0.5)',
-                // 'width': '12rem',
+                // 'width': '12rem',
-                'border-width': 0,
+                'border-width': 0,
-                'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
+                'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
-                'text-align': 'center',
+                'text-align': 'center',
-                'font-size': '16px',
+                'font-size': '16px',
-                'color': '#fff',
+                'color': '#fff',
-            },
+            },
-        });
+        });
-        // text.setMap(map);
+        // text.setMap(map);
-        if (!this.textMarker)
+        if (!this.textMarker)
-            map.add(text);
+            map.add(text);
-        this.textMarker = text;
+        this.textMarker = text;
-        console.log(text)
+        console.log(text)
-        // 拾取
+        // 拾取
-        map.on('mousemove', (e) => {
+        map.on('mousemove', (e) => {
-            var feat = pl.queryFeature(e.pixel.toArray());
+            var feat = pl.queryFeature(e.pixel.toArray());
-            // if (!text) {
+            // if (!text) {
-            map.add(text);
+            map.add(text);
-            //     text = this.textMarker;
+            //     text = this.textMarker;
-            // }
+            // }
-
+
-            if (feat) {
+            if (feat) {
-                text.show();
+                text.show();
-                text.setText(feat.properties.NAME);
+                text.setText(feat.properties.NAME);
-                text.setPosition(e.lnglat);
+                text.setPosition(e.lnglat);
-
+
-                pl.setStyle({
+                pl.setStyle({
-                    topColor: (index, feature) => {
+                    topColor: (index, feature) => {
-                        if (feature === feat) {
+                        if (feature === feat) {
-                            return [19, 43, 77, 1];
+                            return [19, 43, 77, 1];
-                        }
+                        }
-                        // var v = feature.properties.health * 100;
+                        // var v = feature.properties.health * 100;
-                        var i = index % 3;
+                        var i = index % 3;
-                        return colors[i];
+                        return colors[i];
-                    },
+                    },
-                    sideColor: (index, feature) => {
+                    sideColor: (index, feature) => {
-                        if (feature === feat) {
+                        if (feature === feat) {
-                            return '#023890';
+                            return '#023890';
-                        }
+                        }
-                        return '#023890';
+                        return '#023890';
-                    },
+                    },
-                    borderColor: function () {
+                    borderColor: function () {
-                        return '#24dcf7'
+                        return '#24dcf7'
-                    },
+                    },
-                    height: function (index, feature) {
+                    height: function (index, feature) {
-                        return index == 0 ? height[0] : height[0] + index * 50;
+                        return index == 0 ? height[0] : height[0] + index * 50;
-
+
-                    },
+                    },
-                });
+                });
-            } else {
+            } else {
-                pl.setStyle({
+                pl.setStyle({
-                    topColor: function (index, feature) {
+                    topColor: function (index, feature) {
-                        var i = index % 3;
+                        var i = index % 3;
-                        return colors[i];
+                        return colors[i];
-                    },
+                    },
-                    sideColor: function (index, feature) {
+                    sideColor: function (index, feature) {
-                        return '#023890';
+                        return '#023890';
-                    },
+                    },
-                    borderColor: function () {
+                    borderColor: function () {
-                        return '#24dcf7'
+                        return '#24dcf7'
-                    },
+                    },
-                    height: function (index, feature) {
+                    height: function (index, feature) {
-                        return index == 0 ? height[0] : height[0] + index * 50;
+                        return index == 0 ? height[0] : height[0] + index * 50;
-                    },
+                    },
-                    altitude: 0,
+                    altitude: 0,
-                });
+                });
-
+
-                text.hide();
+                text.hide();
-                map.remove(text);
+                map.remove(text);
-            }
+            }
-        });
+        });
-
+
-
+
-        map.setZoom(12.88)
+        map.setZoom(12.88)
-        map.setCenter([115.888149, 28.549851]);
+        map.setCenter([115.888149, 28.549851]);
-        map.setRotation(-68.7);
+        map.setRotation(-68.7);
-        map.setPitch(42);
+        map.setPitch(42);
-
+
-        this.pl = pl;
+        this.pl = pl;
-        window.BoundPl = pl;
+        window.BoundPl = pl;
-    }
+    }
-
+
-    render() {
+    render() {
-        return (
+        return (
-            <div>
+            <div>
-            </div>
+            </div>
-        )
+        )
-    }
+    }
-}
+}
-
+
-
+