模型发布管理 添加

suerprisePlus

2024-07-01 f76b96c26b878840ecc80b79d1e28e477d5573e6

模型发布管理 添加

 .env.development

@@ -5,14 +5,17 @@
ENV = 'development'

# å¼€å‘环境
# VUE_APP_BASE_API = 'http://192.168.11.203/prod-api'
# VUE_APP_BASE_API = '/dev-api/'

# www api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://192.168.11.203:80/prod-api/'
# è·¯ç”±æ‡’加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

# åŽç«¯æŽ¥å£åœ°å€
# VUE_APP_SERVER_API_URL = 'http://192.168.11.51:8080'
# www api
# VUE_APP_SERVER_API_URL = 'http://192.168.11.58:8080'

VUE_APP_SERVER_API_URL = 'http://192.168.11.203:80'

# Mqtt消息服务器连接地址

 public/config/config.js

@@ -1 +1,8 @@
console.log(location)
console.log(location);
const host = location.origin;

const config = {
  apiServices: "http://192.168.11.24:12316/server/",
  imageUrl: "",
  sdkImg: host+"/visual/CimSDK/"
};

 public/index.html

@@ -8,12 +8,12 @@
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="<%= BASE_URL %>logo.png">

  <script src="CimSDK/Workers/jquery-3.5.0.min.js"></script>
  <script src="CimSDK/Workers/layui/layui.js"></script>
  <script src="CimSDK/CimSDK.min.js"></script>
  <link rel="stylesheet" href="CimSDK/Workers/layui/css/layui.css">
  <link rel="stylesheet" href="CimSDK/CimSDK.min.css">
  <script src="./config/config.js"></script>
  <script src="/visual/CimSDK/Workers/jquery-3.5.0.min.js"></script>
  <script src="/visual/CimSDK/Workers/layui/layui.js"></script>
  <script src="/visual/CimSDK/CimSDK.min.js"></script>
  <link rel="stylesheet" href="/visual/CimSDK/Workers/layui/css/layui.css">
  <link rel="stylesheet" href="/visual/CimSDK/CimSDK.min.css">
  <script src="/config/config.js"></script>
  <title>
    <%= webpackConfig.name %>
  </title>

 src/api/iot/modelLibrary.js

