{"remainingRequest":"D:\\jenkins\\workspace\\bbsl-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\bbsl-fvue\\src\\views\\frontScreens\\components\\gisTabComponents\\District.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\bbsl-fvue\\src\\views\\frontScreens\\components\\gisTabComponents\\District.vue","mtime":1684458238559},{"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\r\nimport towns from './../../js/towns'\r\nimport DistrictModel from '@/views/frontScreens/components/gisTabComponents/module/DistrictModel'\r\nimport dictUtils from '@/components/dict/DictSelectUtils.js'\r\nimport gisMap from '@/api/frontScreen/gisMap.js'\r\nimport {gisCompMixin} from '@/mixins/gisCompMixin.js'\r\nexport default {\r\n    name: 'district',\r\n    components: {DistrictModel},\r\n    mixins: [gisCompMixin],\r\n    data() {\r\n        return {\r\n            form: {\r\n                name: '',\r\n            },\r\n            iconUrl: require('./../../../../assets/img/gis_district.png'),\r\n            districtData: [],\r\n            isInitMarkers: false,\r\n            LayerGroup: null, // layerGroup 收集用于切换删除\r\n            markerslayer: [], //集合标点的layer 收集用于切换删除\r\n            currentPoint: {},\r\n            params: {\r\n                children: [],\r\n                code: '',\r\n                id: '',\r\n                isParent: '',\r\n                latitude: 0,\r\n                levelCode: 'town',\r\n                levels: [],\r\n                longitude: 0,\r\n                name: '',\r\n                parentId: '',\r\n                pkVal: '',\r\n                sn: 0,\r\n                text: '',\r\n            },\r\n            originData: [\r\n                {\r\n                    code: '1',\r\n                    name: '三圣镇',\r\n                    local: [29.893282, 106.626127],\r\n                },\r\n                {\r\n                    code: '2',\r\n                    name: '复兴街道',\r\n                    local: [29.81363, 106.54764],\r\n                },\r\n                {\r\n                    code: '3',\r\n                    name: '天府镇',\r\n                    local: [29.89507, 106.50078],\r\n                },\r\n                {\r\n                    code: '4',\r\n                    name: '水土街道',\r\n                    local: [29.81216, 106.49202],\r\n                },\r\n                {\r\n                    code: '5',\r\n                    name: '朝阳街道',\r\n                    local: [29.831273, 106.434406],\r\n                },\r\n                {\r\n                    code: '6',\r\n                    name: '柳荫镇',\r\n                    local: [29.97067, 106.59883],\r\n                },\r\n                {\r\n                    code: '7',\r\n                    name: '歇马街道',\r\n                    local: [29.77261, 106.35246],\r\n                },\r\n                {\r\n                    code: '8',\r\n                    name: '澄江镇',\r\n                    local: [29.8744, 106.34989],\r\n                },\r\n                {\r\n                    code: '9',\r\n                    name: '天生街道',\r\n                    local: [29.82307, 106.41701],\r\n                },\r\n                {\r\n                    code: '10',\r\n                    name: '施家梁镇',\r\n                    local: [29.77235, 106.47099],\r\n                },\r\n                {\r\n                    code: '11',\r\n                    name: '童家溪镇',\r\n                    local: [29.6967, 106.43229],\r\n                },\r\n                {\r\n                    code: '12',\r\n                    name: '北温泉街道',\r\n                    local: [29.83887, 106.3916],\r\n                },\r\n                {\r\n                    code: '13',\r\n                    name: '龙凤桥街道',\r\n                    local: [29.77964, 106.41718],\r\n                },\r\n                {\r\n                    code: '14',\r\n                    name: '静观镇',\r\n                    local: [29.89651, 106.56065],\r\n                },\r\n                {\r\n                    code: '15',\r\n                    name: '东阳街道',\r\n                    local: [29.86444, 106.43675],\r\n                },\r\n                {\r\n                    code: '16',\r\n                    name: '蔡家岗街道',\r\n                    local: [29.729001, 106.463601],\r\n                },\r\n                {\r\n                    code: '17',\r\n                    name: '金刀峡镇',\r\n                    local: [30.03387, 106.62094],\r\n                },\r\n            ],\r\n            showInfo: false,\r\n            polygon: null, // 单个行政区划多边形\r\n            sectionMarker: null, // 行政区划标记点\r\n            label: null, // 行政区划标记点名称\r\n            townsPolygon:[], // 行政区划多边形集合\r\n            townsPolygonLayer: null,// 行政区划多边形layer\r\n            townsPoint: [\r\n                {\r\n                    code: '1',\r\n                    name: '三圣镇',\r\n                    local: [29.893282, 106.626127],\r\n                },\r\n                {\r\n                    code: '2',\r\n                    name: '复兴镇',\r\n                    local: [29.81363, 106.54764],\r\n                },\r\n                {\r\n                    code: '3',\r\n                    name: '天府镇',\r\n                    local: [29.89507, 106.50078],\r\n                },\r\n                {\r\n                    code: '4',\r\n                    name: '水土镇',\r\n                    local: [29.81216, 106.49202],\r\n                },\r\n                {\r\n                    code: '5',\r\n                    name: '朝阳街道',\r\n                    local: [29.831273, 106.434406],\r\n                },\r\n                {\r\n                    code: '6',\r\n                    name: '柳荫镇',\r\n                    local: [29.97067, 106.59883],\r\n                },\r\n                {\r\n                    code: '7',\r\n                    name: '歇马镇',\r\n                    local: [29.77261, 106.35246],\r\n                },\r\n                {\r\n                    code: '8',\r\n                    name: '澄江镇',\r\n                    local: [29.8744, 106.34989],\r\n                },\r\n                {\r\n                    code: '9',\r\n                    name: '天生街道',\r\n                    local: [29.82307, 106.41701],\r\n                },\r\n                {\r\n                    code: '10',\r\n                    name: '施家梁镇',\r\n                    local: [29.77235, 106.47099],\r\n                },\r\n                {\r\n                    code: '11',\r\n                    name: '童家溪镇',\r\n                    local: [29.6967, 106.43229],\r\n                },\r\n                {\r\n                    code: '12',\r\n                    name: '北温泉街道',\r\n                    local: [29.83887, 106.3916],\r\n                },\r\n                {\r\n                    code: '13',\r\n                    name: '龙凤桥街道',\r\n                    local: [29.77964, 106.41718],\r\n                },\r\n                {\r\n                    code: '14',\r\n                    name: '静观镇',\r\n                    local: [29.89651, 106.56065],\r\n                },\r\n                {\r\n                    code: '15',\r\n                    name: '东阳街道',\r\n                    local: [29.86444, 106.43675],\r\n                },\r\n                {\r\n                    code: '16',\r\n                    name: '蔡家岗镇',\r\n                    local: [29.729001, 106.463601],\r\n                },\r\n                {\r\n                    code: '17',\r\n                    name: '金刀峡镇',\r\n                    local: [30.03387, 106.62094],\r\n                },\r\n            ],\r\n        }\r\n    },\r\n    created() {\r\n        // this.districtData = this.originData\r\n    },\r\n    mounted() {\r\n        this.$nextTick(async () => {\r\n            await this.getQuerySysAreas()\r\n            this.initMarkers()\r\n        })\r\n    },\r\n    methods: {\r\n        customClear() {\r\n            if (this.polygon) {\r\n                this.map.removeLayer(this.polygon)\r\n                this.polygon = null\r\n            }\r\n            if(this.townsPolygonLayer){\r\n                this.map.removeLayer(this.townsPolygonLayer)\r\n                this.townsPolygonLayer = null\r\n            }\r\n        },\r\n        getQuerySysAreas() {\r\n            return new Promise((resolve, reject) => {\r\n                gisMap.querySysAreas(this.params, (res) => {\r\n                    if (res) {\r\n                        this.districtData = res\r\n                        resolve()\r\n                    }\r\n                    reject()\r\n                })\r\n            })\r\n        },\r\n        updateMarkers() {\r\n            // 获得新的列表数据后清除旧的标点、重新创建地图标点\r\n            this.searchClear = true\r\n            this.clearMarkers()\r\n            this.searchClear = false\r\n            this.initMarkers()\r\n        },\r\n        initMarkers() {\r\n            this.LayerGroup = null\r\n            this.markerslayer = []\r\n            // 画区域\r\n            this.townsPolygon = [], // 行政区划多边形集合\r\n            this.townsPolygonLayer = null,// 行政区划多边形layer\r\n            towns.features.forEach((item) => {\r\n                let points = []\r\n                item.geometry.coordinates[0].forEach((inner) => {\r\n                    let latLng = L.latLng(inner[1], inner[0])\r\n                    points.push(latLng)\r\n                })\r\n                let polygon = this.drawPolygons(points, item.color)\r\n                this.townsPolygon.push(polygon)\r\n            })\r\n            this.townsPolygonLayer = new L.layerGroup(this.townsPolygon);\r\n            this.map.addLayer(this.townsPolygonLayer);\r\n\r\n            let icon = this.createdIcon(this.iconUrl)\r\n            // 画乡镇名称\r\n            this.districtData.forEach((item) => {\r\n                let latlng = new L.LatLng(item.longitude, item.latitude)\r\n                const label = new L.divIcon({\r\n                    html:\r\n                        `<div style=\"color: #fff\">${item.name}<div>` +\r\n                        `<img style=\"width: 15px; height:15px\" src=\"${icon.options.iconUrl}\"></img>`,\r\n                    className: 'my-divIcon',\r\n                    iconSize: 60,\r\n                    iconAnchor: L.point(8, 12),\r\n                })\r\n                const sectionMarker = new L.marker(latlng, {\r\n                    icon: label,\r\n                })\r\n                this.markerslayer.push(sectionMarker)\r\n                let infoWin = this.infoWindow()\r\n                sectionMarker.addEventListener('click', () => {\r\n                    this.currentPoint = item\r\n                    infoWin.update()\r\n                    this.showInfo = true\r\n                    // this.sectionMarker.bindPopup(this.infoWin).openPopup()\r\n                })\r\n\t\t\t\tsectionMarker.addEventListener('mouseover', () => {\r\n\t\t\t\t})\r\n                this.LayerGroup = new L.layerGroup(this.markerslayer)\r\n                this.map.addLayer(this.LayerGroup)\r\n                // 将标注添加到地图中\r\n                sectionMarker.addTo(this.map).bindPopup(infoWin)\r\n                // this.map.addLayer(sectionMarker)\r\n            })\r\n        },\r\n        // 创建icon\r\n        createdIcon(iconUrl) {\r\n            let icon = new L.icon({\r\n                iconUrl: iconUrl,\r\n                iconSize: new L.point(12, 12),\r\n                iconAnchor: new L.point(0, -6),\r\n            })\r\n            return icon\r\n        },\r\n        drawPolygons(points, color) {\r\n            // 创建面对象\r\n            return new L.polygon(points, {\r\n                color: '#f4f7fd',\r\n                weight: 1,\r\n                opacity: 1,\r\n                fillColor: '#409eff',\r\n                fillOpacity: 0.1,\r\n            })\r\n            //向地图上添加面\r\n            // this.map.addLayer(polygon)\r\n        },\r\n        rowClick(row) {\r\n            // this.currentPoint = row\r\n            this.clearMarkers()\r\n            this.createdLngLat(row)\r\n        },\r\n        async changeSearch(val) {\r\n            this.params.name = val\r\n            await this.getQuerySysAreas()\r\n            this.updateMarkers()\r\n            if (val) {\r\n                this.createdLngLat(this.districtData[0])\r\n            }\r\n            // if (!val) {\r\n            //   this.districtData = this.originData\r\n            //   return\r\n            // }\r\n            // this.districtData = this.originData.filter(item => item.name == val)\r\n        },\r\n        // 多边形绘制\r\n        drawPolygon(points) {\r\n            if (this.polygon) {\r\n                this.map.removeLayer(this.polygon)\r\n                this.polygon = null\r\n            }\r\n            // 创建面对象\r\n            this.polygon = L.polygon(points, {\r\n                color: '#f5f5f5',\r\n                weight: 1,\r\n                opacity: 0.5,\r\n                fillColor: '#4db7ff',\r\n                fillOpacity: 0.9,\r\n            })\r\n            //向地图上添加面\r\n            this.map.addLayer(this.polygon)\r\n        },\r\n        infoWindow() {\r\n            let sContent = this.$refs.DistrictModel.$el\r\n            var infoWin = new L.popup({\r\n                autoPan: true,\r\n                maxHeight: 300,\r\n                maxWidth: 600,\r\n                minWidth: 300,\r\n            }).setContent(sContent)\r\n\t\t\t\r\n            return infoWin\r\n        },\r\n        drawMarker(latlng, item, name) {\r\n            if (this.sectionMarker) {\r\n                this.map.removeLayer(this.sectionMarker)\r\n                this.sectionMarker = null\r\n            }\r\n            // 图片\r\n            let icon = new L.icon({\r\n                iconUrl: this.iconUrl,\r\n                iconSize: new L.point(12, 12),\r\n                iconAnchor: new L.point(0, -6),\r\n            })\r\n            const label = new L.divIcon({\r\n                html:\r\n                    `<div style=\"color:#fff\">${name}<div>` +\r\n                    `<img style=\" width: 15px;height:15px\" src=\"${icon.options.iconUrl}\"></img>`,\r\n                className: 'my-divIcon',\r\n                iconSize: 60,\r\n                iconAnchor: L.point(8, 12),\r\n            })\r\n            this.sectionMarker = new L.marker(latlng, {icon: label})\r\n            this.infoWin = this.infoWindow()\r\n            this.sectionMarker.addEventListener('click', () => {\r\n                this.infoWin.update()\r\n                this.showInfo = true\r\n            })\r\n            // 将标注添加到地图中\r\n            this.sectionMarker.addTo(this.map).bindPopup(this.infoWin)\r\n            // this.map.addLayer(this.sectionMarker)\r\n            // this.showInfo = true\r\n        },\r\n        createdLngLat(row) {\r\n            this.currentPoint = row\r\n            let markerLocal = [row.longitude, row.latitude]\r\n            let points = []\r\n            let area = towns.features.filter(\r\n                (item) => item.properties.name == row.name\r\n            )\r\n            area[0].geometry.coordinates[0].forEach((item) => {\r\n                points.push(new L.LatLng(item[1], item[0]))\r\n            })\r\n            let latlng = new L.LatLng(markerLocal[0], markerLocal[1])\r\n            // 创建\r\n            this.drawPolygon(points)\r\n            this.drawMarker(latlng, row, row.name)\r\n        },\r\n    },\r\n}\r\n",null]}