标注画图工具

支持移动端和pc端都进行了兼容

传入时候点的顺序

//通过js直接引入
var {markPlugin} = privateTeamUtils;
//vue或者react项目
import { markPlugin } from "private-team-utils"
//传入的serviceData有两种方式
//1.一共三个参数 最后一个参数只在移动端有用是去掉document.ontouchmove 的默认事件
//new markPlugin(html中的id,options配置选项,true或false)
var mark = new markPlugin("root", {
    //reactFree?:boolean;//设置矩形是否自由滑动 false按照矩形滑动true自由滑动 默认false
    //modeType?:modeTypeHas|undefined;//react矩形 line水平线 polygon多边形 curve不闭合曲线  spot点
    //width?: number;//设置画布宽度 不填默认是父盒子宽度
    //height?: number;//设置画布高度	不填默认是父盒子高度
    //disabled?:boolean;//是否可以滑动
    //autoKey?:boolean;//开启键盘模式支持撤销和删除
    //maxAuto?:number;//开启键盘后支持最大的撤销步数
    //devicePixelRatio?:boolean | number;是否开启倍数  有的时候笔记本屏幕缩放在125%或者150%等的时候，可能你在全局设置了个zoom达到圆比例的效果，这个时候你的鼠标点击位置将发生变化开启此参数将回解决 
    //judgment?:boolean;//设置边界是否可以移动ture不能移动
    serviceData: [[100,50],[50,50],[50,100],[100,100]]
})
//2.这种可以传入多个形状放在一起
var mark = new markPlugin("root", {
    //reactFree?:boolean;//设置矩形是否自由滑动 false按照矩形滑动true自由滑动 默认false
    //modeType?:modeTypeHas|undefined;//react矩形 line水平线 polygon多边形 curve不闭合曲线  spot点
    //width?: number;//设置画布宽度 不填默认是父盒子宽度
    //height?: number;//设置画布高度	不填默认是父盒子高度
    //disabled?:boolean;//是否可以滑动
    //devicePixelRatio?:boolean;是否开启倍数  有的时候笔记本屏幕缩放在125%或者150%等的时候，可能你在全局设置了个zoom达到圆比例的效果，这个时候你的鼠标点击位置将发生变化开启此参数将回解决
    //autoKey?:boolean;//开启键盘模式支持撤销和删除
    //maxAuto?:number;//开启键盘后支持最大的撤销步数
    //judgment?:boolean;//设置边界是否可以移动ture不能移动
    serviceData: [
        {
            serviceData: [[234, 368], [227, 268], [110, 270], [125, 335]],
            circleInColor:"white",
            position:[0,0],
            areaColor:"white",
        },
        {
            serviceData: [[142, 208], [142, 159], [233, 159], [233, 208]]
        },
    ]
})

支持的配置选项

