地图

shuishen

2022-08-02 5d39c1041c0c5094d140623e5fb3ac388b8d2691

地图

 .eslintrc.js

@@ -1,17 +1,26 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-07-29 15:27:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-08-02 11:33:06
 * @FilePath: \zhny_web\.eslintrc.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
module.exports = {
    root: true,
    env: {
        node: true
    },
    'extends': [
        'eslint:recommended',
        'plugin:vue/essential',
        'eslint:recommended'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        "no-unused-vars": "off"
    },
  
    parserOptions: {
        parser: 'babel-eslint'
    }

 .postcssrc.js

File was deleted

 package.json

@@ -1,70 +1,70 @@
{
  "name": "saber-admin",
  "version": "2.9.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "analyz": "npm_config_report=true npm run build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "@dvgis/dc-sdk": "^2.15.0",
    "avue-plugin-ueditor": "^0.1.4",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "classlist-polyfill": "^1.2.0",
    "crypto-js": "^4.0.0",
    "dom-to-image": "^2.6.0",
    "echarts": "^5.0.2",
    "element-china-area-data": "^5.0.2",
    "element-ui": "^2.15.6",
    "jquery": "^3.6.0",
    "js-base64": "^2.5.1",
    "js-cookie": "^2.2.0",
    "js-md5": "^0.7.3",
    "leaflet": "^1.8.0",
    "mockjs": "^1.0.1-beta3",
    "node-gyp": "^5.0.6",
    "nprogress": "^0.2.0",
    "ol": "^6.5.0",
    "olcs": "^2.12.0",
    "portfinder": "^1.0.23",
    "script-loader": "^0.7.2",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.2",
    "vue-i18n": "^8.7.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.5",
    "@vue/cli-service": "^3.1.4",
    "chai": "^4.1.2",
    "node-sass": "^6.0.1",
    "sass-loader": "^10.0.5",
    "vue-template-compiler": "^2.5.17",
    "webpack-bundle-analyzer": "^3.0.3"
  },
  "lint-staged": {
    "*.js": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "vue-cli-service lint",
      "git add"
    ]
  },
  "description": "* BladeX是一个商业化软件，系列产品知识产权归**上海布雷德科技有限公司**独立所有\r * 您一旦开始复制、下载、安装或者使用本产品，即被视为完全理解并接受本协议的各项条款\r * 更多详情请看：[BladeX商业授权许可协议](/LICENSE)",
  "main": ".eslintrc.js",
  "repository": {
    "type": "git",
    "url": "http://guoshilong@s16s652780.51mypc.cn:49896/r/zhny_web.git"
  },
  "author": "",
  "license": "ISC"
    "name": "saber-admin",
    "version": "2.9.1",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "analyz": "npm_config_report=true npm run build",
        "test:unit": "vue-cli-service test:unit",
        "test:e2e": "vue-cli-service test:e2e"
    },
    "dependencies": {
        "@dvgis/dc-sdk": "^2.15.0",
        "avue-plugin-ueditor": "^0.1.4",
        "axios": "^0.18.0",
        "babel-polyfill": "^6.26.0",
        "classlist-polyfill": "^1.2.0",
        "crypto-js": "^4.0.0",
        "dom-to-image": "^2.6.0",
        "echarts": "^5.0.2",
        "element-china-area-data": "^5.0.2",
        "element-ui": "^2.15.6",
        "jquery": "^3.6.0",
        "js-base64": "^2.5.1",
        "js-cookie": "^2.2.0",
        "js-md5": "^0.7.3",
        "leaflet": "^1.8.0",
        "mockjs": "^1.0.1-beta3",
        "node-gyp": "^5.0.6",
        "nprogress": "^0.2.0",
        "ol": "^6.5.0",
        "olcs": "^2.12.0",
        "portfinder": "^1.0.23",
        "script-loader": "^0.7.2",
        "vue": "^2.6.10",
        "vue-axios": "^2.1.2",
        "vue-i18n": "^8.7.0",
        "vue-router": "^3.0.1",
        "vuex": "^3.1.1"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.1.1",
        "@vue/cli-plugin-eslint": "^3.1.5",
        "@vue/cli-service": "^3.1.4",
        "chai": "^4.1.2",
        "node-sass": "^6.0.1",
        "sass-loader": "^10.0.5",
        "vue-template-compiler": "^2.5.17",
        "webpack-bundle-analyzer": "^3.0.3"
    },
    "lint-staged": {
        "*.js": [
            "vue-cli-service lint",
            "git add"
        ],
        "*.vue": [
            "vue-cli-service lint",
            "git add"
        ]
    },
    "description": "* BladeX是一个商业化软件，系列产品知识产权归**上海布雷德科技有限公司**独立所有\r * 您一旦开始复制、下载、安装或者使用本产品，即被视为完全理解并接受本协议的各项条款\r * 更多详情请看：[BladeX商业授权许可协议](/LICENSE)",
    "main": ".eslintrc.js",
    "repository": {
        "type": "git",
        "url": "http://guoshilong@s16s652780.51mypc.cn:49896/r/zhny_web.git"
    },
    "author": "",
    "license": "ISC"
}

 src/components/map/plotMap.vue

