mapgis-3d-draw
# 属性
名称 | 类型 | 默认值 | 描述 | 是否监听 |
---|---|---|---|---|
infinite | Boolean | false | 是否允许无限绘制。true:允许无限绘制,false:不允许 | 是 |
enableControl | Boolean | false | 添加一个自带的能实现基本功能的按钮控件,可通过传入的属性 position 改变其显示的位置 | 否 |
position | String | 'top-right' | 传入的属性 position 改变其按钮控件的位置 | 否 |
clampToGround | Boolean | true | 绘制在三维图层上,是否贴地贴模型,true 则贴地贴模型。 | 是 |
drawStyle | Object | { color: '#FF0000', opacity: 1, //点的边线宽度 outlineWidth: 1, //点的边线颜色 outlineColor: '#FFA500', //线宽 width: 2 } | 绘制点、线、矩形、多边形、圆图形样式。目前不支持矩形、多边形、圆的边线样式设置。 | 否 |
vueKey | String | default | mapgis-web-scene 组件的 ID,当使用多个 mapgis-web-scene 组件时,需要指定该值,来唯一标识 mapgis-web-scene 组件, 同时 mapgis-web-scene 插槽中的组件也需要传入相同的 vueKey,让组件知道应该作用于哪一个 mapgis-web-scene。 | 否 |
vueIndex | Number | (Math.random() * 1000000).toFixed(0) | 当 mapgis-web-scene 插槽中使用了多个相同组件时,例如多个 mapgis-3d-igs-doc-layer 组件,用来区分组件的标识符。 | 否 |
# 槽
# default
- Description: Draw 的自定义槽的实现,可以自定义绘制控件样式
# 事件
# @load
- Description: 在 Draw 加载完毕后发送该事件
- Payload
{ Draw ,webGlobe }
Draw
Draw 对象webGlobe
当前绘制组件所在的 webGlobe
# @unload
- Description: 在 Draw 注销完毕后发送该事件
- Payload
{ Draw }
Draw
Draw 对象
# @drawCreate
- Description: 在 Draw 绘制图形完毕后发送该事件
- Payload
{ cartoCoordinate ,degreeCoordinate ,webGlobe}
cartoCoordinate
笛卡尔坐标集合degreeCoordinate
经纬度坐标集合webGlobe
当前绘制组件所在的 webGlobe
# @drawcreate
- Description: 使用 CDN 的方式引入,会使用全小写的方式,在 Draw 绘制图形完毕后发送该事件
- Payload
{ cartoCoordinate ,degreeCoordinate ,webGlobe}
cartoCoordinate
笛卡尔坐标集合degreeCoordinate
经纬度坐标集合webGlobe
当前绘制组件所在的 webGlobe
# 示例
# 简单使用
<template>
<div id="app">
<mapgis-web-scene>
<mapgis-3d-raster-layer
url="http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
/>
<mapgis-3d-igs-m3d
:autoReset="autoReset"
:maximumScreenSpaceError="maximumScreenSpaceError"
:url="m3dUrl"
>
</mapgis-3d-igs-m3d>
<mapgis-3d-draw
:enableControl="enableControl"
:drawStyle="drawStyle"
:clampToGround="clampToGround"
:position="position"
:infinite="infinite"
>
</mapgis-3d-draw>
</mapgis-web-scene>
</div>
</template>
<script>
export default {
name: "cesiumWmtsLayer",
data() {
return {};
},
methods: {
m3dUrl: "http://develop.smaryun.com:6163/igs/rest/g3d/DaYanTa",
autoReset: true,
maximumScreenSpaceError: 6,
enableControl: true,
position: "top-right",
drawStyle: {
color: "#FF8C00",
opacity: 0.6,
// outlineColor:'#FFA500',
// width:4,
// outlineWidth:2
},
clampToGround: true,
infinite: true,
},
};
</script>
<style>
#app {
height: 100vh;
width: 100vw;
}
#toolbar-wrapper {
position: absolute;
z-index: 9999;
display: inline-flex;
overflow-x: hidden;
overflow-y: visible;
top: 20px;
left: 20px;
}
.toolbar-item {
background: #ffffff;
border: 1px dashed #666666;
text-align: center;
font-size: 20px;
line-height: 20px;
height: fit-content;
padding: 6px 16px;
cursor: pointer;
}
</style>