M-DOC

Appearance

Draw ​

加载图标点 loadMarker ​

  • @param
参数名type描述默认值
positionObject84 坐标-
myDataObject自定义的数据，在监听点击事件时根据此属性获取-
imgUrlObject图标文件，通过 require 获取-
imgSizeObject图标大小{w:40,h:40}
  • @returns
返回值type描述
pointObject返回图标点的 entity 对象。
js
let position = {
  lng: "104.706527",
  lat: "31.448707",
  height: 0,
};
let point = CM.Draw.loadMarker(position, myData, imgUrl);

加载线 loadPolyline ​

  • @param
参数名type描述默认值
positionArray线数据，世界坐标数组-
myDataObject自定义的数据，在监听点击事件时根据此属性获取-
LineStyleObject扩展样式，参考 cesium 文档 polygon 中的样式配置；使用此对象可替换或增加新的样式。-
  • @returns
返回值type描述
polylineObject返回线的 entity 对象。
js
let positionWgs84 = [
  { lng: 104.55, lat: 30.66 },
  { lng: 104.65, lat: 30.56 },
  { lng: 104.75, lat: 30.46 },
  { lng: 104.85, lat: 30.36 },
];
//84坐标转世界坐标
let cartesianArr = CM.Position.transformWGS84ArrayToCartesianArray(positionWgs84);

let polyline = CM.Draw.loadPolyline(cartesianArr, data, LineStyle);

绘制线 Polyline ​

  • @param
参数名type描述默认值
callbackFunction回调函数;返回实体和线数据(cartesian 坐标)-
measureBoolean是否是测量-
LineStyleObject扩展样式，参考 cesium 文档 polyline 中的样式配置；使用此对象可替换或增加新的样式。-
js
CM.Draw.Polyline((polyline, polylineData) => {
  console.log(polyline, polylineData);
  let wgs84Arr = CM.Position.transformCartesianArrayToWGS84Array(polylineData);
  console.log(wgs84Arr);
});

测量距离 MeasureDistance ​

  • @param
参数名type描述默认值
callbackFunction回调函数;返回距离数据-
js
CM.Draw.MeasureDistance((distance) => {});

加载面 loadPolygon ​

  • @param
参数名type描述默认值
positionArray面数据 ，世界坐标数组-
myDataObject自定义的数据，在监听点击事件时根据此属性获取-
PolygonStyleObject扩展样式，参考 cesium 文档中的样式配置；使用此对象可替换或增加新的样式。-
  • @returns
返回值type描述
polygonObject返回面的 entity 对象。
js
let positionWgs84 = [
  { lng: 104.55, lat: 30.66 },
  { lng: 106.65, lat: 31.56 },
  { lng: 107.75, lat: 32.46 },
  { lng: 108.85, lat: 33.36 },
];
//84坐标转世界坐标
let cartesianArr = CM.Position.transformWGS84ArrayToCartesianArray(positionWgs84);
let polygon = CM.Draw.loadPolygon(cartesianArr, data, PolygonStyle);

绘制面 Polygon ​

  • @param
参数名type描述默认值
callbackFunction回调函数;返回实体和面数据(cartesian 坐标)-
measureBoolean是否是测量-
PolygonStyleObject扩展样式，参考 cesium 文档中 Polygon 的样式配置；使用此对象可替换或增加新的样式。-
js
CM.Draw.Polygon((polygon, polygonData) => {
  console.log(polygon, polygonData);
  let wgs84Arr = CM.Position.transformCartesianArrayToWGS84Array(polygonData);
  console.log(wgs84Arr);
});

加载带边框的面（空心面） loadHollowPolygon ​

  • @param
参数名type描述默认值
positionArray面数据,世界坐标数组-
myDataObject自定义的数据，在监听点击事件时根据此属性获取-
LineStyleObject线的扩展样式，参考 cesium 文档中的样式配置-
GonStyleObject面扩展样式，参考 cesium 文档中的样式配置-
LabelStyleObject文本扩展样式，参考 cesium 文档中的样式配置-
  • @returns
返回值type描述
polygonObject返回面的 entity 对象。
js
let positionWgs84 = [
  { lng: 104.55, lat: 30.66 },
  { lng: 104.65, lat: 30.56 },
  { lng: 104.75, lat: 30.46 },
  { lng: 104.85, lat: 30.36 },
];
//84坐标转世界坐标
let cartesianArr = CM.Position.transformWGS84ArrayToCartesianArray(positionWgs84);