@@ -1,4 +1,3 @@
/* eslint-disable camelcase */
<template>
    <div>
        <div id="viewer-container" style="height: 100%; width: 100%"></div>
@@ -70,11 +69,81 @@

            // http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer

            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            //         url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
            //         // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
            //         layer: 'nanchengyjjddom',
            //         style: 'default',
            //         tileMatrixSetID: 'default028mm',
            //         format: 'image/png',
            //         tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
            //         maximumLevel: 19,
            //         tileMatrixLabels: [
            //             '0',
            //             '1',
            //             '2',
            //             '3',
            //             '4',
            //             '5',
            //             '6',
            //             '7',
            //             '8',
            //             '9',
            //             '10',
            //             '11',
            //             '12',
            //             '13',
            //             '14',
            //             '15',
            //             '16',
            //             '17',
            //             '18',
            //             '19'
            //         ]
            //     })
            // )

            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            //         url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
            //         // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
            //         layer: 'nanchengdom',
            //         style: 'default',
            //         tileMatrixSetID: 'default028mm',
            //         format: 'image/png',
            //         tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
            //         maximumLevel: 19,
            //         tileMatrixLabels: [
            //             '0',
            //             '1',
            //             '2',
            //             '3',
            //             '4',
            //             '5',
            //             '6',
            //             '7',
            //             '8',
            //             '9',
            //             '10',
            //             '11',
            //             '12',
            //             '13',
            //             '14',
            //             '15',
            //             '16',
            //             '17',
            //             '18',
            //             '19'
            //         ]
            //     })
            // )

            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
                    url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdomjuly/MapServer/WMTS',
                    // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    layer: 'nanchengyjjddom',
                    layer: 'nanchengdomjuly',
                    style: 'default',
                    tileMatrixSetID: 'default028mm',
                    format: 'image/png',
@@ -105,40 +174,8 @@
                })
            )

            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
                    url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
                    layer: 'nanchengdom',
                    style: 'default',
                    tileMatrixSetID: 'default028mm',
                    format: 'image/png',
                    tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
                    maximumLevel: 19,
                    tileMatrixLabels: [
                        '0',
                        '1',
                        '2',
                        '3',
                        '4',
                        '5',
                        '6',
                        '7',
                        '8',
                        '9',
                        '10',
                        '11',
                        '12',
                        '13',
                        '14',
                        '15',
                        '16',
                        '17',
                        '18',
                        '19'
                    ]
                })
            )



            // 矢量电子
            // global.viewer.imageryLayers.addImageryProvider(

 src/views/mapPattern/index.vue

@@ -1,5 +1,5 @@
<template>
    <div style="position: relative; height: 100%;">
    <div @click="bodyClick($event)" style="position: relative; height: 100%;">
        <plot-map ref="plotMap" style="position: absolute; width: 100%; height: 100%;"></plot-map>
        <div class="top">
            <div class="logo">
@@ -24,10 +24,10 @@
        </div>
        <div class="farm-plant">
            <div class="title">
                <span>种养品种 · {{ this.page.total }}种</span>
                <span>种养品种 · {{ this.plotPlantBreed.length }}种</span>
            </div>
            <div class="content">
                <div class="list-item" v-for="(item, index) in farmPlantList" :key="index">
                <div class="list-item" v-for="(item, index) in plotPlantBreed" :key="index">
                    <div class="item-img">
                        <img :src="item.url" />
                        <span>{{ item.strainName }}</span>
@@ -42,14 +42,14 @@
                    有轮廓的地块：
                    <span
                        style="font-size: 26px;font-weight: bold;color: #5ABF78;"
                    >{{landIsAreaStatistic[0]}}</span>
                    >{{landIsAreaStatistic.length > 0 ? landIsAreaStatistic[0] : 0}}</span>
                </div>

                <div>
                    无轮廓的地块：
                    <span
                        style="font-size: 26px;font-weight: bold;color: #E3B745;"
                    >{{landIsAreaStatistic[1]}}</span>
                    >{{landIsAreaStatistic.length > 1 ? landIsAreaStatistic[1] : 0}}</span>
                </div>
            </div>
        </div>
