tcollespe

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

此包是测试练习，请勿下载

安装：

npm i tcollespet
npm i ol

导入项目vue中main.js

import tcollespet from 'tcollespet'
Vue.use(tcollespet)

在组件中使用如下所示，若样式丢失请导入import "ol/ol.css";

<template>
  <div class="openlayer">
    地图管理
    <div>
      <el-button @click="changePic">点我切图</el-button>
      <el-button @click="showhaw">是否显示鹰眼</el-button>
      <el-button @click="changeMap">重新渲染map</el-button>
      <el-button @click="changeMap">添加点</el-button>
    </div>
    <openlayer-map style="height: 600px"
      :mapurls="mapUrl"
      :curmapconfig="curmap"
      :is-haw-eye="ishaw"></openlayer-map>
  </div>
</template>

<script>
import "ol/ol.css";
// import OpenlayerMap from "@/components/OpenlayerMap.vue";
export default {

  data() {
    return {
      ishaw: true,
      order: 0,
      mapIndex: 0,
      curmap: {},
      mapUrlList: [
        "https://scpic3.chinaz.net/Files/pic/pic9/202107/apic34088_s.jpg",
        "https://scpic2.chinaz.net/Files/pic/pic9/202107/hpic4220_s.jpg",
        "https://scpic.chinaz.net/Files/pic/pic9/202107/hpic4223_s.jpg",
        "https://scpic1.chinaz.net/Files/pic/pic9/202107/bpic23746_s.jpg",
        "https://scpic1.chinaz.net/Files/pic/pic9/202107/bpic23750_s.jpg",
      ],
      mapUrl: "https://scpic.chinaz.net/Files/pic/pic9/202107/bpic23751_s.jpg",
      mapData: [
        {
          mapActualX: 111,
          mapActualY: 111,
          mapName: "唯美图111",
          mapOriginX: 111,
          mapOriginY: 111,
          mapPath:
            "https://scpic2.chinaz.net/Files/pic/pic9/202107/apic34073_s.jpg",
          mapPathName: "111111.jpg",
          mapPixelX: 1000,
          mapPixelY: 1000,
          nodeName: "唯美风景图",
  
        },
        {
          mapActualX: 111,
          mapActualY: 111,
          mapName: "唯美图2222",
          mapOriginX: 111,
          mapOriginY: 111,
          mapPath:
            "https://scpic2.chinaz.net/Files/pic/pic9/202107/apic34073_s.jpg",
          mapPathName: "唯美图2222.jpg",
          mapPixelX: 1000,
          mapPixelY: 1000,
          nodeName: "唯美风景图",
        },

      ],

    };
  },
  mounted() {},
  methods: {
    showhaw() {
      this.ishaw = !this.ishaw;
    },
    changePic() {
      this.mapUrl = this.mapUrlList[this.order];
      ++this.order;
      if (this.order > this.mapUrlList.length) {
        this.order = 0;
      }
    },
    changeMap() {
      // $('#map').empty()

      let donfig = this.mapData[this.mapIndex];
      let dataconfig = {};
      dataconfig.url = donfig.mapPath;
      dataconfig.RealWidth = donfig.mapActualX;
      dataconfig.RealHeight = donfig.mapActualY;
      dataconfig.PixelWidth = donfig.mapPixelX;
      dataconfig.PixelHeight = donfig.mapPixelY;
      dataconfig.dPR = donfig.mapPixelX / donfig.mapActualX;
      (dataconfig.ZeroPoint = [donfig.mapOriginX, donfig.mapOriginY]),
        (dataconfig.param = false);
      this.curmap = dataconfig;
      ++this.mapIndex;
      if (this.mapIndex >= this.mapData.length) {
        this.mapIndex = 0;
      }
    },


  },
};
</script>

<style>
</style>

相关参数配置如下：

文档

| 序号 | 参数 | 说明 | 类型 | 默认值 | 补充 | | ---- | ---- | ---- | ---- | ---- | ---- | | 1 | width | 宽度 | String | 100% | 建议在外部盒子设定宽度和位置| | 2 | height | 高度 | String | 320px | - | | 3 | title | 标题 | String | ["源列表", "目标列表"] | - | | 4 | button_text | 按钮名字 | Array | - | - | | 5 | from_data | 源数据 | Array | - | 数据格式同element-ui tree组件，但必须有id和pid | | 6 | to_data | 目标数据 | Array | - | 数据格式同element-ui tree组件，但必须有id和pid | | 7 | defaultProps | 配置项-同el-tree中props | Object | { label: "label", children: "children", isLeaf: "leaf", disable: "disable" } | 用法和el-tree的props一样 | | 8 | node_key | 自定义node-key的值，默认为id | String | id | 必须与treedata数据内的id参数名一致，必须唯一 | | 9 | pid | 自定义pid的参数名，默认为"pid" | String | pid | 有网友提出后台给的字段名不叫pid，因此增加自定义支持 | | 10 | leafOnly | 废弃 | - | - | - | | 11 | filter | 是否开启筛选功能 | Boolean | false | 根据defaultProps参数的label字段筛选 | | 12 | openAll | 是否默认展开全部 | Boolean | false | 存在性能问题 | | 13 | ~~renderContent~~ renderContentLeft, renderContentRight | 自定义树节点， 用法同element-ui tree | Function | - | 2.2.3版本拆为两个函数分别定义左右两侧自定义节点 | | 14 | mode | 设置穿梭框模式 | String | transfer | mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人 | | 15 | transferOpenNode | 穿梭后是否展开穿梭的节点 | Boolean | true | 默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据 |

版本更行迭代

v_0.1.3: 1.添加默认数据,显示openlayer基础控件：比例，大小缩放，全屏，鹰眼。 2.实时显示ws推送的数据内容，并显示浮动窗

v_0.1.4： 1.添加轨迹运动显示

v_0.1.5: 1.添加摄像头图标 2.添加快速统计，快速撤离，访客显示和隐藏