let polygon = CM.Draw.loadHollowPolygon(cartesianArr, data, LineStyle, GonStyle, LabelStyle);

绘制带边框的面（空心面） HollowPolygon ​

  • @param
参数名type描述默认值
callbackFunction回调函数;返回实体和面数据(cartesian 坐标)-
LineStyleObject线的扩展样式，参考 cesium 文档中的样式配置-
GonStyleObject面扩展样式，参考 cesium 文档中的样式配置-
LabelStyleObject文本扩展样式，参考 cesium 文档中的样式配置-
js
let LineStyle = {
  width: 3,
  material: new Cesium.Color.fromCssColorString("#fff"),
};
let GonStyle = {
  material: new Cesium.Color.fromCssColorString("#fff").withAlpha(0.5),
};
CM.Draw.HollowPolygon(
  (hollowPolygon, polygonData) => {
    console.log(hollowPolygon);
    console.log(polygonData);
  },
  LineStyle,
  GonStyle
);

加载圆 loadCicle ​

  • @param
参数名type描述默认值
ciclePositionArray圆数据-
myDataObject自定义的数据，在监听点击事件时根据此属性获取-
myDataObject自定义的数据，在监听点击事件时根据此属性获取-
CicleStyleObject扩展样式，参考 cesium 文档中的样式配置；使用此对象可替换或增加新的样式。-
  • @returns
返回值type描述
CicleObject返回圆的 entity 对象。
js
let positionWgs84 = [
  { lng: 104.69567372813435, lat: 31.450207195284513, height: 0 },
  { lng: 104.70273793520899, lat: 31.444257890981987, height: 0 },
];
//84坐标转世界坐标
let cartesianArr = CM.Position.transformWGS84ArrayToCartesianArray(positionWgs84);

let Cicle = CM.Draw.loadCicle(cartesianArr, myData);

绘制圆 Cicle ​

  • @param
参数名type描述默认值
callbackFunction回调函数;返回圆的 entity 实体对象和圆数据-
CicleStyleObject扩展样式，参考 cesium 文档中的样式配置；使用此对象可替换或增加新的样式。-
js
CM.Draw.Cicle((cicle, cicleData) => {});

加载矩形 loadRectangle ​

  • @param
参数名type描述默认值
rectanglePositionArray矩形数据 ,世界坐标数组-
myDataObject自定义的数据，在监听点击事件时根据此属性获取-
RectangleStyleObject扩展样式，参考 cesium 文档中的样式配置；使用此对象可替换或增加新的样式。-
  • @returns
返回值type描述
RectangleObject返回矩形的 entity 对象。
js
let positionWgs84 = [
  { lng: 104.6926049397171, lat: 31.449924438393886, height: 0 },
  { lng: 104.70397349861078, lat: 31.444611031898347, height: 0 },
];
//84坐标转世界坐标
let cartesianArr = CM.Position.transformWGS84ArrayToCartesianArray(positionWgs84);

let rectangle = CM.Draw.loadRectangle(cartesianArr, myData);

绘制矩形 Rectangle ​

  • @param
参数名type描述默认值
callbackFunction回调函数;返回矩形的 entity 实体对象和矩形数据(cartesian 坐标)-
RectangleStyleObject扩展样式，参考 cesium 文档中的样式配置；使用此对象可替换或增加新的样式。-
js
CM.Draw.Rectangle((rectangle, rectangleData) => {});

创建一个带材质的墙体 loadWall ​

  • @param
参数名type描述默认值
wallPositionArray带高度的经纬度数组 如：[103.56,30.2,500,104.2,31.6,500,...]-
myDataObject自定义的数据，在监听点击事件时根据此属性获取-
materialObject材质；根据 CM.Materail.createCustomMaterial 方法创建-
wallStyleObject其它一些关于 wall 的配置，参考 cesium 官方文档-
  • @returns
返回值type描述
wallEntityObject返回一个 wall 实体对象。
js
let wallPosition = [
  104.07263175401185, 30.647622150198725, 500.0, 104.06369117158526, 30.648834374000277, 500.0, 104.06437182811021,
  30.62274533905387, 500.0, 104.07463538167119, 30.62285687644371, 500.0, 104.07263175401185, 30.647622150198725, 500.0,
];
let material = CM.Material.WallTrailMaterial({
  color: new Cesium.Color.fromCssColorString(color),
  speed: 15,
  direction: -1.0, // 1.0表示从下往上，-1.0表示从上往下
});

