6. 插件的应用

优质

小牛编辑

123浏览

2023-12-01

6.1. 线面绘制插件

6.1.1. 线面插件的引用

1).引用插件css文件
 <link href="Plugin/GeometryEditer/GeometryEditer.css" rel="stylesheet" type="text/css"/>
<!-- 如果想改变插件的位置修改该css文件即可 -->

2).引用插件javascript文件
 <script type="text/javascript" src="Plugin/GeometryEditer/GeometryEditerViewModel.js"></script>
 <script type="text/javascript" src="Plugin/GeometryEditer/GeometryEditer.js"></script>
 <script type="text/javascript" src="Plugin/GeometryEditer/viewerGeometryEditerMixin.js"></script>

3).将插件引入到场景中
 <!-- 在初始化球后的位置添加 -->
 <!-- viewer.extend(viewerGeometryEditerMixin); -->
 <!-- 注意：插件应用图片dragIcon.png位置需要和引用插件页面的位置对应好 -->

6.1.2. 线面插件的应用

//绘制线
var material = LSGlobe.Material.fromType(LSGlobe.Material.ColorType);
material.uniforms.color = LSGlobe.Color.fromCssColorString("rgb(0,186,255)");
viewer.geometryEditer.viewModel.defaultPolylineOptions.material = material;
viewer.geometryEditer.viewModel.defaultPolylineOptions.width = 2;
//设置绘制线样式（线的颜色和宽度）
viewer.geometryEditer.viewModel.defaultPolylineOptions.classificationType =LSGlobe.ClassificationType.BOTH;
//设置绘制线的类型 LSGlobe.ClassificationType.BOTH 即可贴地又可贴模型
//可修改 如果绘制空间线需要去掉该句
//LSGlobe.ClassificationType.TERRAIN 仅贴地
//LSGlobe.ClassificationType.CESIUM_3D_TILE 仅贴模型
viewer.geometryEditer.viewModel.setAction(EditAction.CREATE_POLYLINE);
//绘制类型EditAction.CREATE_POLYLINE 绘制线  EditAction.CREATE_POLYGON绘制面
viewer.geometryEditer.viewModel.onCreatedEvent.removeAllEventListener();
viewer.geometryEditer.viewModel.onCreatedEvent.addEventListener(function (event) {
    //绘制完成以后执行事件 返回值event.position 绘制的所有点的集合
});

//绘制面
var material = LSGlobe.Material.fromType(LSGlobe.Material.ColorType);
material.uniforms.color = LSGlobe.Color.fromCssColorString("rgba(0,186,255,0.5)");
viewer.geometryEditer.viewModel.defaultSurfaceOptions.material = material;
viewer.geometryEditer.viewModel.defaultSurfaceOptions.classificationType = LSGlobe.ClassificationType.BOTH;
//设置绘制面的类型 LSGlobe.ClassificationType.BOTH 即可贴地又可贴模型
//该属性可修改 如果绘制空间面需要去掉该句
//LSGlobe.ClassificationType.TERRAIN 仅贴地
//LSGlobe.ClassificationType.CESIUM_3D_TILE 仅贴模型
viewer.geometryEditer.viewModel.setAction(EditAction.CREATE_POLYGON);
viewer.geometryEditer.viewModel.onCreatedEvent.removeAllEventListener();
viewer.geometryEditer.viewModel.onCreatedEvent.addEventListener(function (event){
    //绘制完成以后执行事件 返回值event.position 绘制的所有点的集合
});
//重置绘制过程（即使正在绘制也将被打断）
viewer.geometryEditer.viewModel.stopDrawing();

6.2. 指北针插件

1).引用插件css文件
<link href="Plugin/Navigation/Navigation.css" rel="stylesheet" type="text/css"/>
<!-- 如果想改变插件的位置修改该css文件即可 -->

2).引用插件javascript文件
<script type="text/javascript" src="Plugin/Navigation/viewerNavigationMixin.js"></script>

3).将插件引入到场景中
viewer.extend(viewerNavigationMixin);

6.3. 量测插件

1).引用插件css文件
<link href="Plugin/Measure/Measure.css" rel="stylesheet" type="text/css"/>
<!-- 如果想改变插件的位置修改该css文件即可 -->

2).引用插件javascript文件
<script type="text/javascript" src="Plugin/Measure/viewerMeasureMixin.js"></script>

3).将插件引入到场景中
<!-- viewer.extend(viewerMeasureMixin); -->

4).插件的使用
    <!-- 空间距离测量 -->
    viewer.measureEditer.viewModel.Distance();
    <!-- 空间面积测量 -->
    viewer.measureEditer.viewModel.AreaMeasure();
    <!-- 空间高度测量(三角量测) -->
    viewer.measureEditer.viewModel.HeightMeasure();
    <!-- 坐标测量 -->
    viewer.measureEditer.viewModel.Point();
    <!-- 清空所有量测的结果 -->
    viewer.measureEditer.viewModel.ClearAll();
    <!-- 重置量测状态 -->
    viewer.measureEditer.viewModel.ResetState();

6.4. 模型编辑插件

模型编辑插件的使用主要为了在构建场景，时快速的调整模型位置，所以模型编辑插件只能对实景三维模型和人工模型有效果，其中实景三维模型和 3dTiles类型的人工模型只能进行模型的左右和上下移动，lmz格式的人工模型可以进行模型和上下左右移动，还可进行模型绕z轴旋转

1).引用插件css文件
<link href="Plugin/EditBoxGeometry/EditBoxGemetry.css" rel="stylesheet" type="text/css"/>
<!-- 如果想改变插件的位置修改该css文件即可 -->

2).引用插件javascript文件
<script type="text/javascript" src="Plugin/GeometryEditer/GeometryEditerViewModel.js"></script>

3).将插件引入到场景中
viewer.extend(viewerEditBoxGeometryMixin);

4).插件的使用
    1).添加对象
    <!-- 添加某个想要编辑对象到插件中开始编辑(对象必须是人工或实景三维模型) -->
    viewer.boxGeometryEditer.viewModel.editObject="获取到的人工或者实景三维对象";
    2).设置平移模式
    <!-- 只能上下左右平移的对象(实景三维设置该方法) -->
    viewer.boxGeometryEditer.viewModel.Move();
    <!-- 即能上下左右平移也可绕z轴旋转 -->
    viewer.boxGeometryEditer.viewModel.All();
    3).在球中拖动编辑框编辑刚刚插入的编辑对象
    4).编辑状态的保存
    <!-- lmz格式的平移结果在保存场景json的时候（viewer.toJSON()）自动保存 -->
    <!-- 3dtiles和实景三维的位置信息，保存在数据的json文件中需要调后台接口修改json文件中的position值 -->
    具体接口
    http://localhost:8080/api/server/1.0.0/update
    5).点击到编辑模型框的外面自动结束编辑状态
5).插件的常用接口
    <!-- 清空编辑状态 -->
    viewer.boxGeometryEditer.viewModel.Cancel();
    <!-- 坐标系显示隐藏 -->
    viewer.boxGeometryEditer.viewModel.CoordinateAxisShow(false/true);
    <!-- 提示文字的显示隐藏 -->
    viewer.boxGeometryEditer.viewModel.toolTip(true/false);