cesium-plot-ms v0.1.30

更新描述

1. 新增支持移动端

配置参数

{
  "type":"drawPoint", // 标绘类型 （必须）
  "customConfig":{ } // 自定义属性
  "imgUrl":"", // 图标url
  "label":"风力风向", // 文本内容
  "labelShow":true, // 显示文本
  "pointSize":1, // 图标scale缩放
  "imageSubRegion":[68, 65, 64, 64], // 图片截取，左下x,y w,h
  "styleImg": '0', // imageSubRegion:[[],[]] 为多个情况下用到
  "double":true, // 是否双击结束
  "borderColor":"#fff", // 描边, 线条颜色; 无色请设置（transparent）
  "borderSize": 4, // 描边, 线条粗细
  "bgtwinkle":true, // 背景颜色闪烁
  "color":"#BCA00D", // 背景颜色
  "bgColor":"#7fcc7f", // 背景双线条（隔离带, 扑火队伍专用）
  "alpha":0.6, // 透明（0-1）
  "pointNum":3, // 自定义3个点位
  "style":"dashed", // 线条样式 （dashed, solid）
  "isPrimitives":true, // 是否Primitives（仅支持点、线）
  "isContinue":true, // 连续绘制，需自行移除画板：document.querySelector('.map-plot-mask')?.remove?.()

  "textColor": "#fff", // (text文本标绘) 标注颜色
  "textSize": 16, // (text文本标绘) 标注大小
  "textBgColor":"red", // (text文本标绘) 标注背景色
}

// 推荐公用属性
const defaultConfig = {
  pointSize: 1, //点位大小
  textColor: '#fff', //标注颜色
  textSize: 16, //标注大小
  style: 'solid', //样式
  color: '#BCA00D', //填充
  borderColor: 'red', //边框,线条颜色
  borderSize: 4, //粗细
  labelShow: true,
  styleImg: '0',
  alpha: 0.2,
};

调用 API

  const config = {
    color: 'red', //填充
    borderColor: 'red', //边框,线条颜色
    borderSize: 2, //粗细
    alpha: 0.7,
    type: 'circle',
    label: '圆形',
    labelShow:false,
  };
const "positions" =[
    {
        "x":-2353068.0251972564,
        "y":5397551.3207991505,
        "z":2451558.784453878
    },
    {
        "x":-2367618.9016179494,
        "y":5391319.214391388,
        "z":2451262.229097702
    }
]

开始标绘 > ♦ config: 传入参数; （必须） ♦ callback: 绘制完成后的回调; ♦ viewer: 不传默认 window.viewer

new Plot(config,callback=>{
  callback.getData() // 标绘回调数据
},viewer)

// 或自定义属性（customConfig）
let customConfig = {
  type:'drawPoint', // type (必传，请参考下方 ‘支持类型’)
  customConfig:{ // 使用自定义配置参数如
    image:'/favicon.jpg',
    with:20,
    height:30,
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    disableDepthTestDistance: Number.MAX_VALUE,
  }
}
const plot = new Plot(customConfig);

数据载入 > ♦ @params: {config, positions} (必须) ♦ viewer: 不传默认 window.viewer; ♦ parent: 可传入父实体 "window.viewer.entities.getOrCreateEntity('父实体-可有可无')" -> params: {config, positions,data:{}}

Plot.toData(params, viewer, parent);

编辑实体 > ♦@params { curData: {config, positions} } (必须) ♦ callback: 关闭后回调; ♦ curData:必传参数-当前数据; 可选参数( entity:当前实体, allData:所有数据用来删除, hide:隐藏编辑, ismove:整体移动); -> params: { curData: {config, positions}, allData, hide, ismove }

Plot.edit(params,callback=>{})
# Plot.edit({ curData:row, ismove:true  },(type, id)=>{
#   //allData：用来处理删除当前实体；或传入 callback：删除实体后回调, ismove: 启用整体移动； customClose:自定义close;
#   //hide:不显示编辑； type:close || edit 回调类型
#   if (type === 'close') plotData.value = plotData.value.filter((o) => o.config.objId != row.config.objId);
# })

删除实体 (实体 id);

Plot.clear(id);

支持类型

  drawPoint: img图标,
  circle: 圆形,
  curve: 曲线,
  brokenLine: 折线,
  polygon: 多边形,
  aggregate: 集结地,
  lineSpace 或 ranging : 测距,
  planimetry: 测面,
  drawModel: 模型,
  equilateral: 等边形,
  rect:矩形 ,
  straightArrow: 简单箭头,
  arrow: 突击箭头,
  attackArrow: 行进箭头,
  pincerArrow:合围箭头,
  drawTeamPath: 救援路径,
  flightLine: 飞机,
  flightDoubleLineAnimate:隔离带,
  text: 文本,
  pen: 笔、任意线,
  arbitrarily: 任意面,

经纬度转换

// 屏幕像素转经笛卡尔
Plot.PXToCatesian3(px)
// 笛卡尔转经纬度
Plot.cartesianToLatlng(position)
// 经纬度转笛卡尔
Cesium.Cartesian3.fromDegrees(lng, lat, alt)
// 经纬度转笛卡尔 (批量)
Cesium.Cartesian3.fromDegreesArray([lng, lat, lng, lat])

具体请查看: code -> /dist/code/

index.vue / config.js 文件

npm 切换镜像源

npm config set registry=https://registry.npmjs.org
npm config set registry=https://registry.npmmirror.com