let wallEntity = CM.Draw.loadWall(wallPosition, {}, material);

创建一个水波纹图标点 loadCircleWaveMarker ​

  • @param
参数名type描述默认值
optionsObject水波纹图标点配置，属性参考下表-
options 属性 ​
属性名type描述默认值
positionObject84 坐标-
materialObject材质；根据 CM.Materail.CircleWaveMaterial 方法创建-
ellipseStyleObject其它一些关于 ellipse 的配置，参考 cesium 官方文档{ semiMinorAxis: 2000,semiMajorAxis: 2000,}
myDataObject自定义的数据，在监听点击事件时根据此属性获取-
imgUrlObject图标文件，通过 require 获取-
imgSizeObject图标大小{w:40,h:40}
  • @returns
返回值type描述
circleWaveEntityObject返回一个 circleWave 实体对象。
js
let material = CM.Material.CircleWaveMaterial({
  color: new Cesium.Color.fromCssColorString("#41A97F"),
  speed: 12.0,
  count: 3,
  gradient: 0.2,
});

let circleWaveEntity = CM.Draw.loadCircleWaveMarker({
  position: { lng: "105.885597", lat: "32.67532" },
  material,
  // ellipseStyle: {
  //   semiMinorAxis: 2000,
  //   semiMajorAxis: 2000,
  // },
  // imgUrl:'',
  // myData:{},
  // imgSize:{ w: 40, h: 40 }
});

加载 3D 管道 loadPipeline ​

  • @param
参数名type描述默认值
positionArray矩形数据 ,世界坐标数组-
widthNumber管道宽度-
myDataObject自定义的数据，在监听点击事件时根据此属性获取-
PolylineVolumeStyleObject其它一些关于 PolylineVolume 的配置，参考 cesium 官方文档-
  • @returns
返回值type描述
pipelineObject返回矩形的 entity 对象。

注意

  1. 如果使用自定义图片着色器材质，需要对坐标进行插值处理，否则在一段管道中如果每一段的长度不一样，则管道的材质将无法正常显示！
  2. 注意插值精度越小性能消耗越大；具体参考 CM.BaseFn.coordinateInterpolation 方法！
  3. 如果希望插值设置更大避免性能消耗又想要更好的效果，可以对自定义图片的尺寸做处理，尽量加大图片尺寸和长度！
js
let wgs_84Arr = [
  {
    lng: 111.17831238175873,
    lat: 24.495787476202803,
    height: 0,
  },
  {
    lng: 111.1784,
    lat: 24.4968,
    height: 0,
  },
  {
    lng: 111.2018438418352,
    lat: 24.501776466940694,
    height: 0,
  },
  {
    lng: 111.20228120412749,
    lat: 24.5028655488217,
    height: 0,
  },
];

// let cartesian = CM.Position.transformWGS84ArrayToCartesianArray(wgs_84Arr);
// //如果不使用自定义图片着色器材质只需要传入三维坐标即可，性能更优！
// const pipeline = CM.Draw.loadPipeline(cartesian, 10, {});

let cartesian = await CM.BaseFn.coordinateInterpolation(wgs_84Arr, 200);
const pipeline = CM.Draw.loadPipeline(
  cartesian,
  15,
  {},
  {
    material: new CM.Material.PipelineflowMaterialProperty({
      color: Cesium.Color.fromCssColorString("#6AE7FF"),
      speed: 1, // 速度
      image: img,
      repeat: { x: 10, y: 2 },
      direction: -1,
    }),
  }
);

编辑 entity(线、面)对象 startEditEntity ​

  • @param
参数名type描述默认值
entityObjectentity 对象-
callbackArray回调函数，每次拖动一个点后鼠标弹起触发，返回一个坐标数组-
js
CM.Draw.startEditEntity(entity, (positions) => {
  console.log(positions);
});

停止编辑 entity 对象 ​

  • @param
参数名type描述默认值
callbackArray回调函数，返回当前编辑的 entity 对象-
js
CM.Draw.stopEditEntity((res) => {
  console.log(res);
});

测量面积 MeasureArea ​

  • @param

    参数名type描述默认值
    callbackFunction返回面积数据-
    js
    CM.Draw.MeasureArea((area) => {});