Tcollespet NPM

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则穿梭后不展开，毕竟无法确定第几层就会有庞大数据