街镇网格过滤+居委

package.json

@@ -11,6 +11,7 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+        "@jiaminghi/data-view": "^2.10.0",
         "@videojs/http-streaming": "^2.12.0",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",

src/components/dialog.vue

@@ -16,6 +16,9 @@
       </el-form>
       <!-- 查询 -->
 
+      <!-- <dv-scroll-board :config="scrollData" ref="scrollBoard" style="height:220px" @click="clickfindCityData" /> -->
+
+
       <!-- 表格 -->
       <el-table
         :data="gridData"
@@ -74,6 +77,8 @@ export default {
   data() {
     return {
       dialogTableVisible: true,
+      
+
       gridData: [
         {
           order: 1,
@@ -116,6 +121,28 @@ export default {
           checkName: "检查名称检查名称检查名称",
         },
       ],
+
+      scrollData:{
+                headerBGC:'rgba(0, 66, 97, 0.9)',
+                waitTime:'2000',
+                header: ['列1', '列2', '列3'],
+                oddRowBGC:'#0A2732',
+                data: [
+                    ['行1列1', '行1列2', '行1列3'],
+                    ['行2列1', '行2列2', '行2列3'],
+                    ['行3列1', '行3列2', '行3列3'],
+                    ['行4列1', '行4列2', '行4列3'],
+                    ['行5列1', '行5列2', '行5列3'],
+                    ['行6列1', '行6列2', '行6列3'],
+                    ['行7列1', '行7列2', '行7列3'],
+                    ['行8列1', '行8列2', '行8列3'],
+                    ['行9列1', '行9列2', '行9列3'],
+                    ['行10列1', '行10列2', '行10列3']
+                ],
+
+                
+            },
+
       formInline: {
         code: "",
         name: "",
@@ -123,6 +150,12 @@ export default {
     };
   },
   methods: {
+
+    // clickfindCityData(config) {
+    //   event.stopPropagation();//加上这个
+    //   console.log("config", config.row);
+    //   console.log("config", config.ceil);
+    // },
    
   },
 };

src/components/mixins/map-data1.js

@@ -57,30 +57,30 @@ export default {
             /**
              * 获取街镇信息
              */
-            var options = {
-                click: addLayerCallBack,
-                isZoom: false,
-                style: {
-                    outline: true,
-                    outlineColor: "rgb(255,0,0,0.8)",
-                    material: "rgb(154,255,154,0)",
-                    perPositionHeight: false,
-                    height: 5,
-                    width: 5,
-                    label: {
-                        show: true,
-                        text: "name",
-                        font: "16px Helvetica",
-                        fillColor: "rgb(0,255,0,0.9)",
-                        pixelOffset: [0, -40],
-                        backgroundColor: "rgb(0,0,0,0)",
-                        showBackground: false,
-                    },
-                },
-                // where:"name = '莘庄镇'"
-            };
+            // var options = {
+            //     click: addLayerCallBack,
+            //     isZoom: false,
+            //     style: {
+            //         outline: true,
+            //         outlineColor: "rgb(255,0,0,0.8)",
+            //         material: "rgb(154,255,154,0)",
+            //         perPositionHeight: false,
+            //         height: 5,
+            //         width: 5,
+            //         label: {
+            //             show: true,
+            //             text: "name",
+            //             font: "16px Helvetica",
+            //             fillColor: "rgb(0,255,0,0.9)",
+            //             pixelOffset: [0, -40],
+            //             backgroundColor: "rgb(0,0,0,0)",
+            //             showBackground: false,
+            //         },
+            //     },
+            //     // where:"name = '莘庄镇'"
+            // };
 
-            window.jMap.addLayer("mh_dyn_district", [1], options);
+            // window.jMap.addLayer("mh_dyn_district", [1], options);
             var _this = this;
 
             function addLayerCallBack(obj) {
@@ -89,6 +89,9 @@ export default {
 
             }
 
+
+
+
             //区域采集
             // var options1 = {
             //     callBack: pickPolygonCallBack
@@ -102,95 +105,190 @@ export default {
 
 
             // 图层查询
+            //例：8.1   2查询图层列表
+            // var JmapQuery = new JMapQuery(window.jMap); // JMap为初始化地图时，实例化的JMap对象
+
+            // var qp2 = new JMapQueryParam({
+            //     queryMapService: "mh_dyn_district",
+            //     queryMapLayers: [1],
+            //     //  queryGeometry: result[0],         //  默认进行属性查询，放开该段注释将在选定的几何空间内进行空间查询
+            //     // queryWhere: "name like '%莘庄镇%' ", //  可自定义查询条件，也可不传该参数
+            //     outFields: ["*"], //  返回字段信息
+            //     callBack: testQueryCallBack
+            // });
+            // JmapQuery.execQuery(qp2);
+            // // 图层查询完毕的回调函数
+            // function testQueryCallBack(obj) {
+            //     var bigArr = obj.features;
+            //     var bigNewArr = []
+            //     bigArr.forEach(function(item, index) {
+            //         var aaa = item.geometry.rings[0];
+            //         var newArr = aaa.map(function(value, index) {
+            //             var obj = {
+            //                 x: value[0],
+            //                 y: value[1],
+            //                 z: 0.1
+            //             }
+            //             return obj
+            //         })
+            //         bigNewArr.push(newArr)
+
+            //     })
+            //     let arrayAll = [];
+            //     bigNewArr.forEach(function(item, index) {
+            //         var idx = index + 1;
+            //         console.log(idx)
+            //         var color = ["#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", ];
+
+
+            //         setTimeout(() => {
+            //             console.log(1111111)
+
+
+            //             // 2区域分布
+            //             var target = {
+            //                 id: idx,
+            //                 attributes: {
+            //                     name: '测试区域分布'
+            //                 },
+            //                 position: item,
+            //                 label: {
+            //                     // text: "测试区域分布",
+            //                     font: "16px Helvetica",
+            //                     color: "rgb(255, 0, 0, .8)",
+            //                     pixelOffset: [0, -50]
+            //                 }
+            //             };
+            //             var options = {
+            //                 isZoom: true,
+            //                 click: regionLocateCallBack,
+            //                 style: {
+            //                     color: color[index],
+            //                     transparency: 0.2,
+            //                     outline: true,
+            //                     outlineColor: 'blue',
+            //                 }
 
-            //例：查询图层列表
-            var JmapQuery = new JMapQuery(window.jMap); // JMap为初始化地图时，实例化的JMap对象
+            //             };
+            //             jMap.Locate.regionLocate(target, options);
 
-            var qp2 = new JMapQueryParam({
-                queryMapService: "mh_dyn_district",
-                queryMapLayers: [1],
-                //  queryGeometry: result[0],         //  默认进行属性查询，放开该段注释将在选定的几何空间内进行空间查询
-                // queryWhere: "name like '%莘庄镇%' ", //  可自定义查询条件，也可不传该参数
-                outFields: ["*"], //  返回字段信息
-                callBack: testQueryCallBack
-            });
-            JmapQuery.execQuery(qp2);
+            //             console.log(11111112222222)
 
+            //             // 分布点点击事件的回调函数
+            //             function regionLocateCallBack(obj) {
+            //                 console.log(obj); // obj为返回值
+            //             }
 
-            // 图层查询完毕的回调函数
-            function testQueryCallBack(obj) {
-                var bigArr = obj.features;
-                var bigNewArr = []
-                bigArr.forEach(function(item, index) {
-                    var aaa = item.geometry.rings[0];
-                    var newArr = aaa.map(function(value, index) {
-                        var obj = {
-                            x: value[0],
-                            y: value[1],
-                            z: 0.1
-                        }
-                        return obj
-                    })
-                    bigNewArr.push(newArr)
+            //         }, idx * 1)
 
-                })
-                let arrayAll = [];
-                bigNewArr.forEach(function(item, index) {
-                    var idx = index + 1;
-                    console.log(idx)
-                    var color = ["#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", ];
 
 
-                    setTimeout(() => {
-                        console.log(1111111)
-                            //区域分布
-                        var target = {
-                            id: idx,
-                            attributes: {
-                                name: '测试区域分布'
-                            },
-                            position: item,
-                            label: {
-                                // text: "测试区域分布",
-                                font: "16px Helvetica",
-                                color: "rgb(255, 0, 0, .8)",
-                                pixelOffset: [0, -50]
-                            }
-                        };
-                        var options = {
-                            isZoom: true,
-                            click: regionLocateCallBack,
-                            style: {
-                                color: color[index],
-                                transparency: 0.2,
-                                outline: true,
-                                outlineColor: 'blue',
-                            }
+            //         item.forEach(function(i) {
+            //             arrayAll.push(i)
+            //         })
+            //     })
+            //     console.log(222)
+            //     console.log(arrayAll)
+            // }
 
-                        };
-                        jMap.Locate.regionLocate(target, options);
 
-                        console.log(11111112222222)
 
-                        // 分布点点击事件的回调函数
-                        function regionLocateCallBack(obj) {
-                            console.log(obj); // obj为返回值
-                        }
 
-                    }, idx * 1)
+            var JmapQuery = new JMapQuery(window.jMap); // JMap为初始化地图时，实例化的JMap对象
 
+            //例：8.1  1：查询图层记录总量
+
+            // var qp = new JMapQueryParam({
+            //     queryMapService: "mh_dyn_cywg",
+            //     queryMapLayers: [1],
+            //     returnCountOnly: true,
+            //     callBack: testQueryCallBack
+            // });
+            // JmapQuery.execQuery(qp);
+
+
+
+            // 例： 8.1 2 查询图层列表
+            // var qp2 = new JMapQueryParam({
+            //     queryMapService: "mh_dyn_cywg",
+            //     queryMapLayers: [0],
+            //     //  queryGeometry: result[0],         //  默认进行属性查询，放开该段注释将在选定的几何空间内进行空间查询
+            //     // queryWhere: "name like '%莘庄镇%' ", //  可自定义查询条件，也可不传该参数
+            //     outFields: ["*"], //  返回字段信息
+            //     callBack: testQueryCallBack
+            // });
+            // JmapQuery.execQuery(qp2);
+            // // 图层查询完毕的回调函数
+            // function testQueryCallBack(obj) {
+            //     var bigNewArr = [];
+            //     var name = [];
+            //     var bigArr = obj.features.filter(function(el) {
+            //         return el.attributes.name.indexOf('华漕') > -1
+            //     })
+            //     console.log(bigArr)
+            //     bigArr.forEach(function(item, index) {
+            //         var aaa = item.geometry.rings[0];
+            //         var newArr = aaa.map(function(value, index) {
+            //             var obj = {
+            //                 x: value[0],
+            //                 y: value[1],
+            //                 z: 0.1
+            //             }
+            //             return obj
+            //         })
+            //         bigNewArr.push(newArr);
+            //         name.push(item.attributes.name)
+
+            //     })
+            //     let arrayAll = [];
+            //     console.log(bigNewArr)
+            //     console.log(name)
+            //     bigNewArr.forEach(function(item, index) {
+            //         var idx = index + 1;
+            //         var color = ["#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", "#009b8a", "#b72727", "#71a382", "#1c6093", "#a4294f", "#3f8a3f", "#68afc1", "#5081c5", "#c3a102", "#d17100", ];
+            //         setTimeout(() => {
+
+            //             // 2区域分布
+            //             var target = {
+            //                 id: idx,
+            //                 attributes: {
+            //                     name: name[index]
+            //                 },
+            //                 position: item,
+            //                 label: {
+            //                     text: name[index],
+            //                     font: "16px Helvetica",
+            //                     color: "rgb(255, 0, 0, .8)",
+            //                     pixelOffset: [0, -40]
+            //                 }
+            //             };
+            //             var options = {
+            //                 isZoom: true,
+            //                 click: regionLocateCallBack,
+            //                 style: {
+            //                     color: color[index],
+            //                     transparency: 0.6,
+            //                     outline: true,
+            //                     outlineColor: 'blue',
+            //                 }
 
+            //             };
+            //             jMap.Locate.regionLocate(target, options);
 
-                    item.forEach(function(i) {
-                        arrayAll.push(i)
-                    })
-                })
-                console.log(222)
-                console.log(arrayAll)
+            //             // 分布点点击事件的回调函数
+            //             function regionLocateCallBack(obj) {
+            //                 console.log(obj); // obj为返回值
+            //             }
 
+            //         }, idx * 1)
 
 
 
+            //         item.forEach(function(i) {
+            //             arrayAll.push(i)
+            //         })
+            //     })
+            // }
 
 
 
@@ -198,12 +296,70 @@ export default {
 
 
 
+            //8.2
+            // var options = {
+            //     click: addLayerCallBack,
+            //     isZoom: false,
+            //     style: {
+            //         outline: true,
+            //         outlineColor: "rgb(255,0,0,0.8)",
+            //         material: "rgb(154,255,154,0)",
+            //         perPositionHeight: false,
+            //         height: 5,
+            //         width: 5,
+            //         label: {
+            //             show: true,
+            //             text: 'name',
+            //             font: "12px Helvetica",
+            //             fillColor: 'rgb(0,255,0,0.9)',
+            //             pixelOffset: [0, -40],
+            //             backgroundColor: 'rgb(0,0,0,0)',
+            //             showBackground: false
+            //         }
+            //     },
+            //     // where: "name = '莘庄镇'"
 
+            // };
+            // jMap.addLayer('mh_dyn_cywg', [0], options);
+            // // 点击事件回调函数
+            // function addLayerCallBack(obj) {
+            //     console.log(obj);
+            // }
 
 
+            //例 8.1  4：图层分组统计，这里查询居委图层，按所属街镇字段进行分组统计，统计各街镇下居委数量
+            // console.log(111111111)
+            // var qp4 = new JMapQueryParam({
+            //     queryMapService: "mh_dyn_district",
+            //     queryMapLayers: [2],
+            //     groupByFieldsForStatistics: ['subdistrict'], //  所需进行分组查询字段
+            //     onStatisticField: 'subdistrict', //  将在其上计算统计信息的字段名称
+            //     statisticType: 'count', //  统计信息的类型
+            //     outStatisticFieldName: 'num', //  指定输出字段名称（别名）
+            //     callBack: testQueryCallBack
+            // });
+            // JmapQuery.execQuery(qp4);
+            // // 图层查询完毕的回调函数
+            // function testQueryCallBack(obj) {
+            //     console.log(obj); // obj为返回值
+            // }
 
 
 
+            // //例8.1   2：查询图层列表
+            var qp2 = new JMapQueryParam({
+                queryMapService: "mh_dyn_district",
+                queryMapLayers: [2],
+                // queryGeometry: result[0], //  默认进行属性查询，放开该段注释将在选定的几何空间内进行空间查询
+                queryWhere: "莘庄镇", //  可自定义查询条件，也可不传该参数
+                outFields: ["*"], //  返回字段信息
+                callBack: testQueryCallBack
+            });
+            console.log(2222222222222)
+            JmapQuery.execQuery(qp2);
+            // 图层查询完毕的回调函数
+            function testQueryCallBack(obj) {
+                console.log(obj); // obj为返回值
             }
 
 
@@ -215,28 +371,25 @@ export default {
 
 
 
-
-
-
             // 街镇标题
-            var qp = new JMapQueryParam({
-                queryMapService: "mh_dyn_district",
-                queryMapLayers: [1],
-                outFields: ["code", "name", "center_x", "center_y"],
-                queryWhere: "name like '%莘庄镇%' ",
-                callBack: (res) => {
-
-                    res.features.forEach(async(val) => {
-                        await window.jMap.FlagInfo.show({
-                            id: val.attributes.code,
-                            position: { x: Number(val.attributes.center_x), y: Number(val.attributes.center_y), z: 0 },
-                            element: `<div class='ysc-dynamic-layer ys-css3-box' onclick="vue.clickFlag(${val.attributes.code})">
-                                                <div class='biaozhu' style="font-size:18px !important">${val.attributes.name}   ${val.attributes.code}</div>
-                                        </div>`,
-                        }, { isZoom: false });
-                    });
-                },
-            });
+            // var qp = new JMapQueryParam({
+            //     queryMapService: "mh_dyn_district",
+            //     queryMapLayers: [1],
+            //     outFields: ["code", "name", "center_x", "center_y"],
+            //     queryWhere: "name like '%莘庄镇%' ",
+            //     callBack: (res) => {
+
+            //         res.features.forEach(async(val) => {
+            //             await window.jMap.FlagInfo.show({
+            //                 id: val.attributes.code,
+            //                 position: { x: Number(val.attributes.center_x), y: Number(val.attributes.center_y), z: 0 },
+            //                 element: `<div class='ysc-dynamic-layer ys-css3-box' onclick="vue.clickFlag(${val.attributes.code})">
+            //                                     <div class='biaozhu' style="font-size:18px !important">${val.attributes.name}   ${val.attributes.code}</div>
+            //                             </div>`,
+            //             }, { isZoom: false });
+            //         });
+            //     },
+            // });
 
             // new JMapQuery(window.jMap).execQuery(qp)
 

src/main.js

@@ -4,6 +4,9 @@ import router from "./router";
 import store from "./store";
 import querystring from "querystring";
 import installElementPlus from "./plugins/element";
+// 将自动注册所有组件为全局组件
+import dataV from '@jiaminghi/data-view'
+
 import * as echarts from "echarts";
 
 import "@a/scss/public.scss";
@@ -85,7 +88,7 @@ app.config.globalProperties.$useStore = useStore;
 app.config.globalProperties.$qs = querystring;
 app.config.globalProperties.$echarts = echarts;
 
-app.use(store).use(pinia).use(router).mount("#app");
+app.use(store).use(pinia).use(router).use(dataV).mount("#app");
 // app.use(store).use(pinia).use(router).use(querystring).use(http, api).mount("#app");
 // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
 Date.prototype.Format = function(fmt) {