# cesiumdraw

**Repository Path**: xupengcheng-web/cesiumdraw

## Basic Information

- **Project Name**: cesiumdraw
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-18
- **Last Updated**: 2025-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: “ChengNan” 1429323234@qq.com
 * @Date: 2023-11-18 14:02:20
 * @LastEditors: “ChengNan” 1429323234@qq.com
 * @LastEditTime: 2023-11-18 17:21:07
 * @FilePath: /cesium-draw/README.md
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
# **cesium-draw**
#### 本项目中主要技术为采用iview(view-design) + vue2 + cesiumjs
#### cesium中的3d模型采用<a href="http://www.hz-bdqn.com/">杭州职业技术学院</a>的建筑模型
#### 本项目站点网速带宽较慢，首次打开地图加载会比较慢，请耐心等待3dTitle的加载（建议把源码clone到本地，本地运行快）
#### Demo体验 <a href="http://cesiumdraw.dbans.top:9530/">点击预览</a>


#### 绘图示例（具体请看源码）
##### 点
![image](./public/images/1700297070161.jpg)
##### 线
![image](./public/images/1700297429168.jpg)
##### 面
![image](./public/images/1700297515441.jpg)

## **地图弹框组件（一个对象）**  

```javascript
// html
<Draw ref="Draw" :drawOpts="drawOpts" @getMarkerData="getMarkerData"/>

// js 导入方式
import Draw from '@/components/gis-marker/components/draw/Draw';

// props
drawOpts: {
  readonly: false, // 只读
  type: 'polygon', // 绘制类型
  position: [] // 初始数据(number)
}
     
     
// 例如绘制一个多段线
polylines() {
  this.drawOpts.type = 'polylines'
  this.drawOpts.position = [
    [120.3487115299025, 30.3225113358968,120.3484115299025, 30.3226113358968],
    [120.3487125299025, 30.3215113358968,120.3484215299025, 30.3246113358968],
  ]
  this.$refs.Draw.show()
}
// 例如绘制一个点
point() {
  this.drawOpts.type = 'point'
  this.drawOpts.position = [120.3487115299025, 30.3225113358968, 4.389172737707275]
  this.$refs.Draw.show()
},

  
  
// 显示弹框 返回的是一个promise
this.$refs.Draw.show()
// or
this.$refs.Draw.show().then(() => {
  // 打开之后的操作
})

/**
 * @description: 回调方法 返回的是经纬度数组
 * @param {Array} data
 */
getMarkerData(data) {
  console.log(data)
}
```

### Api  

组件内的`viewer`对象引用`window.$viewer`

Props

|   props     |    属性   |   说明  |    类型  |  默认值  |  
| --------- | :-----:  | :----  | :----:  | :----:  |
|  drawOpts(Object) | readonly | 只读(只读情况下不显示绘制按钮)     |  Boolean |  false |
|                   | type     | 绘制类型  |  String  |  point |
|                   |          | point 点  |  String  |   |
|                   |          | polyline 线  |  String  |   |
|                   |          | polylines 多段线  |  String  |   |
|                   |          | polylineArrow 箭头线  |  String  |   |
|                   |          | polygon 面  |  String  |   |
|                   |          | polygonEHei 立体面  |  String  |   |
|                   |          | ficationPolygon 贴建筑面  |  String  |   |
|                   |          | polylineVolumeCir 圆形线  |  String  |   |
|                   |          | wall 泛光墙  |  String  |   |
|                   |          | pipeNet 管网  |  String  |   |
|                   | position | 初始数据,经纬度组成的数组，格式为[lng,lat,lng,lat...] ,其中lng、lat 必须为Number类型 | Array | [] |

Events
|   Events     |  说明  |  返回值  |
| ---------    | :-----  |  :----:  |
| getMarkerData | 绘制完成后触发，返回经纬度数组  |  data |
|               | 返回立体面高度                |  eHei |