mark.linePoit//当有line的时候 用这个可以获取当前线中点坐标和箭头指向的末尾坐标
mark.changeArrowDirection()///用来转换箭头方向的函数 可传参数 "+"  "-" 默认不传就是+ -来回切换
mark.onmousedown = function (e, serviceData) {
    // e: {
    //     layerX,//当前点击的x坐标
    //     layerY,//当前点击的y坐标
    //     button,//2右键 0左键
    //     index, //当前选中的索引
    //     type,//shape选中图形内部 point选中点
    // }
    //console.log(e, serviceData)
    //e.button == 2 鼠标右键
}//鼠标按下事件
mark.onAdd = function (type,serviceData) {//对图形添加完成进行监听 只能监听 react矩形 polygon多边形 curve不闭合曲线  spot点 
    console.log(type)//添加完成得类型
}
mark.onChange(function(data) {//当图形发生变化的时候会触发该事件
    console.log(data)
})
mark.resize();//更改尺寸时候使用
mark.onError(function (data) {//错误提示
    console.log(data)
})
mark.hiddenOrshow(0)//隐藏指定索引的图形  第一个参数是索引，也可以传入数组 第二个传true是显示，不传或者传false吟唱
mark.hiddenOrshow(0,true)//显示指定索引的图形
mark.hiddenOrshow([0,1,2])//隐藏指定索引的图形  第一个参数是索引，也可以传入数组 第二个传true是显示，不传或者传false吟唱
mark.hiddenOrshow([1,2],true)//显示指定索引的图形
var serviceData = mark.mappingPX(1920, 1080)//映射 标准的1920*1080映射到当前画布大小的点上
if (serviceData) {
    mark.setServiceData(serviceData)
}
serviceData = mark.mappingPX(1920, 1080, false)//映射 从当前画布大小映射到标准的1920*1080上
mark.changeOptions(0, {
    title: "black"
})//改变某一个点的属性值
mark.onRemove = function (index,serviceData) {//监听删除事件  
    console.log(index,serviceData)//添加完成得类型
}
mark.onRemoveKeyDown = function (index,serviceData) {//监听键盘按下删除事件  //return如果"不是"true或者undefined就不会执行删除操作
    console.log(index,serviceData)//添加完成得类型
    return true
}
mark.remove()//可以删除你选中的元素 传入数字可以删除指定下标的元素 
mark.remove(true)//清空所有图形
//添加多种形状react矩形 line线 polygon多边形 curve//曲线 spot点
//添加多边形和曲线或点的时候
//pc端鼠标右键是添加结束
//移动端是连续点击两下停止添加
//后面添加配置选项颜色等一些配置项
mark.addShape("react",{ 
    circleInColor:"black"
})
mark.reset(true);//强制中断绘制过程 可以进行其他的添加操作
mark.setServiceData(
    [
        {
            serviceData: [[234, 368], [227, 268], [110, 270], [125, 335]],
            circleInColor:"white",
            position:[0,0],
            areaColor:"white",
        },
        {
            serviceData: [[142, 208], [142, 159], [233, 159], [233, 208]]
        }
    ]
);//强行设置图形  会清空前面的所有图形然后进行设置
console.log(mark.getServiceData())//获取serviceData的值
mark.destroy()//销毁函数

配置选项有

zIndex?:number;//鼠标按下的时候他的z-index
reactFree?:boolean;//设置矩形是否自由滑动 false按照矩形滑动true自由滑动 默认false
polygonMinPoint?:number;//设置多边形最小支持点数
lineLong?:number;//线的长度
circleRadius?:number;//圆的半径
circleBorderWidth?:number;//圆边的宽度
lineWidth?:number;//线的宽度
circleBorderColor?:string;//圆边的颜色
circleInColor?:string;//圆里面的颜色
lineColor?:string;//线的颜色
circleSelectColor?:string;//圆选中的颜色
areaColor?:string;//区域的颜色
selectAreaColor?:string;//区域选中的颜色
title?:string;//文字的内容
titleColor?:string;//字的颜色
titleFont?:string;//文字的字体设置"14px bold 黑体"
titleLineHeight?:string;//文字的行高
position?:Array<number> | string | Position;//设置框的位置用来矫正用的,也可以选择上中下左右 left center right [10,10]  
//Position {
//    type: string;//类型是 点的索引还是自动的方式  point
//    data: string;//点的索引
//    offset?: Array<number>;
//}
cacheSelect?:number;//上次选择的图形 配合remove(cacheSelect)方法可以上次选择的图形
orderShow?:orderShow;//是否显示顺序
//orderShow {
//    show?: boolean;//隐藏下标
//    color?: string;//文字颜色
//    font?: string;
//    content?: string | Array<string>;
//    position?: Array<number>;
//}

mqtt

//通过js直接引入
var {Mqtt} = privateTeamUtils;
//vue或者react项目
import { Mqtt } from "private-team-utils"
//interface options{
//    username:string,用户名
//    password:string,密码
//    connectTimeout:number,链接超时事件
//    keepalive:number,
//    isAuto:boolean,//默认true 解释：是否自动不上ip后面的/mqtt后缀要是不想要就设置false
//}
//maxReconnectNum最大重连次数不填默认是10
//Mqtt(string,options,maxReconnectNum)这里有第二个参数可以传对象



