{"remainingRequest":"D:\\jenkins\\workspace\\bbsl-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\bbsl-fvue\\src\\views\\frontScreens\\GisMap.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\bbsl-fvue\\src\\views\\frontScreens\\GisMap.vue","mtime":1684458238481},{"path":"D:\\jenkins\\workspace\\bbsl-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\bbsl-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\bbsl-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport towns from './js/towns'\r\nimport gisComponents from './js/gisComponents.js'\r\n// leaflet实现离线地图\r\nimport 'leaflet/dist/leaflet.css'\r\n// 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用\r\nimport L from 'leaflet'\r\nimport * as d3 from 'd3'\r\nimport d3Svglayer from './js/d3SvgOverlay.js'\r\nexport default {\r\n    name: 'tianditu',\r\n    components: {\r\n        ...gisComponents,\r\n    },\r\n    provide() {\r\n        return {\r\n            mapData: this.mapData,\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            L: null,\r\n            map: null,\r\n            baseMapOverlay: null,\r\n            handler: null,\r\n            zoom: 10,\r\n            config: null,\r\n            showMenu: true,\r\n            showContent: true,\r\n            selectionData: ['RealTimeRain'],\r\n            jcssMenu: [\r\n                {\r\n                    text: '行政区划',\r\n                    key: 'District',\r\n                },\r\n                {\r\n                    text: '河流信息',\r\n                    key: 'RiverInfo',\r\n                },\r\n                {\r\n                    text: '水库',\r\n                    key: 'Reservoir',\r\n                },\r\n                {\r\n                    text: '生态流量',\r\n                    key: 'Hydropower',\r\n                },\r\n                {\r\n                    text: '水雨情测站',\r\n                    key: 'WaterRainStation',\r\n                },\r\n                {\r\n                    text: '工情测站',\r\n                    key: 'EngineerStation',\r\n                },\r\n                {\r\n                    text: '预警设施',\r\n                    key: 'WarnInstallations',\r\n                },\r\n                {\r\n                    text: '视频巡查',\r\n                    key: 'VideoPatrol',\r\n                },\r\n                {\r\n                    text: '取水工程',\r\n                    key: 'WaterUser',\r\n                },\r\n                {\r\n                    text: '山洪防治点',\r\n                    key: 'mountainTorrentDisaster',\r\n                },\r\n            ],\r\n            jcyjMenu: [\r\n                {\r\n                    text: '实时雨情',\r\n                    key: 'RealTimeRain',\r\n                },\r\n                {\r\n                    text: '日降雨量',\r\n                    key: 'DailyRainfall',\r\n                },\r\n                {\r\n                    text: '实时水情',\r\n                    key: 'RealTimeWater',\r\n                },\r\n                {\r\n                    text: '实时工情',\r\n                    key: 'RealTimeEngineer',\r\n                },\r\n                {\r\n                    text: '取水监测',\r\n                    key: 'WaterIntakeMonitor',\r\n                },{\r\n\t\t\t\t\ttext: '生态流量',\r\n\t\t\t\t\tkey: 'EcologicalFlow',\r\n\t\t\t\t}\r\n                // {\r\n                //     text: '测站告警',\r\n                //     key: 'StationAlarm',\r\n                // },\r\n                // {\r\n                //     text: '工情告警',\r\n                //     key: 'EngineerAlarm',\r\n                // },\r\n            ],\r\n            currentTabComponent: 'RealTimeRain',\r\n            tabComponentOptions: [\r\n                {\r\n                    text: '实时雨情',\r\n                    key: 'RealTimeRain',\r\n                },\r\n            ],\r\n            currentChangeItem: {},\r\n            polygon: null, // 行政区划多边形\r\n            sectionMarker: null, // 行政区划标记点\r\n            label: null, // 行政区划标记点名称\r\n            wmsLayer: null,\r\n            mapReady: false,\r\n        }\r\n    },\r\n    mounted() {\r\n        const initL = () => {\r\n            return new Promise((resolve, reject) => {\r\n                console.log(reject)\r\n                // 如果已加载直接返回\r\n                if (window.L) {\r\n                    resolve(window.L)\r\n                }\r\n            })\r\n        }\r\n        this.$nextTick(() => {\r\n            this.newMap()\r\n            initL().then((res) => {\r\n                this.L = res\r\n                d3Svglayer.initD3SvgOverlay(this.L, d3)\r\n                this.mapReady = true\r\n            })\r\n        })\r\n    },\r\n    created() {},\r\n    methods: {\r\n        mapData() {\r\n            return {\r\n                L: this.L,\r\n                map: this.map,\r\n                baseMapOverlay: this.baseMapOverlay,\r\n            }\r\n        },\r\n        changeSelect(data) {\r\n            if (!this.showContent) {\r\n                this.showContent = true\r\n                setTimeout(() => {\r\n                    this.$bus.$emit('contentPanleToggle')\r\n                }, 500)\r\n            }\r\n            if (data.length > 3) {\r\n                this.tabComponentOptions.push(this.currentChangeItem)\r\n                this.tabComponentOptions.shift()\r\n                this.selectionData.shift()\r\n                this.currentTabComponent =\r\n                    this.tabComponentOptions[\r\n                        this.tabComponentOptions.length - 1\r\n                    ].key\r\n            } else if (data.length == 3) {\r\n                this.tabComponentOptions.push(this.currentChangeItem)\r\n                this.currentTabComponent =\r\n                    this.tabComponentOptions[\r\n                        this.tabComponentOptions.length - 1\r\n                    ].key\r\n            } else if (data.length == 2) {\r\n                if (this.tabComponentOptions.length == 3) {\r\n                    this.tabComponentOptions = this.tabComponentOptions.filter(\r\n                        (item) => item.key !== this.currentChangeItem.key\r\n                    )\r\n                } else if (this.tabComponentOptions.length == 1) {\r\n                    this.tabComponentOptions.push(this.currentChangeItem)\r\n                }\r\n                this.currentTabComponent =\r\n                    this.tabComponentOptions[\r\n                        this.tabComponentOptions.length - 1\r\n                    ].key\r\n            } else if (data.length == 1) {\r\n                if (!this.tabComponentOptions.length) {\r\n                    this.tabComponentOptions.push(this.currentChangeItem)\r\n                } else {\r\n                    this.tabComponentOptions = this.tabComponentOptions.filter(\r\n                        (item) => item.key !== this.currentChangeItem.key\r\n                    )\r\n                }\r\n\r\n                this.currentTabComponent = this.tabComponentOptions[0].key\r\n            } else if (!data.length) {\r\n                this.tabComponentOptions = []\r\n                this.currentTabComponent = ''\r\n                this.showContent = false\r\n            }\r\n        },\r\n        test(item, type) {\r\n            this.currentChangeItem = item\r\n        },\r\n        handlePaneClick() {},\r\n        // 菜单显示隐藏\r\n        toggleMenu() {\r\n            this.showMenu = !this.showMenu\r\n        },\r\n        // 控制面板显示隐藏\r\n        toggleContent() {\r\n            this.showContent = !this.showContent\r\n            if (this.showContent) {\r\n                this.$nextTick(() => {\r\n                    this.$bus.$emit('contentPanleToggle')\r\n                })\r\n            }\r\n        },\r\n        // 初始化天地图\r\n        newMap() {\r\n            this.map = new L.Map('bbls-map', {\r\n                crs: L.CRS.EPSG4326,\r\n                scrollWheelZoom: true,\r\n                attributionControl: false,\r\n                zoomControl: false,\r\n                center: [29.865585, 106.499857],\r\n                zoom: this.zoom,\r\n            })\r\n            //   this.map.setView(\r\n            //     new L.LatLng( 29.865585,106.499857), // 106.395593, 29.805197\r\n            //     this.zoom\r\n            //   )\r\n            // vec 矢量底图  img 影像\r\n            var _baseImgLayer = new L.tileLayer(\r\n                'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=f6df78cf1738e5623e2291f608e7040e',\r\n\r\n                {\r\n                    zoomOffset: 1,\r\n                }\r\n            )\r\n            _baseImgLayer.addTo(this.map)\r\n            // cva  矢量注记 cia影像注记\r\n            let pointImgLayer = new L.tileLayer(\r\n                'http://t3.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=f6df78cf1738e5623e2291f608e7040e',\r\n\r\n                {\r\n                    zoomOffset: 1,\r\n                }\r\n            )\r\n            console.log(pointImgLayer, _baseImgLayer)\r\n            // pointImgLayer.addTo(this.map)\r\n\r\n            this.map.on('click', (point) => {\r\n                console.log(point)\r\n                console.log('lt:' + point.latlng.lat)\r\n                console.log('lg:' + point.latlng.lng)\r\n            })\r\n\r\n            this.map.setMinZoom(10)\r\n            this.map.setMaxZoom(17)\r\n            // 添加控件\r\n            // var ctrl = new T.Control.MapType()\r\n            this.initBBSL()\r\n        },\r\n\r\n        // 绘制北碚行政区域\r\n        initBBSL() {\r\n            // d3绘制\r\n            let countries = []\r\n            //   L.polygon([init, redraw]).addTo(this.map)\r\n            countries = towns.features\r\n            var myStyle = {\r\n                color: '#d2e0e1',\r\n                weight: 2,\r\n                opacity: 1,\r\n                fillColor: 'transparent',\r\n                fillOpacity: 1,\r\n            }\r\n            this.baseMapOverlay = new L.geoJSON(countries, {\r\n                style: myStyle,\r\n            })\r\n            this.map.addLayer(this.baseMapOverlay)\r\n            this.baseMapOverlay.bringToBack()\r\n\r\n            //   function init(sel, transform) {\r\n            //     var upd = sel.selectAll('path.geojson').data(countries)\r\n            //     upd\r\n            //       .enter()\r\n            //       .append('path')\r\n            //       .attr('class', 'geojson')\r\n            //       .attr('stroke', '#ccc')\r\n            //       .attr('stroke-width', '1')\r\n            //       .attr('fill', '#006ced')\r\n            //       .attr('fill-opacity', '0.01')\r\n            //   }\r\n\r\n            //   function redraw(sel, transform) {\r\n            //     sel.selectAll('path.geojson').each(function(d, i) {\r\n            //       d3.select(this).attr('d', transform.pathFromGeojson)\r\n            //     })\r\n            //   }\r\n        },\r\n    },\r\n}\r\n",null]}