@@ -52,10 +52,44 @@
        params: query,
    });
}
export function modelDownloadFile(query) {
  return request({
      url: 'model/downloadFile',
      method: 'get',
      params: query,
  });
export function modelDownloadFile(params) {
    request.post('model/downloadFile', params, { responseType: 'blob' }).then((res) => {
        const { data, headers } = res;
        console.log(headers);
        const fileName = headers['Content-Disposition'].replace(/\w+;filename=(.*)/, '$1');
        const blob = new Blob([data], { type: headers['Content-Type'] });
        let dom = document.createElement('a');
        let url = window.URL.createObjectURL(blob);
        dom.href = url;
        dom.download = decodeURI(fileName);
        dom.style.display = 'none';
        document.body.appendChild(dom);
        dom.click();
        dom.parentNode.removeChild(dom);
        window.URL.revokeObjectURL(url);
    });
    // return request({
    //     url: 'model/downloadFile?guid=' + query,
    //     responseType: 'blob',
    // }).then((res) => {
    //     const { data, headers } = res;
    //     const fileName = headers['Content-Disposition'].replace(/\w+;filename=(.*)/, '$1');
    //     const blob = new Blob([data], { type: headers['Content-Type'] });
    //     let dom = document.createElement('a');
    //     let url = window.URL.createObjectURL(blob);
    //     dom.href = url;
    //     dom.download = decodeURI(fileName);
    //     dom.style.display = 'none';
    //     document.body.appendChild(dom);
    //     dom.click();
    //     dom.parentNode.removeChild(dom);
    //     window.URL.revokeObjectURL(url);
    // });
}
export function modelDownloadetaReq(query) {
    return request({
        url: 'model/downloadMetaReq',
        method: 'post',
        data: query,
    });
}

 src/api/iot/modelServer.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
import request from '@/utils/request';

export function modelSelectMetasByPage(query) {
    return request({
        url: 'model/selectMetasByPage',
        method: 'get',
        params: query,
    });
}

 src/api/mapView/map.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,6 @@
import mapServer from '../../utils/mapServer/mapServer';

//配网接口 => æŸ¥è¯¢æ‰€æœ‰
export function zhangzitou_selectAllLine(params) {
    return mapServer.get('/zhangzitou/selectAllLine', { params: params });
}

 src/assets/js/mapSdk/menuManager.js

@@ -1,5 +1,11 @@
const menuManager = {
    pid: null,
    pointFly: null,
    colorAll: {
        point: SmartEarth.Cesium.Color.fromCssColorString('#ff0000'),
        polyline: SmartEarth.Cesium.Color.fromCssColorString('#ffff0050'),
        polygon: SmartEarth.Cesium.Color.fromCssColorString('#ffff0050'),
    },
    init(res) {
        switch (res.pid) {
            case 's1': //配网巡检
@@ -80,12 +86,30 @@
    setMenuS5(res) {
        switch (res.id) {
            case 'a1':
            case 'a3':
                if (this.pointFly) {
                    this.pointFly.removeFromMap();
                } else {
                    earthCtrl.factory.createSimpleGraphic('billboard', {}, (entity) => {
                        const position = entity.position.getValue();
                        const coordinate = earthCtrl.core.toDegrees(position);
                        this.pointFly = earthCtrl.camera.rotateCamera({
                            lon: coordinate.lon,
                            lat: coordinate.lat,
                            distance: 1000,
                            pitch: -30,
                        });
                    });
                }
                return null;
                break;
            case 'a2':
                return res.name;
                break;
            case 'a3':
                earthCtrl.analysis.createIndoormode({ showHelp: true });
                return null;
                break;

            default:
                return null;
                break;
@@ -104,11 +128,60 @@
    },
    // æ ‡ç»˜
    setMenuS7(res) {
        switch (res.id) {
            case 'a1':
                earthCtrl.factory.createSimpleGraphic('point', {}, (entity) => {});
                break;
            case 'a2':
                earthCtrl.factory.createSimpleGraphic('label', {}, (entity) => {});
                break;
            case 'a3':
                earthCtrl.factory.createSimpleGraphic('polyline', { showSize: false }, (entity) => {});
                break;
            case 'a4':
                earthCtrl.factory.createSimpleGraphic('rectangle', { showSize: false }, (entity) => {});
                break;
            case 'a5':
                earthCtrl.factory.createSimpleGraphic('polygon', { showSize: false }, (entity) => {});
                break;
            case 'a6':
                earthCtrl.factory.SimpleGraphic.clear();
                break;
            default:
                break;
        }
        return null;
    },
    // æµ‹é‡
    setMenuS8(res) {
        return null;
        const colorAll = this.colorAll;
        switch (res.id) {
            case 'a1':
                earthCtrl.measure.clampLineDistance(colorAll, (e) => {});
                break;
            case 'a2':
                earthCtrl.measure.altitude(colorAll, (e) => {});
                break;
            case 'a3':
                earthCtrl.measure.surfaceArea(
                    {
                        ...colorAll,
                        tin: true, // æ˜¯å¦æ˜¾ç¤ºtin三角网
                        onlyTerrain: false, // æ˜¯å¦åªæµ‹é‡ç²¾ç»†åœ°å½¢
                    },
                    (e) => {}
                );
                break;
            case 'a4':
                earthCtrl.measure.planeArea(colorAll, (e) => {});
                break;
            case 'a5':
                earthCtrl.measure.horizontalDistance(colorAll, (e) => {});
                break;
            case 'a6':
                earthCtrl.measure.clearResult();
                break;
        }
    },
    // ç‰¹æ•ˆ
    setMenuS9(res) {

 src/utils/mapServer/mapServer.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
import axios from "axios";
const mapServer = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: config.apiServices,
    // è¶…æ—¶
    timeout: -1
  });
  export default mapServer;
  

 src/views/iot/modelLibrary/index.vue

@@ -43,7 +43,8 @@
                                v-hasPermi="['iot:modelLibrary:add']">修改</el-button> -->
                            <!-- <el-button size="small" type="danger" style="padding: 5px" icon="el-icon-delete"
                                v-hasPermi="['iot:modelLibrary:remove']">删除</el-button> -->
                            <el-button size="small" @click="setModelLibraryExport(scope.row)" type="warning" style="padding: 5px" icon="el-icon-download"
                            <el-button size="small" @click="setModelLibraryExport(scope.row)" type="warning"
                                style="padding: 5px" icon="el-icon-download"
                                v-hasPermi="['iot:modelLibrary:export']">下载</el-button>
                            <!-- <el-button size="small" type="success" style="padding: 5px"
                                icon="el-icon-monitor">预览</el-button> -->
@@ -91,6 +92,8 @@
                <el-button>取 æ¶ˆ</el-button>
            </div>
        </el-dialog>
        <iframe id="downFrame" ref="myIfream" src=""
            style="display: none; border: 0; padding: 0; height: 0; width: 0"></iframe>
    </div>
</template>

@@ -103,9 +106,15 @@
    modelSelectMappers,
    modelInsertFiles,
    modelDeleteMetas,
    modelDownloadFile
    modelDownloadFile,
    modelDownloadetaReq,
} from '@/api/iot/modelLibrary';
import { saveAs } from 'file-saver'
import configTools from '../../../assets/js/configTools';
import { getToken } from "@/utils/auth";
import $ from 'jquery'
import axios from 'axios';
import request from '@/utils/request';
export default {
    name: 'modelLibirary',
    dicts: ['iot_model_library_type'],
@@ -149,7 +158,8 @@
                type: [{ required: true, message: '请选择模型类别', trigger: 'change' }],
                path: [{ required: true, message: '请选择需要上传的模型文件', trigger: 'change' }],
            },
            multipleSelection: []
            multipleSelection: [],
            headers: { Authorization: "Bearer " + getToken() },
        };
    },
    created() {
@@ -225,10 +235,43 @@
                }
            })
        },
        setModelLibraryExport(row){
           modelDownloadFile({guid:row.guid}).then((response)=>{

           })
        setModelLibraryExport(row) {
            modelDownloadetaReq({ ids: [row.id] }).then((response) => {
                if (response.code == 200) {
                    this.setModelDownloadFile(response.msg)
                } else {
                    this.$message(response.msg);
                }
            })
        },
        setModelDownloadFile(res) {
            const url = process.env.VUE_APP_BASE_API + "model/downloadFile?&guid=" + res
            axios.get(url, {
                headers: {
                    "Authorization": "Bearer " + getToken(),
                    "Content-Type": "application/x-www-form-urlencoded",
                },
                responseType: "blob",
            }).then(response => {
                if (!response.headers) return
                var elink = document.createElement('a');
                //  ä½¿ç”¨åŽç«¯æä¾›çš„文件名  å‘½å
                const fileName = response.headers['content-disposition'].split("''")[1];
                console.log(fileName);
                elink.style.display = 'none';
                // æ–‡ä»¶ä¸‹è½½åœ°å€èµ‹å€¼
                elink.href = window.URL.createObjectURL(response.data);
                let str = fileName;
                if (fileName.indexOf("UTF-8''") > -1) {
                    str = fileName.replace("UTF-8''", '')
                }
                elink.download = str;
                elink.click();
                this.$message({
                    message: '文件导出成功',
                    type: 'success'
                });
            })
        },
        // æ·»åŠ ä¸‰ç»´æ¨¡åž‹
        setModelLibraryAdd() {
@@ -241,8 +284,12 @@
            this.title = '';
            this.setFromRest();
            document.getElementById('fileInput').value = "";
            this.selectMappers = null;
        },
        setSsubmitForm(formName) {
            if (!this.selectMappers) {
                this.$message('三维模型未上传无法新增');
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.setModelInsertFiles(this.selectMappers)

 src/views/iot/modelserver/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,381 @@
<template>
    <div v-loading="loading" class="modelLibiraryBox">
        <el-card>
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"
                style="margin-bottom: -20px">
                <el-form-item label="服务名称" prop="name">
                    <el-input v-model="queryParams.name" placeholder="请输入模型名称" clearable size="small"
                        @keyup.enter.native="setQueryParamsQuery" />
                </el-form-item>
                <el-form-item label="服务类别" prop="type">

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini"
                        @click="setQueryParamsQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="setQueryParamsRest">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="modelLibiraryContent">
            <div class="modelLibiraryTable">
                <el-table :data="templateList" border @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="模型名称" align="center" prop="name" />
                    <el-table-column label="模型类型" align="center" prop="type" />
                    <el-table-column label="模型大小" align="center" prop="sizes" :formatter="formatterSize" />
                    <el-table-column label="创建时间" align="center" prop="createTime" :formatter="formatterTime" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240">
                        <template slot-scope="scope">

                            <el-button v-show="!scope.row.url" size="small" @click="setModelLibraryExport(scope.row)"
                                type="success" style="padding: 5px" icon="el-icon-position"
                                v-hasPermi="['iot:modelLibrary:export']">发布</el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false">
            <el-form ref="modelFrom" :model="modelFrom" :rules="rules" label-width="80px">
                <!-- <el-form-item label="模型名称" prop="name">
                    <el-input v-model="modelFrom.name"></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="模型类别" prop="type">
                    <el-select v-model="modelFrom.type" style="width: 100%" placeholder="请选择模型类别" clearable
                        size="small">
                        <el-option v-for="dict in dict.type.iot_model_library_type" :key="dict.value"
                            :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item> -->
                <el-form-item label="模型地址" prop="path">
                    <div style="display: flex">
                        <div style="flex: 1">
                            <input style="display: none" @change="setFileChange" id="fileInput" type="file"
                                accept=".zip"></input>
                            <el-input disabled v-model="modelFrom.path" />
                        </div>
                        <div style="margin-left: 10px">
                            <el-link style="margin: 0px 10px" title="选择" :underline="false" icon="el-icon-plus"
                                @click="setFileCheck"></el-link>
                            <el-link style="margin: 0px 10px" title="上传" :underline="false" icon="el-icon-upload2"
                                @click="setFileInset"></el-link>
                        </div>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="描述">
                    <el-input v-model="modelFrom.bak"></el-input>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- <el-button type="primary" v-show="modelFrom.ids">ä¿® æ”¹</el-button> -->
                <el-button type="primary" @click="setSsubmitForm('modelFrom')">新 å¢ž</el-button>
                <el-button>取 æ¶ˆ</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import configTools from '../../../assets/js/configTools';
import { getToken } from "@/utils/auth";
import {
    modelSelectMetasByPage
} from '@/api/iot/modelServer';

export default {
    name: 'modelserver',

    data() {
        return {
            loading: false,
            queryParams: {
                pageIndex: 1,
                pageSize: 10,
                name: null,
                type: null,
            },
            // æ˜¯å¦ä¸ºç§Ÿæˆ·
            isTenant: false,
            templateList: [

            ],
            // æ€»æ¡æ•°
            total: 0,
            title: '',
            // æ˜¯å¦æ˜¾ç¤ºå¼¹å‡ºå±‚
            open: false,
            modelFrom: {
                name: '',
                type: '',
                path: '',
                bak: '',
                ids: '',
            },
            selectPath: null,
            selectMappers: null,
            //表单验证
            rules: {
                name: [
                    {
                        required: true,
                        message: '模型名称不能为空',
                        trigger: 'blur',
                    },
                ],
                type: [{ required: true, message: '请选择模型类别', trigger: 'change' }],
                path: [{ required: true, message: '请选择需要上传的模型文件', trigger: 'change' }],
            },
            multipleSelection: [],
            headers: { Authorization: "Bearer " + getToken() },
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            if (this.$store.state.user.roles.indexOf('tenant') !== -1) {
                this.isTenant = true;
            }

            this.getList();
        },
        getSelectPath() {
            modelSelectPath().then((response) => {
                if (response.code == 200 && response.msg) {
                    this.selectPath = response.msg;
                } else {
                    this.$message('模型上传路径获取失败: ' + response.msg);
                }
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //查询
        setQueryParamsQuery() {
            this.queryParams.pageIndex = 1;
            this.getList();
        },
        // é‡ç½®
        setQueryParamsRest() {
            this.queryParams = {
                pageIndex: 1,
                pageSize: 10,
                name: null,
                type: null,
            }
            this.getList();
        },
        // æœç´¢
        getList() {
            modelSelectMetasByPage(this.queryParams).then((response) => {
                if (response.code == 200) {

                    this.total = response.data.length;
                    this.templateList = response.data;
                } else {
                    this.$message('模型数据列表获取失败。');
                }
            })
        },
        setModelLibraryRemove() {
            if (this.multipleSelection.length <= 0) {
                return this.$message('请选择要删除的数据');
            }
            const std = [];
            this.multipleSelection.filter((response) => {
                std.push(response.id);
            })
            modelDeleteMetas({ ids: std.toString() }).then((response) => {
                if (response.code == 200) {
                    this.$message({
                        message: '三维模型删除成功',
                        type: 'success'
                    });
                    this.setQueryParamsQuery();
                } else {
                    this.$message('三维模型删除失败');
                }
            })
        },
        setModelLibraryExport(row) {
            modelDownloadetaReq({ ids: [row.id] }).then((response) => {
                if (response.code == 200) {
                    this.setModelDownloadFile(response.msg)
                } else {
                    this.$message(response.msg);
                }
            })
        },
        setModelDownloadFile(res) {
            axios.get(process.env.VUE_APP_BASE_API + "model/downloadFile?guid=" + res, {
                responseType: 'blob',
                headers: this.headers
            }).then((response) => {
                if (response.status === 200) {
                    var elink = document.createElement('a');
                    console.log(response.headers['content-disposition']);
                    debugger
                    // ä½¿ç”¨åŽç«¯æä¾›çš„文件名  å‘½å
                    // const fileName = response.headers['content-disposition'].split('=')[1];
                    // elink.style.display = 'none';
                    // // æ–‡ä»¶ä¸‹è½½åœ°å€èµ‹å€¼
                    // elink.href = window.URL.createObjectURL(response.data);
                    // let str = fileName;
                    // if (fileName.indexOf("UTF-8''") > -1) {
                    //     str = fileName.replace("UTF-8''", '')
                    // }
                    // elink.download = str;
                    // elink.click();
                    // this.$message({
                    //     message: '文件导出成功',
                    //     type: 'success'
                    // });
                }
            })
        },
        // æ·»åŠ ä¸‰ç»´æ¨¡åž‹
        setModelLibraryAdd() {
            this.setFromRest();
            this.open = true;
            this.title = '添加三维模型';
        },
        setModelLibraryCannel() {
            this.open = false;
            this.title = '';
            this.setFromRest();
            document.getElementById('fileInput').value = "";
            this.selectMappers = null;
        },
        setSsubmitForm(formName) {
            if (!this.selectMappers) {
                this.$message('三维模型未上传无法新增');
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.setModelInsertFiles(this.selectMappers)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        setModelInsertFiles(res) {
            modelInsertFiles(JSON.stringify(res)).then((response) => {
                if (response.code == 200) {
                    this.$message({
                        message: '三维模型添加成功',
                        type: 'success'
                    });
                    this.setModelLibraryCannel();
                    this.setQueryParamsQuery();
                } else {
                    this.$message('三维模型添加失败');
                }
            })
        },
        // æ–‡ä»¶é€‰æ‹©
        setFileCheck() {
            document.getElementById('fileInput').click();
        },

        setFileChange() {
            const inputFile = document.getElementById('fileInput').files;
            if (inputFile.length > 0) {
                this.modelFrom.path = inputFile[0].name;
            } else {
                this.$message('获取上传文件信息失败，请重新尝试');
            }
        },
        // æ–‡ä»¶ä¸Šä¼ 
        setFileInset() {
            if (!this.selectPath) {
                this.getSelectPath();
            }
            var formData = new FormData();
            const fs = document.getElementById('fileInput').files;
            for (var i = 0, c = fs.length; i < c; i++) {
                formData.append(fs[i].name, fs[i]); // fs.files[i].name,file
            }
            modelUploadFiles(this.selectPath, formData).then((response) => {
                if (response.code == 200) {
                    this.$message({
                        message: '数据上传成功',
                        type: 'success'
                    });
                    this.setModelSelectMappers()
                } else {
                    this.$message('数据上传失败');
                }
            })
        },
        setModelSelectMappers() {
            if (!this.selectPath) {
                this.getSelectPath();
            }
            this.selectMappers = null;
            modelSelectMappers({ path: this.selectPath }).then((response) => {
                if (response.code == 200) {
                    this.selectMappers = response.data;
                } else {
                    this.$message('数据映射查询失败');
                }
            })
        },
        // è¡¨å•é‡ç½®
        setFromRest() {
            this.modelFrom = {
                name: '',
                type: '',
                path: '',
                bak: '',
                ids: '',
            };
        },
        formatterSize(row, column, cellValue, index) {
            return configTools.formatterSize(cellValue);
        },
        formatterTime(row, column, cellValue, index) {
            if (cellValue) {
                return configTools.formatterTime(cellValue);
            } else {
                return null
            }

        }
    },
};
</script>

<style lang="scss" scoped>
.modelLibiraryBox {
    padding: 6px;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;

    .modelLibiraryContent {
        margin: 6px 0px;
        flex: 1;
        position: relative;

        ::v-deep .el-card__body {
            padding: 15px !important;
        }

        .modelLibiraryTable {
            width: calc(100% - 30px);
            height: calc(100% - 36px);
            position: absolute;
            display: flex;
            flex-direction: column;
        }
    }
}
</style>

 src/views/visual/atlas/index.vue

@@ -3,7 +3,9 @@
</template>

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

<style lang="scss" scoped>

 src/views/visual/mapView/index.vue

@@ -31,6 +31,7 @@
            <layer-manager ref="layerManager"></layer-manager>
            <location ref="location"></location>
            <knowledge ref="knowledge"></knowledge>
            <lineRoaming ref="lineRoaming"></lineRoaming>
        </div>
    </div>
</template>
@@ -42,10 +43,11 @@
import menuManager from '@/assets/js/mapSdk/menuManager.js';
import location from './location.vue';
import knowledge from './knowledge.vue';
import lineRoaming from './lineRoaming.vue';

export default {
    name: 'mapView',
    components: { layerManager, location, knowledge },
    components: { layerManager, location, knowledge, lineRoaming },
    data() {
        return {
            menuIsShow: false,
@@ -75,9 +77,7 @@
            this.setPopCloseAll();
            const obj = menuManager.init(command);
            if (obj) {
                
                this.setPopShow(obj);
               
            }
        },
        setPopCloseAll() {
@@ -95,6 +95,9 @@
                    break;
                case '知识图谱':
                    this.$refs && this.$refs.knowledge && this.$refs.knowledge.open();
                    break;
                case '线路漫游':
                    this.$refs && this.$refs.lineRoaming && this.$refs.lineRoaming.open();
                    break;
                default:
                    break;
@@ -114,7 +117,7 @@

    .menuBox {
        position: absolute;
        z-index: 99999;
        z-index: 40;
        top: 20px;
        right: 2px;
        border-radius: 0 6px 6px 0;

 src/views/visual/mapView/lineRoaming.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,61 @@
<template>
    <Popup ref="pop" top="20px" left="calc(100% - 600px)" :title="title" @close="close(true)" width="300px" :maxHeight="'700px'" @cancel="close(false)">
         <div class="menuBox">
            <el-form ref="form"   label-width="80px">
              <el-form-item label="线路:">
               
              </el-form-item>
              <el-form-item label="线路:">
          
              </el-form-item>
              <el-form-item>
                <el-button size="mini" >开始漫游</el-button>
                <el-button size="mini" >结束漫游</el-button>
              </el-form-item>
            </el-form>
         </div>
    </Popup>
</template>

<script>
import Popup from '@/components/Tool/Popup.vue';
import {
    zhangzitou_selectAllLine
} from '@/api/mapView/map.js'
export default {
    name: 'location',
    components: { Popup },
    data() {
        return {
            title: '线路漫游',
        };
    },
   
 
    methods: {
        // å…³é—­å¼¹çª—
        close(isCloseBtn, removeLayer = true) {
            //   removeLayer && this.removeImageLayer();
            // é‡ç½®data值
            Object.assign(this.$data, this.$options.data());
            !isCloseBtn && this.$refs.pop.close();
        },
        // æ‰“开弹窗
        open() {
            this.close(true);
            this.$refs.pop.open();
            this.romaLineStart();
        },
        romaLineStart(){
            zhangzitou_selectAllLine({  
                limit: 100000,
                page: 1
            }).then((response)=>{
                console.log(response);
            })
        },
    },
};
</script>

<style></style>

 src/views/visual/mapView/location.vue

@@ -1,6 +1,21 @@
<template>
    <Popup ref="pop" top="20px" left="calc(100% - 600px)"    :title="title" @close="close(true)" width="300px" @cancel="close(false)">
        <el-tree></el-tree>
    <Popup ref="pop" top="20px" left="calc(100% - 600px)" :maxHeight="'700px'" :title="title" @close="close(true)" width="300px" @cancel="close(false)">
        <div>
            <el-form label-width="60px" ref="modelFrom" :model="modelFrom" :rules="rules" append-to-body :close-on-click-modal="false">
                <el-form-item label="经度" prop="lon">
                    <el-input v-model="modelFrom.lon"></el-input>
                </el-form-item>
                <el-form-item label="纬度" prop="lat">
                    <el-input v-model="modelFrom.lat"></el-input>
                </el-form-item>
                <el-form-item label="高度" prop="alt">
                    <el-input v-model="modelFrom.alt"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" style="float: right; margin-right: 10px; margin-bottom: 10px" class="dialog-footer">
                <el-button type="primary" @click="setSsubmitForm('modelFrom')">定 ä½</el-button>
            </div>
        </div>
    </Popup>
</template>

@@ -12,6 +27,36 @@
    data() {
        return {
            title: '坐标定位',
            billboard: null,

            modelFrom: {
                lon: '',
                lat: '',
                alt: '',
            },
            rules: {
                lon: [
                    {
                        required: true,
                        message: '经度不能为空',
                        trigger: 'blur',
                    },
                ],
                lat: [
                    {
                        required: true,
                        message: '纬度不能为空',
                        trigger: 'blur',
                    },
                ],
                alt: [
                    {
                        required: true,
                        message: '高度不能为空',
                        trigger: 'blur',
                    },
                ],
            },
        };
    },
    methods: {
@@ -19,14 +64,44 @@
        close(isCloseBtn, removeLayer = true) {
            //   removeLayer && this.removeImageLayer();
            // é‡ç½®data值
            this.setRemoveBillboard();
            Object.assign(this.$data, this.$options.data());
            !isCloseBtn && this.$refs.pop.close();
           
        },
        // æ‰“开弹窗
        open() {
            this.close(true);
            this.$refs.pop.open();
        },
        setRemoveBillboard() {
            if (this.billboard) {
                Viewer.entities.remove(this.billboard);
                this.billboard = null;
            }
        },
        setSsubmitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.setRemoveBillboard();

                    const url = config.sdkImg + 'Workers/image/mark.png';
                    console.log(url);
                    this.billboard = Viewer.entities.add({
                        position: Cesium.Cartesian3.fromDegrees(this.modelFrom.lon, this.modelFrom.lat), // è®¾ç½®å®žä½“在地球上的位置
                        billboard: {
                            image: url, // è®¾ç½®ä½ æƒ³æ˜¾ç¤ºçš„图片
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // è®¾ç½®å›¾ç‰‡åœ¨å®žä½“中的位置
                            disableDepthTestDistance: Number.POSITIVE_INFINITY, // ç¦ç”¨æ·±åº¦æµ‹è¯•ï¼Œç¡®ä¿ä¸è¢«åœ°å½¢é®æŒ¡
                        },
                    });
                    earthCtrl.userScene.flyTo(this.billboard);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
};
</script>