var mqtt = new Mqtt("xx.xx.xx.xx:4545");
mqtt.link().then((client) => {//封装成promsie方便使用  
    //client这里保留了原生的client函数和用法(也就是mqtt.js原生的使用)
    var ClientID = mqtt.random();//这里我内置了随机数，可以直接使用
    var topicOne = "xxx/xxx"
    var sendMess = { //这就是要传给后端的参数
        MessageId: topicOne,
        TopicId: topicOne,
        Time: new Date().getTime(),
        CompanyId: "xxxx",
        ClientID: ClientID,//这个mqtt是生成随机生成的随机数
        //当然要想申请新的随机数可以mqtt.random()
    };
    // mqtt.subscribe(topic);//订阅主题
    mqtt.subscribe(topicOne + "/" + ClientID);//订阅主题
    mqtt.publish(topicOne, sendMess, { qos: 0 })//向某个主题发送消息
    mqtt.message((data, topic) => {//接收消息，跟据返回的主题可以确定是哪个主题给的消息
        if (topic === topicOne + "/" + ClientID) {
            console.log(data)//这里就是该主题传来的结果
            mqtt.unsubscribe(topicOne + "/" + ClientID)
        }
    });
});

时间配置插件（1.3之后将不在维护，在1.4会删除此版本）

//通过js直接引入
var {timeWeek} = privateTeamUtils;
//vue或者react项目
import { timeWeek } from "private-team-utils"
var timeweek = new timeWeek("root", {
    hiddenELement: {//是否隐藏两个删除和全部删除的按钮
        timeWeekRootdel: false,
        timeWeekRootdelAll:false
    }
})
timeweek.setTime({ //设置时间会清空上次时间
    "1": ["10:06:00-11:08:00","13:06:00-16:08:00"],
    "2": ["10:06:00-11:08:00"],
    "3": ["10:06:00-11:08:00"],
    "4": ["10:06:00-11:08:00"],
    "5": ["10:06:00-11:08:00"],
    "6": ["10:06:00-11:08:00"],
    "7": ["10:06:00-11:08:00"],
})
timeweek.getTime()//获取时间
timeweek.delSelect()//删除时间
timeweek.clearAll()//清空删除时间
// 时间的格式-例子
// 0-00:20:00,02:10:00-02:17:00,23:59:00|1-00:02:00,23:59:00|2-00:05:00,23:59:00|3-00:05:00,23:59:00|4-00:10:00,23:59:00|5-00:05:00,23:59:00|6-00:07:00,23:59:00
// 星期1-时间1开始,时间1结束-时间2开始,时间2结束|星期2-时间1开始,时间1结束|。。。以此类推
timeweek.toString()//时间转字符串 可以传参time格式必须是上面设置时间的格式不然是不会转换的
timeweek.stringToTime()//字符串转时间

时间配置插件--新版canvas实现（部分api会合并稍有变化）

//通过js直接引入
var {timeWeekNew} = privateTeamUtils;
//vue或者react项目
import { timeWeekNew } from "private-team-utils"
var timeweek = new timeWeekNew("root")
timeweek.setTime({ //设置时间会清空上次时间
    "1": ["10:06:00-11:08:00","13:06:00-16:08:00"],
    "2": ["10:06:00-11:08:00"],
    "3": ["10:06:00-11:08:00"],
    "4": ["10:06:00-11:08:00"],
    "5": ["10:06:00-11:08:00"],
    "6": ["10:06:00-11:08:00"],
    "7": ["10:06:00-11:08:00"],
})
timeweek.getTime()//获取时间 和 setTime进入的时间格式相同
timeweek.toString()//转换字符串
timeweek.clearData()//清空 默认清空选中的元素，如果传true就是全部清除
timeweek.setOneTime("00:06:00-14:08:00")//设置某个星期的某段时间 不添参数默认是选中的那个时间进行变化
timeweek.setOneTime("00:06:00-14:08:00",0,0)//设置某个星期的某段时间 星期一第一段蓝色的
timeweek.setOneTime("00:06:00-14:08:00",1,0)//设置某个星期的某段时间 星期二第一段
timeweek.cloningWeek(0, [1, 2, 3])//克隆星期 星期下标，需要克隆星期的下标数组
timeweek.handleChange = function (time, xy) {//监听滑动时候的变化
    console.log(time, xy)
}
timeweek.handleError = function (msg, data) {//错误捕获data会打印一些可以进行判断的信息
    console.log(msg, data)
}
timeweek.handleSelect = function(xyAndTime, week, draw) {//监听选中元素
	console.log(xyAndTime, week, draw)//选中的坐标和时间{time:string,value:[]}，选中星期几下标，选中第几个蓝块下标
}
timeweek.handleMouseup = function(selectKey) {//鼠标抬起 参数选择的内容
	
}
// 时间的格式-例子
// 0-00:20:00,02:10:00-02:17:00,23:59:00|1-00:02:00,23:59:00|2-00:05:00,23:59:00|3-00:05:00,23:59:00|4-00:10:00,23:59:00|5-00:05:00,23:59:00|6-00:07:00,23:59:00
// 星期1-时间1开始,时间1结束-时间2开始,时间2结束|星期2-时间1开始,时间1结束|。。。以此类推
timeweek.stringToTime(time)//字符串转时间

