调接口

src/main/data-center-admin/src/views/Geoserver.vue

@@ -3,6 +3,21 @@
         <div class="edit-view__content-wrapper">
             <div class="edit-view__content-section">
                 <div id="map" style="width: 100%; height:100%"></div>
+
+                <el-dialog :title="companyInfo.org_name" width="500px" center :visible.sync="showInfo">
+                    <div class="form-info">
+                        <span class="name">企业介绍：</span>
+                        <span class="val">{{ companyInfo.intro }}</span>
+                    </div>
+                    <div class="form-info">
+                        <span class="name">企业类型：</span>
+                        <span class="val">{{ companyInfo.org_type }}</span>
+                    </div>
+                    <div class="form-info">
+                        <span class="name">企业地址：</span>
+                        <span class="val">{{ companyInfo.address_de }}</span>
+                    </div>
+                </el-dialog>
             </div>
         </div>
     </div>
@@ -16,8 +31,47 @@ import ImageLayer from 'ol/layer/Image';
 import ImageWMS from 'ol/source/ImageWMS';
 import { fromLonLat } from 'ol/proj';
 import Projection from 'ol/proj/Projection';
+import axios from 'axios';
 
 export default {
+    data() {
+        return {
+            companyInfo: {
+                id: 11902,
+                created_at: '',
+                created_by: '管理员(1)',
+                modified_a: '',
+                modified_b: '管理员(1)',
+                address: '江西南昌',
+                address_de: '江西省南昌经济技术开发区双港西大街528号',
+                attach: '',
+                contact_em: '',
+                contact_id: '',
+                contact_na: '余绍华',
+                contact_ph: '',
+                intro:
+                    '研制生产航空航天器通信测控设备、特种专测设备和地面设备，语言电教设备、通讯设备、航空机电、电子电脑、工业和文化办公自动化设备、仪表仪器、通信设备的技术开发、转让、咨询、服务；机械加工、计算机软件开发、应用服务、电视电缆系统工程、音像设备及产品制造。（依法',
+                license: '',
+                org_name: '江西航天海虹测控技术有限责任公司',
+                org_type: '高新技术企业',
+                parent_org: '南昌经济技术开发区市场监督管理局',
+                public_com: '0',
+                remark: '',
+                state: '',
+                user_id: 11838,
+                industry: '',
+                loge: '',
+                uscc: '',
+                logo: 'https://image.qcc.com/auto/5f28de08d359c58c3cc2654f539cfb33.jpg',
+                status: 'PASS',
+                audit_time: '',
+                location: '115.847722,28.746426',
+                x: 115.847722,
+                y: 28.746426
+            },
+            showInfo: false
+        };
+    },
     mounted() {
         setTimeout(() => {
             this.initMap();
@@ -25,26 +79,39 @@ export default {
     },
     methods: {
         initMap() {
+            var untiled1 = new ImageLayer({
+                source: new ImageWMS({
+                    ratio: 1,
+                    url: 'https://10.5.23.172/geoserver/nc/wms',
+                    crossorigin: 'anonymous',
+                    params: {
+                        FORMAT: 'image/png',
+                        VERSION: '1.1.1',
+                        exceptions: 'application/vnd.ogc.se_inimage',
+                        LAYERS: 'nc:jxdt',
+                        SRS: 'EPSG%3A3857'
+                    }
+                })
+            });
+            var untiled2 = new ImageLayer({
+                source: new ImageWMS({
+                    url: 'http://10.5.23.172/geoserver/nc/wms',
+                    params: {
+                        FORMAT: 'image/png',
+                        VERSION: '1.1.1',
+                        LAYERS: 'nc:poi',
+                        exceptions: 'application/vnd.ogc.se_inimage'
+                    }
+                })
+            });
             var map = new Map({
                 target: 'map',
                 layers: [
                     new TileLayer({
                         source: new OSM()
                     }),
-                    new ImageLayer({
-                        source: new ImageWMS({
-                            ratio: 1,
-                            url: 'https://10.5.23.172/geoserver/nc/wms',
-                            crossorigin: 'anonymous',
-                            params: {
-                                FORMAT: 'image/jpeg',
-                                VERSION: '1.1.1',
-                                exceptions: 'application/vnd.ogc.se_inimage',
-                                LAYERS: 'nc:jxdt',
-                                SRS: 'EPSG%3A3857'
-                            }
-                        })
-                    })
+                    untiled1,
+                    untiled2
                 ],
                 view: new View({
                     center: [12898853.98345, 3346484.5321],
@@ -53,6 +120,24 @@ export default {
                     maxZoom: 15
                 })
             });
+
+            map.on('singleclick', evt => {
+                console.log(evt);
+                var view = map.getView();
+                var viewResolution = view.getResolution();
+                console.log(untiled2.get('visible'));
+                var source = untiled2.get('visible') ? untiled2.getSource() : untiled1.getSource();
+                var url = source.getGetFeatureInfoUrl(evt.coordinate, viewResolution, 'EPSG:3857', {
+                    INFO_FORMAT: 'application/json'
+                });
+                console.log(url.toString());
+
+                axios.get(url).then(res => {
+                    if (res.features.length > 0) {
+                        this.companyInfo = res.features[0].properties;
+                    }
+                });
+            });
         }
     }
 };
@@ -63,5 +148,18 @@ export default {
     height: 100%;
     box-sizing: border-box;
     padding: 0 !important;
+    position: relative;
+
+    .company-box {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 500px;
+        height: 300px;
+        z-index: 30;
+        background-color: #fff;
+        border-radius: 10px;
+        transform: translate(-50%, -50%);
+    }
 }
 </style>