使用
全局引入 在main.js文件中
import cooglComps,{methods,globalData} from 'coogl-comps'
import 'coogl-comps/es/style.css'
(
async () => {
// 登陆server
const res = await login('admin','123456')
// 设置获取到token,如果不设置默认获取localStorage.getItem('token')
globalData.token = res.data.data.access_token
const app = createApp(App)
app.use(cooglComps)
app.mount('#app')
}
)()
vite.config.js中配置
'/cooglComps/api': {
target: 'http://192.168.10.202:8088',
changeOrigin: true, // true，启用跨域
rewrite: (path) => path.replace(/^\/cooglComps\/api/, '/coogl/api')
},
'/cooglCompsStatic': {
target: 'http://192.168.10.202:8891',
changeOrigin: true, // true，启用跨域
rewrite: (path) => path.replace(/^\/cooglCompsStatic/, '')
},
单个引入
<template>
<gl-viewMark/>
</template>
<script setup>
import {GlViewMark} from 'coogl-comps'
按需引入
import {GlViewMark,GlMeasure,globalData} from 'coogl-comps'
import 'coogl-comps/es/style.css'
(
async () => {
// 登陆server
const res = await login('admin','123456')
// 设置获取到token,如果不设置默认获取localStorage.getItem('token')
globalData.token = res.data.data.access_token
const app = createApp(App)
app.use(GlViewMark)
app.use(GlMeasure)
app.mount('#app')
}
)()
</script>
组件简介
<gl-viewMark/> 视角书签
<gl-measure/> 量算
<gl-layer-cache/> 图层
<gl-sceneEffects/> 场景特效
<gl-roam/> 巡更漫游
<gl-keyBoardRoam/> 键盘漫游
<gl-hlsVideo/> hls视频
<gl-skyBox/> 天空盒配置
<gl-camera/> 相机配置
<gl-ground/> 地面配置
// 绘制组件
<gl-graphic-collection/> 所有绘制的要素的列表
<gl-pointGraphic/> 颜色点
<gl-imageGraphic/> 图片点
<gl-polylineGraphic/> 线
<gl-modelGraphic/> 模型
<gl-parabolalineGraphic/> 飞线,抛物线
<gl-pipelineResourceGraphic/> 管线
globalData
import {globalData} from 'coogl-comps'
globalData是一个全局的js文件，一些全局变量以及方法都放在这里
// globalData.token
接口请求头会带上这个token，优先使用这个如果没有的话会去找localStorage.getItem('token')
// globalData.mapOnMounted(() => {}) //
传入回调函数，回调函数在地图加载完成后执行
// globalData.staticPath
静态资源的路径,默认:/cooglCompsStatic
// globalData.vueMount()
地图销毁重新挂载需要重新加载一遍这个方法否则编辑功能和冒泡弹窗会失效
// globalData.scene
环境组件的配置项，可以在这边初始化配置项或者组件中改变了之后再这里获取
camera: {// 相机配置对应组件<gl-camera/>
maximumZoomDistance: 200000,
minimumZoomDistance: 0,
duration: 0,
destination: {
"x": 120.00000000000001,
"y": 29.999999999999993,
"z": 200.00000000000648
},
orientation: {
"heading": 6.018579811005977,
"pitch": -0.7000000000000002,
"roll": 6.283181982133159
}
},
skyBox: {天空盒配置对应组件<gl-skyBox/>
// 判断是否初始化了防止重复加载
isInit: false,
// 是否显示天空盒
isShowSkyBox: true,
// 是否显示大气层
isShowSkyAtmosphere: false,
source: {
name: '',
path: '',
image: ''
},
},
ground: {// 地面配置，对应组件<gl-ground/>
// 地球透明
earthTransparency: false,
type: 'image',
show: true,
position: {
"x": 119.999149,
"y": 30.00249,
"z": 2
},
size: { x:100,y:100,z:1 },
imageScale: { x:100,y:100 },
image: "/cooglCompsStatic/ground/grid.png",
dynamicGrid: false,
color: '#ffffff'
},
groundInstance: null,// 地面组件的实例
methods: {
skyBoxInit,// 根据配置直接初始化天空盒
groundInit,// 根据配置初始化地面
cameraInit,// 根据配置初始化相机，这边只进行限高限低
getCameraView
}
// globalData.graphicConfig
绘制类的配置
globalData.graphicConfig.editor.enabled true可编辑 false不可编辑
// globalData.graphics
通过绘制类添加的所有graphic的实例
// globalData.graphicsParameters
通过绘制类添加的所有graphic的参数
// globalData.graphicMethods
绘制类相关方法
closeContextMenu() // 关闭右键标注打开的菜单
showEditDialogByid(id) // 根据graphics的id打开编辑弹窗
closeEditDialog() // 关闭编辑弹窗
editGraphicByid(id) // 右键菜单中的编辑按钮的方法，showEditDialogByid只能打开编辑弹窗，这个还会出现坐标轴移动线。
这个方法中调用了一次showEditDialogByid
removeAllGraphic() // 移除所有标注，并且清空globalData.graphicsParameters和globalData.graphics
addByGraphicParameters(parameters) // 根据参数创建标注
//用法 根据globalData.graphicsParameters创建所有
Object.keys(globalData.graphicsParameters).forEach(id => {
globalData.graphicMethods.addByGraphicParameters(globalData.graphicsParameters[id])
})
// globalData.events
事件监听
事件类型：
graphicAdd // 添加要素（绘制不触发，只有直接通过add方法触发） 回调值{type,id,params}
graphicDrawStart // 开始绘制 回调值{type,id}
graphicDrawEnd // 绘制结束 回调值{type,id,params}
graphicDelete // 删除 回调值{id,params}
graphicEditStart // 开始编辑 回调值{id,params}
graphicEditEnd // 结束编辑 回调值{id,params}
使用示例：
const graphicDrawEndFn = ({type,id,params}) => {
console.log({type,id,params})
}
globalData.events.addEventListener('graphicDrawEnd',graphicDrawEndFn) // 绑定
globalData.events.removeEventListener('graphicDrawEnd',graphicDrawEndFn) // 移除监听
// globalData.graphicMethods.graphicFn
绘制类组件的方法集合，如果组件样式不符合要求，又需要编辑这种功能，就用这里的方法
具体看graphicFn
graphicFn
graphicFn = globalData.graphicMethods.graphicFn
----------<gl-imageGraphic/> 图片点-------------------
// 绘制功能
graphicFn.imageObj.draw({
name: '',
path: '',
image: '',// 图片路径，必填
})
// 根据参数直接添加
const parmas = {
id, // 不写默认生成一个uuid，不能乱写需要符合规则
image,// 图片路径，必填
position, // 经纬度，必填 {x,y,z}
scale, // 缩放,默认1
pixelOffset, // 像素偏移，默认{x: 0,y: 0}
}
graphicFn.imageObj.add(parmas)
// 返回一个符合规则的id
graphicFn.imageObj.getId()
--------------<gl-polylineGraphic/> 线---------------------
// 返回一个符合规则的id
graphicFn.polylineObj.getId()
// 绘制
// fullLine 实线
// dottedLine 虚线
// arrowLine 箭头线
// ldwlLine 流动纹理线
// flowLine 流动图片线
graphicFn.polylineObj.draw({type: 'fullLine'})
// 添加
params不细说了，先画一个调整好样式后再复制
graphicFn.polylineObj.add(params)
常规组件
import {list} from 'coogl-comps'
// 常规组件的graphicList导出的内容如下
export default [
{
name: '视角书签',
value: 'GlViewMark',
width: '330px',
height: '731px',
remark: '保存想要的视角，点击可飞行到对应视角',
fitLayout: true
},
{
name: '量算',
value: 'GlMeasure',
width: '320px',
height: '260px',
remark: '空间距离，水平长度，水平面积等',
fitLayout: true
},
{
name: '图层',
value: 'GlLayer',
width: '320px',
height: '500px',
remark: ''
},
{
name: '场景特效',
value: 'GlSceneEffects',
width: '320px',
height: '135px',
remark: ''
},
{
name: '漫游',
value: 'GlRoam',
width: '330px',
height: '500px',
remark: '',
fitLayout: true
},
{
name: '键盘漫游',
value: 'GlKeyBoardRoam',
width: '330px',
height: '220px',
remark: ''
},
{
name: '天空盒',
value: 'GlSkyBox',
width: '330px',
height: '350px',
remark: ''
},
{
name: 'hls视频',
value: 'GlHlsVideo',
width: '400px',
height: '300px',
remark: '',
fitLayout: false,
props: {
height: {
type: Number,
default: 300,
},
width: {
type: Number,
default: 400,
},
src: {
type: String,
default: '',
},
errorMsg: {
type: String,
default: '无法播放该视频',
},
}
},
]
绘制类组件
import {graphicList} from 'coogl-comps'
// 绘制类组件的graphicList导出的内容如下
export default [
{
name: '颜色点',
value: 'GlPointGraphic',
width: '330px',
height: '500px',
remark: '',
fitLayout: true
},
{
name: '图片点',
value: 'GlImageGraphic',
width: '330px',
height: '500px',
remark: '',
fitLayout: true
},
{
name: '线',
value: 'GlPolylineGraphic',
width: '330px',
height: '500px',
remark: '',
fitLayout: true
},
{
name: '模型',
value: 'GlModelGraphic',
width: '330px',
height: '500px',
remark: '',
fitLayout: true
},
// {
// name: '多边形类',
// value: 'GlPolygonClassGraphic',
// width: '330px',
// height: '500px',
// remark: '',
// fitLayout: true
// },
{
name: '飞线',
value: 'GlParabolalineGraphic',
width: '330px',
height: '500px',
remark: '',
fitLayout: true
},
]
方法
import {methods} from "coogl-comps"
/**
* @introduction getDefaultView
* @description 获取视角书签的默认视角信息
* @param view 传入默认视角如果接口报错或者视角书签无默认视角将返回此信息
* @return Promise
* @exception [违例类型] [违例类型说明]
*/
const fly = async () => {
const view = {
duration: 3,
destination: {
x: 120.23232402209334, y: 30.208011417829738, z: 323.83645753741826
},
orientation: {
heading: 6.018579811005977, pitch: -0.48414120691573004, roll: 6.283181982133159
},
}
const defaultView = await methods.getDefaultView(view)
}
版本
0.0.43 2024-01-18
管线图片可替换
0.0.42 2024-01-11
部分绘制类可以添加文本
0.0.41 2024-01-06
水柱粒子回显bug
0.0.40 2024-01-06
解决粒子效果回显的bug
0.0.39 2024-01-04
优化editEnd事件逻辑，新增roam绘制的drawEnd事件
0.0.38 2023-12-26
模型加载方式修改为gltf，可以修改亮度。新增了组件GlRoamGraphic
0.0.36 2023-12-04
管线的一些bug修改，可以修改流动速度，单个箭头距离。<gl-pipelineResourceGraphic/>可以传入默认参数
0.0.35 2023-11-29
管线的一些bug修改，并且可以修改半径
0.0.34 2023-11-28
新增管线功能
0.0.33 2023-11-25
接口获取视频流
0.0.31 2023-11-25
修改弹窗默认视频hls流
0.0.28 2023-11-25
冒泡弹窗可配置视频
0.0.27 2023-11-23
添加z字型，7字型连接线
0.0.26 2023-11-09
重写图层组件GlLayerCache,增加监听事件
0.0.25 2023-11-01
md文件新增globalData的注释
0.0.24 2023-11-01
0.0.23上传的包缺少一部分
0.0.23 2023-11-01
新增GlCamera，GlGround
0.0.22 2023-10-27
暴露了一些绘制类方法,修改绘制类bug
0.0.21 2023-10-25
提示信息偏移问题修改，编辑框可以拖动
0.0.20 2023-10-25
修复上一版的bug
0.0.19 2023-10-25
优化bindRightClickEvent方法 优化编辑ui 添加popup冒泡
0.0.18 2023-10-18
新增方法 globalData.graphicMethods.bindRightClickEvent(给标注绑定右键事件)
新增方法 globalData.graphicMethods.removeRightClickEvent(解除标注绑定右键事件)
0.0.17 2023-10-18
新增 GlPointGraphic(颜色点绘制)
漫游组件模型获取从路径为/graphic/model/roam.json，新增选项自由视角
0.0.16
新增绘制类 GlModelGraphic(模型绘制) GlParabolalineGraphic(飞线绘制)
0.0.15
新增绘制类组件 GlImageGraphic GlPolylineGraphic
新增常规组件 GlSkyBox 天空盒
0.0.14
新增组件 GlHlsVideo
0.0.13
暴露全局变量globalData
优化methods.getDefaultView方法，防止接口报错导致阻塞
0.0.12
glRoam组件 加入暂停功能
0.0.10
glRoam组件 新增props modelList