var timeweek = new timeWeekNew("root",{
    maxCount?: number;//一天最大支持标几个时间段默认是4个
    width?: number;//画布宽度（不写默认父盒子宽度）
    height?: number;//画布高度（不写默认父盒子高度）
    autoIntervalHeight?: boolean;//是否根据高度自动平均分布
    intervalHeight?:number//每个块距离上个块的距离
    devicePixelRatio?: boolean;//放大之后是否让他焦点校准
    padding?: number//设置padding设置他距离上面下面和右面的距离
    labelWidth?: number//设置左侧星期一星期二的宽度  默认100
    labeFont?: string//设置左侧字的字体大小  默认16px auto。这里注意这个auto是字体一定要设置不然会不生效
    lineWidth?: number//设置线的宽度
    scaleHeight?: number//设置刻度的高度
    scaleFont?: string//设置刻度上面数字的字体 和labeFont格式一样
})

播放器插件基于dplayer封装

//通过js直接引入
var {objVideo} = privateTeamUtils;
//vue或者react项目
import { objVideo } from "private-team-utils"
//参数id 和地址 和配置选项 支持原生浏览器播放德视频和flv视频
var objvideo = new objVideo("root","http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",{
    volume:0,
    autoplay:true,
    // screenshot:true
});
objvideo.pic = "imgUrl";//可以更新封面
objvideo.changeUrl(url:string);//切换视频路径  如果传空就会进入无信号的状态
objvideo.destroy();//用于销毁播放器用的

配置选项

live?: boolean;//开启直播模式,默认值false
autoplay?: boolean;//视频自动播放这里注意，自动播放时候声音要设置为0不然无法自动播放,默认值false
volume?: number;//默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效,默认值0.7
theme?: string;//主题色,默认值'#b7daff'
loop?: boolean;//视频循环播放,默认值false
lang?: string;//可选值: 'en', 'zh-cn', 'zh-tw',默认值zh-cn
screenshot?: boolean;//开启截图，如果开启，视频和视频封面需要允许跨域,默认值false
hotkey?: boolean;//开启热键，支持快进、快退、音量控制、播放暂停,默认值true
preload?: string;//视频预加载，可选值: 'none', 'metadata', 'auto',默认值'auto'
playbackSpeed?: Array<number>;//可选的播放速率，可以设置成自定义的数组,默认值[0.5, 0.75, 1, 1.25, 1.5, 2]
pic?: string;//视频封面 这个参数你也可以直接用objvideo.pic = "imgUrl";可以更新封面
type?: string//视频类型
mutex?:number;//阻止多个播放
alt?:string;//当没有信号的时候展示的内容 也就是路径是空的时候  可以用这个参数实现多语言
fill?: boolean;//是否添满当前盒子
//--------------只有在flv视频下好使------------
seekTime?: number;//定时进行重新更新下    
maxCount?: number;//重连次数
autoCleanupSourceBuffer?: boolean;//默认true，对SourceBuffer执行自动清理
autoCleanupMaxBackwardDuration?: number;//默认 3 * 60 ,当向后缓冲区持续时间超过此值（以秒为单位）时，请对SourceBuffer执行自动清理
autoCleanupMinBackwardDuration?: number;//默认 2 * 60 ,指示执行自动清理时向后缓冲区保留的持续时间（秒）。
stashInitialSize?: number;//默认 384KB, 指示IO存储缓冲区的初始大小。默认值为384KB。指示合适的大小可以提高视频加载/寻道时间。
enableStashBuffer?: boolean;//默认true，启用IO隐藏缓冲区。如果需要实时（最小延迟）播放实时流，请将设置为false，但如果出现网络抖动，则可能会暂停播放。