@@ -58,12 +58,50 @@
                <span>地块 · {{ this.pageLand.total }}种</span>
            </div>
            <div class="content">
                <div class="list-item" v-for="(item, index) in landList" :key="index">
                <div
                    class="list-item"
                    v-for="(item, index) in landList"
                    :key="index"
                    @click="setCenter(item)"
                >
                    <div class="item-img">
                        <img :src="item.url" />
                        <span>{{ item.landName }}</span>
                    </div>
                    <div class="item-num">{{ item.landArea }}亩</div>
                </div>
            </div>
        </div>

        <div class="plot-detail-popup" v-show="cPShow" ref="showCP">
            <div class="header">
                <div class="plot-name">
                    <div class="name">{{ currentPlotDetails.landName }}</div>
                    <i class="el-icon-edit-outline" title="编辑地块名称"></i>
                </div>
                <div class="plot-area-type">
                    <div class="l">
                        占地面积：{{ currentPlotDetails.landArea }}{{ currentPlotDetails.dica }}
                        <span
                            class="type"
                        >{{ currentPlotDetails.dic }}</span>
                    </div>
                    <div class="r">
                        进入地块
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
            </div>

            <div class="body">
                <div class="list" v-for="(item, index) in cPPBreed" :key="index">
                    <div class="l">
                        <img :src="item.url" />
                        {{ item.strainName }}
                    </div>
                    <div
                        class="r"
                    >{{ item.createTime }}{{ item.plantingWay == 0 ? "移摘" : item.plantingWay == 1 ? "播种" : "秧苗" }}</div>
                </div>
            </div>
        </div>
@@ -91,10 +129,25 @@
                total: 0,
            },
            farmPlantList: [],

            // 数据合并后的种养品种
            plotPlantBreed: [],

            // 当前地块种养品种
            cPPBreed: [],

            // 当前地块对应弹框
            cPShow: false,

            // 当前点击地块详情
            currentPlotDetails: {},

            plotClickNum: 0,

            landList: [],
            farmInfo: {},
            landAreaInfo: {},
            landIsAreaStatistic: [0, 0],
            landIsAreaStatistic: [],
        }

    },
@@ -126,7 +179,41 @@
                const data = res.data.data
                this.page.total = data.total
                this.farmPlantList = data.records

                let arr = []
                this.farmPlantList.forEach(item => {
                    if (arr.length > 0) {
                        let result = arr.some(it => {
                            if (item.strainName == it.strainName) {
                                it.area += Number(item.area)

                                return true
                            }
                        })

                        if (!result) {
                            arr.push({
                                strainName: item.strainName,
                                area: Number(item.area),
                                url: item.url
                            })
                        }
                    } else {
                        arr.push({
                            strainName: item.strainName,
                            area: Number(item.area),
                            url: item.url
                        })
                    }
                })

                this.plotPlantBreed = arr


                this.loading = false



                // this.selectionClear()
            })
        },
@@ -186,10 +273,48 @@
                console.log(res)
                this.landIsAreaStatistic = res.data.data
            })
        },

        // 地块定位
        setCenter (item) {
            this.$refs.plotMap.setPlotCenter(item.landName)
        },

        plotDetailsPopupShow (params) {
            this.currentPlotDetails = params

            let arr = []

            this.farmPlantList.forEach((item, index) => {
                if (params.id == item.landId) {
                    arr.push(item)
                }
            })

            this.cPPBreed = arr

            this.cPShow = true
        },

        bodyClick (e) {
            if (this.plotClickNum == 0) {
                this.plotClickNum++
                return
            }

            if (this.$refs.showCP) {
                console.log(1)
                let isSelf = this.$refs.showCP.contains(e.target)
                if (!isSelf) {
                    this.plotClickNum = 0
                    this.cPShow = false
                }
            }
        }
    }
}
</script>

<style lang="scss" scope>
.top {
    position: absolute;
@@ -414,6 +539,7 @@
            border-bottom: 1px solid #cccccc;
            flex-flow: row nowrap;
            justify-content: space-between;
            cursor: pointer;

            .item-img {
                margin-left: 5px;
@@ -444,4 +570,81 @@
        }
    }
}

.plot-detail-popup {
    position: fixed;
    top: 50%;
    left: 50%;

    width: 462px;
    height: 262px;

    transform: translate(-50%, -50%);
    z-index: 11;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    overflow: hidden;

    .header {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        height: 80px;
        background: #2cd2a9;
        color: #fff;

        & > div {
            flex: 1;
            display: flex;
            align-items: center;
        }

        .plot-name {
        }

        .plot-area-type {
            justify-content: space-between;
        }
    }

    .body {
        padding: 10px 20px;
        height: calc(100% - 80px);
        background: rgba(0, 0, 0, 0);
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;

        .list:first-child {
            margin: 0;
        }

        .list {
            margin-top: 10px;
            padding: 0 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            background: #fff;
            font-size: 14px;

            .l {
                display: flex;
                align-items: center;
                color: #2cd2a9;

                img {
                    margin-right: 10px;
                    width: 30px;
                    height: 30px;
                }
            }

            .r {
                color: #999;
            }
        }
    }
}
</style>

 src/views/test.vue

@@ -1,10 +1,17 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-07-29 15:27:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-08-02 11:31:53
 * @FilePath: \zhny_web\src\views\test.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <basic-container>测试页</basic-container>
    <basic-container>测试页</basic-container>
</template>

<script>
  export default {};
export default {};
</script>

<style>
</style>
<style></style>