3d渲染插件封装

基于cesium进行二次封装，可以加载tileset.json点的操作和线的操作

如果你要使用下载完包后你可以将其中的Cesium文件夹放到public中

然后引入css即可,如下：

<link rel="stylesheet" href="<%= BASE_URL %>Cesium/Widgets/widgets.css">

//CesiumEasy参数
//id  html中绑定元素的id
//options 一些配置项信息
//url 加载cdn资源还是本地资源  默认是./Cesium/Cesium.js
var cesiumEasy = new CesiumEasy("root", {
    Tileset: {//这里是默认信息，如果你要加载tileset.json设置要展示的位置
        latitude: 39.91223329772797,//维度
        longitude: 116.46341278843354,//经度
        height: 115,//高度
    }
});
cesiumEasy.loadFinish = (Cesium) => {//加载函数之后cesium加载完之后才能进行绘制操作
    //传入tileset.json的静态地址 加载完后会返回一些实例可以进行操作
    cesiumEasy.set3DTileset("http://localhost:3003/static/data/tileset.json", (err, viewer, tileset) => {
        // console.log(err, viewer, tileset)
    })
    //传入gltf静态地址会加载glft，指定经纬度会固定投放的位置  返回一个坐标信息一个是添加后的实例 可以用来移动这个物体
     var { position, primitive } = cesiumEasy.setGlft("/1900002.gltf", {
        latitude: 39.91223329772797,//维度
        longitude: 116.46341278843354,//经度
    })
     //新加使用方式  传入id 如果下次传得id相同会继续这个位置进行图形状动画得添加
     cesiumEasy.moveCarByDegrees(id, {
         latitude: lat,//维度
         longitude: lng,//经度
         time: time,
         modelGltf: "http://127.0.0.1:3003/static/car.glb"
     })
    //ws得例子
    var ws = new WebSocket("ws://127.0.0.1:3003/ws");
    ws.onmessage = function (e) {
        var data = JSON.parse(e.data)//可能有多个模型
        data.forEach(element => {
            cesiumEasy.moveCarByDegrees(element.id, {
                latitude: element.lat,//维度
                longitude: element.lng,//经度
                time: element.time,
                modelGltf: "http://127.0.0.1:3003/static/car.glb"
            })
        });
    }
    ws.onopen = function (e) {
        console.log(e)
    }
    //----------结束
    //如果你要添加点获取折现的时候必须先开启事件功能，这样可以节省资源
    cesiumEasy.handlerUse();//开启监听
    cesiumEasy.onclick = function (point) {
        cesiumEasy.addPoint(point);//添加点  如果你有了解过cemius这个是用（Entity）方式添加的
        cesiumEasy.addPrimitivePoint(point);//添加点会比上面的点速度更高，渲染更好。这个是用（PrimitiveCollection）方式添加的
        cesiumEasy.addPolyline(point);//添加折现 这个会通过两次触发来完成  同上
        cesiumEasy.addPrimitivePolyline(point)//添加折现 这个会通过两次触发来完成  会比上面的点速度更高，渲染更好  同上
    }
    cesiumEasy.onmouseMove = function(){}//鼠标移动事件
    cesiumEasy.getAllPointXY()//获取当前点在canvas窗口中的位置，包括折现的两个端点
    cesiumEasy.getAlldataDegrees()//这里会获取当前标的说有点的信息都会转换成经纬度
    cesiumEasy.removeById()//默认不传id清除选中上一次的点或者线，指定id进行删除
    cesiumEasy.removeAll()//移除全部点
    cesiumEasy.destroy()//销毁
    //isEntity是否是entity模式这种模式效果不是很好，推荐传false
    cesiumEasy.setAlldataDegrees(data,isEntity);//设置多个点显示出来，这里的data格式就是cesiumEasy.getAlldataDegrees返回的格式
}