xt-cs-map v1.0.28

打包命令介绍

"package": "vue-cli-service build --target lib ./src/package/index.js --name xt-cs-map --dest xt-cs-map" 打包命令解释: ●--target lib关键字指定打包的目录 ●--name 打包后的文件名字 ●--dest 打包后的文件夹的名称.

此项目为cesium的2次封装，解决使用困难问题。

API文档介绍

Entity:枚举类型**

一、项目中组件使用

//cs-base-map插件使用
<mpas ref="csMap" @titeLoadStateBack="titeLoadStateFun" @projectGetFeature="mouseHand" @useToolCallBack="useToolCallBack" :mapTypeData="mapTypeData" :projectData="initBaseMapObj"></mpas>
//项目中的移入移出、点击弹框，自己写的组件和插件无关
<popup-ck id="popupCk" ref="popupCkDom"></popup-ck>
<popup-hv id="popupHv" ref="popupHvDom"></popup-hv>

1、initBaseMapObj初始化组件内部参数

export const initBaseMapObj={
    extent:undefined,
    tdtToken:"",//天地图token
    cstToken:"",//cesiumToken
    initTdtKey:"wx",//初始化加载地图，wx：卫星、dz：电子、dx：地形
    workArea:"",//geo工作区
    loadTerrain:false,//是否加载地形，默认true加载，false：不加载
    depth:false,//是否启用地形深度监测，默认true启用，false：不启用
    allLayersSty:mapTempSty,//下面介绍，每个图层样式，
    isNotSearchGeoLayer:["swStation","bzStation","qxStation"],//搜索的geoServer时会去过滤掉的图层
    isNotCkLayer:["stroke0001","stroke0002"],//不需要触发点击事件的图层
    isNotHvLayer:["stroke0001","stroke0002"],//不需要触发移入事件的图层
    initMapType:3,//默认加载3d地球
}
//配置所有加载的图层规范
mapTempSty=[
    reservoir:{"label":"水库","layerName":"reservoir","zIdx":1,"val":"alt:reservoir","col":"#6495ED",icon:require("@/package/csBaseMap/assets/images/gisImg/sk.png"),type:3,material:"prmPolygonWater"},
rivers:{"label":"河流","layerName":"rivers","zIdx":1,"wid":7,"val":"alt:rivers","col":"#6495ED",material:"prmPolylineWater"},
sluice:{"label":"水闸","layerName":"sluice","zIdx":1,"wid":2,"val":"alt:sluice","icon":require("@/package/csBaseMap/assets/images/gisImg/sz.png"),type:1},
main_canal_all:{"label":"总干渠","layerName":"main_canal_all","zIdx":1,"wid":6,"val":"alt:main_canal_all","col":"#99C895",material:"entPolylineLiu"},
main_canal:{"label":"干渠","layerName":"main_canal","zIdx":1,"wid":6,"val":"alt:main_canal","col":"#99C895",type:2},
douqu:{"label":"斗渠","layerName":"douqu","zIdx":1,"wid":6,"val":"alt:main_canal","col":"#6495ED",type:2},
]

介绍每个参数

(必填)键：geoServer配置图层，例如reservoir、sluice、rivers,

值：

(必填)label：当前图层的名称，例如：水库、河流

(必填)layerName：区分每个图层的图层名，和geoServe配置图层一样。例如reservoir、sluice、rivers,

(必填)zIdx：图层层级

(必填)val：工作区:图层名，例如alt:reservoir

col：图层要素的颜色，例如 #6495ED

icon：当前图层需要加载图标，例如require("@/package/csBaseMap/assets/images/gisImg/sk.png")

(必填)type：当前图层的类型，1：点，2：线、3面

material：当前图层的材质，（目前因业务只有这么多，后续可新增）添加此字段全是primitive贴地类

1. prmPolygonWater（贴地面—水利）
2. prmPolylineWater（贴地线—水流）
3. entPolylineLiu（贴地线—流动）
4. drawPrmPolygon（贴地面）
5. drawPrmPolyline（贴地线）

2、@projectGetFeature鼠标移入、点击返回数据

	/**
     * 鼠标点击、移入获取entity或者primitive参数
     * @param value 返回参数
     * @param xy 笛卡尔2屏幕坐标
     * @param type 来源，默认会有ck、hv，其他的是项目业务调用返回
     */
    const mouseHand=({value,xy,type})=>{
        if(type=='ck'){
            console.log({value,xy,type});
            //点击弹出当前tips
            popupCkDom.value.setParams({data:value,br:true});
        }else if(type=='ckRightList'){
            console.log({value,xy,type});
            //点击定位倒当前点位
            csMapDom.value.locationEntity({jw:[value.longitude,value.latitude],callBack:()=>{
                 //定位结束后弹出当前tips
                 popupCkDom.value.setParams({data:value,br:true});
             }})
        }else {
            //鼠标移入后提出tips
            popupHvDom.value.setParams({data:value,br:true});
        }
    }

3、ref方式可获取当前组件暴露出来的方法，对数据的增删改查等操作

4、@useToolCallBack调用工具的回调，例如测量工具

//测量完成后需要操作一些项目的业务
const useToolCallBack=(e)=>{
    navControlDom.value.toolClsId=null;
}

5、mapTypeData，地图需要切换2d和3d下有不同的倾斜操作，需要配置此功能

//切换2d和3d地图参数
let jwh2d={j:88.14,w:47.395,h:50000};
let jwh3d={j:88.14,w:47.395,h:8000};
export const mapTypeData={
    map2d: {//在2d时
        jwh: jwh2d,//默认经纬高
        switchMap: {//在切换角度时不同地图类型的经纬高
            ...jwh2d,
            h: {
                "wx": 50000,
                "dx": 50000,
                "dz": 50000,
            },
        }
    },
    map3d: {//在3d时
        jwh:jwh3d,//默认经纬高
        switchMap: {//在切换角度时不同地图类型的经纬高
            ...jwh3d,
            h: {
                "wx": 8000,
                "dx": 25000,
                "dz": 25000,
            },
        }
    }
};

6、@titeLoadStateBack监听瓦片首次加载完毕，采用emit方式

二、组件暴露出来方法

1、地图常用工具类

const {getCameraLocat,getCartesian2ByCartesian3,getCar3CenterByEntity,getPolygonCenterByJwArr,getPolyLineCenterArrByCar3,getPolygonCenterArrByCar3,getCartesian2ByJw,getCartesian3ByCartesian2,getCartesian3ByJwh, getCartesian3ByJw,getJwhByCartesian2,getJwHByCartesian3,}=useCesiumUtils();

方法1：切换任意视角时，pitch时需要计算偏移距离ws\hs

/**
     * 切换任意视角时，pitch时需要计算偏移距离ws\hs
     * 经度（东西方向）1米实际度：360°/31544206m = 1.141255544679108e-5 = 0.00001141°
     * 纬度（南北方向）1米实际度：360°/40030173m = 8.993216192195822e-6 = 0.00000899°
     * @param h
     * @param pitch
     * @returns {{h: (*|number), ws: number}}
     */
getCameraLocat=({h,pitch});

参数pointArray：一维数组集合，例如： jw , jw , jw;

方法2：根据笛卡尔3获取笛卡尔2屏幕坐标

 /**
     * 根据笛卡尔3获取笛卡尔2屏幕坐标
     * @param car3
     * @returns {Cartesian2}
     */
    getCartesian2ByCartesian3(car3);

方法3：根据entity获取中间点

/**
     * 根据entity获取中间点
     * @param entity
     * @returns {string|Cartesian3|*}
     */
    getCar3CenterByEntity(entity);

方法4：根据笛卡尔3数组获取中心点-面

/**
     * 根据笛卡尔3数组获取中心点[jw]-面
     * @param car3Arr 笛卡尔3数组
     * @returns [j,w]
     */
    getPolygonCenterByJwArr(car3Arr)

方法5：根据笛卡尔3数组获取中心点-线

 /**
     * 根据笛卡尔3数组获取中心点-线
     * @param car3Arr 笛卡尔3数组
     * @returns Cartesian3
     */
    getPolyLineCenterArrByCar3(car3Arr)

方法6：根据笛卡尔3数组获取中心点-面

/**
     * 根据笛卡尔3数组获取中心点-面
     * @param car3Arr 笛卡尔3数组
     * @returns Cartesian3
     */
    getPolygonCenterArrByCar3(car3Arr);

方法7：根据经纬度获取笛卡尔2坐标系

 /**
     * 根据经纬度获取笛卡尔2坐标系
     * @param jw数组 
     * @returns {Cartesian2}
     */
    getCartesian2ByJw(jw);

方法8：根据笛卡尔2坐标获取笛卡尔3

  /**
     * 根据笛卡尔2坐标获取笛卡尔3
     * @param x 笛卡尔2的x
     * @param y 笛卡尔2的y
     * @returns {Cartesian3}
     */
    getCartesian3ByCartesian2(x,y);

方法9： 根据经纬高数组获取笛卡尔3坐标系

  /**
     * 根据经纬高数组获取笛卡尔3坐标系
     * @param jwh [j,w,h]
     * @returns Cartesian3
     */
    getCartesian3ByJwh(jwh);

方法10： 根据笛卡尔2获取jwh——点击的let pick = data.map.scene.pick(res.position);坐标获取经、纬、高、度

 /**
     * 根据笛卡尔2坐标获取经、纬、高、度
     * @param x 笛卡尔2的x
     * @param y 笛卡尔2的y
     * @returns {{w: number, h: (number|number), j: number}}
     */
    getJwhByCartesian2(x,y);

方法11： 根据笛卡尔3获取jwh

/**
     * 笛卡尔3获取jwh
     * @param position 笛卡尔3
     * @returns {{w: number, h: (number|number), j: number}}
     */
    getJwHByCartesian3(position);

方法12：根据高度计算缩放级别

  /**
     * 根据高度计算缩放级别
     * @param altitude 相机相对地面高度
     */
 const heightToZoom=(altitude);

方法13：根据经纬度数组获取当前范围或者点的高程

/**
     * 根据经纬度数组获取当前范围或者点的高程
     * @param jwArr
     * @returns {Promise<unknown>} 高程数组
     */
 const getHByJwArr(jwArr);

2、获取地图实例

getMapEntity();//返回当前地图map实例。

3、初始化地图缩放-会根据不同的地图类型和底图类型自动倾斜和计算偏移比例

initMapLocation();

4、生成UUID

getUuid()

5、相机根据指定点位巡航

//一下参数存在的就是默认值
cameraPatrol=({start=true,showLine=true,patrol=[],carmeH=2500,speed=1300,color="#00ff064d"});
start:是否开始巡航
showLine:是否打显示巡航路线
patrol:巡航路线数组[{jwh:[88.194,47.343,1500]},{jwh:[88.194,47.343,1500]}]
carmeH:摄像机高度
speed:巡航速度，越小越快
color:巡航路线颜色

6、根据某个点旋转巡航

//配置旋转参数
initRotateConf=({center,pitch,range,pix})
center：[108.959122, 34.219873]，旋转中心点
pitch：倾斜角度
range：旋转范围
pix：旋转速度
//开始旋转
centRotateFun(bool);
boole：是否开始旋转

7、设置地图配置参数

setMapParams(t);
t:非必传，当为漫游时需要传递”manyou“

8、设置地图弹框dom

initMapDom=({popupHv,popupCk});
popupHv鼠标移入的refdom;
popupCk鼠标点击的refdom;

9、设置地图弹框dom

initMapDom=({popupHv,popupCk});
popupHv鼠标移入的refdom;
popupCk鼠标点击的refdom;

10、设置地图弹框dom

initMapDom=({popupHv,popupCk});
popupHv鼠标移入的refdom;
popupCk鼠标点击的refdom;

11、绘制图形

drawOperation("open");//开启绘制
drawOperation("close");//结束绘制
//绘制类型，0：自由绘制，1：绘制点，2：绘制线，3：绘制多边形，4：绘制圆，5：绘制矩形，6：编辑图层，7：删除指定图层，8：清除图层，9：标注

12、切换地图2d和3d

switchEarthFun(type);
type：2、3

13、设置热力图

//初始化热力图
initHeatMap({bounds,radius=35});
let bounds = {
    west: 87.0,//最小y
    east: 90.3,//最大y
    south: 46.83,//最小x
    north: 48,//最大x
  };
//设置经纬度
setHeatMapData({data});
let  d = [
    {"x":88.0706,"y":47.3893,"value":56},
    {"x":88.1206,"y":47.3893,"value":56},
    {"x":88.1705,"y":47.3883,"value":100},
    {"x":88.24057,"y":47.3883,"value":50},
    {"x":88.1699,"y":47.3205,"value":40},
    {"x":88.1165,"y":47.3228,"value":40},
    {"x":88.0706,"y":47.3893,"value":70},
 ];

14、geoServer图层加载wms/wfs

//加载geoServer的wms服务，
//返回图层layer，后续删除使用。
addGeoWmsLayer=({layerName,area=projectParams.conf.workArea,layerIdx:layerIdx})
layerName：地图服务器上存在的图层
area：地图服务器上存在工作区
layerIdx:图层的顺序zindex
//加载geoServer的wfs服务
//返回entity或者primitive数组，后续删除使用
addGeoLayer({layerName:"mainCanal"});
layerName：initBaseMapObj的allLayersSty下的图层名参数

15、获取geoServer服务器的Feature数据

let d={
    layerVal:layerName,//图层要素
    cql_filter:`(name like '%${name}%' or code like '%${name}%')${irr_code?` and irr_code = '${irr_code}'`:''}`,//cql语句
}
//返回Feature数组
let features=await olMapDom.value.getGeoFeatures(d);

16、请求geoServer服务

getGeoFeatures({params,layerVal,cql_filter});
params:请求携带参数
layerVal：工作区:图层，非必传，不传递查询所有的图层全部
cql_filter：`irr_code%20like%27${code}%27`;

17、将features转换为entities,例如请求回到geoServer服务的数据后是Features类型，cesium操作需要entity

getEntityByFeatures({features});

18、搜索指定entity

searchEntity({entities,state=false});
entities:需要搜索的所有entity。
state：是否需要定位

19、添加地图事件

addMapEvent({eventArr});
//事件key数组
eventArr:["leftClick","postRender","measure","mouseMove"];
leftClick:左键点击
postRender：监听只求帧
measure：测量工具
mouseMove：鼠标移动

20、使用地球测量工具

useMapTool(type);//测量=1：面，2：线，3：三位，null:取消测量

21、切换地球底图

switchMapFun(key);//wx、dx、dz

22、操作entity的显示隐藏

/**
* 操作entity的显示隐藏
* @param idArr 需要隐藏的entity的id
* @param entityTypeArr 需要隐藏entity的枚举类型
* @param bool 是否显示
*/
operationEntities({idArr,entityTypeArr,bool})

23、清除指定entity

/**
* 删除指定的entity
* @param entityList [id,entity,"id"]
*/
clearEntity(entityList);

24、删除指定图层

/**
 * 删除指定图层
 * @param layer 当前图层对象
 * @param layerIdx 当前图层下标
 */
const clearLayer=({layer,layerIdx})=>{
    if(layerIdx!==undefined){
        layer=maps.imageryLayers.get(layerIdx);
    }
    maps.imageryLayers.remove(layer);
}

24、添加本地geoJson，默认在本地的/static/layers/下面

/**
     * 添加本地GeoJson
     * @param layer 文件名字
     * @param type  渲染的类型，1：点，2线，3面，4图标
     * @returns {Promise<void>}
     */
addLocGeoJson = async (layer, type,path='/static/layers/')

25、加载geo得wfs数据渲染图层-主要方法

/**
     * 加载geo的wfs数据渲染图层-同样得layername,第一次调用添加，第二次调用移除
     * 此layerName对应着initBaseMapObj下的mapTempSty
     * @param layerName 图层名称
     * @returns {Promise<void>}
     */
const addGeoWfsLayer=async({layerName});

25、初始化地图参数配置

//大气、地形、亮度。。。。。。。。。
initMapConfig();

26、初始化加载图层

//会根据initTdtKey加载对应的底图
initMapLayer();

27、绘制贴地图——primitive方式

/**
     * 绘制贴地——面，水库、河流
     * @param jwh 数组
     * @param id 
     * @param data
     * @param isCar3
     * @returns {any} primitive
     */
drawPrmPolygonWater=({ jwh, id, data ,isCar3});
 /**
     * 绘制贴地——线-河流，
     * @param jwh
     * @param id
     * @param data
     * @param color
     * @param isCar3
     * @returns {any} primitive
     */
drawPrmPolylineWater=({ jwh, id, data ,wid=10,isCar3})
/**
     * 绘制贴地面-面，
     * @param jwh
     * @param id
     * @param data
     * @param color
     * @param isCar3
     * @returns {any} primitive
     */
drawPrmPolylineWater=({jwh, id, data ,color="#0b79ee80",isCar3})
/**
     * 绘制贴地线-线，
     * @param jwh
     * @param id
     * @param data
     * @param color
     * @param isCar3
     * @returns {any} primitive
     */
drawPrmPolylineWater=({jwh, id, data ,color="#0b79ee",wid=10,isCar3})

28、绘制entity图层——entity方式

/**
     * 绘制线
     * @param jwh 经纬高
     * @param id 当前entity的id
     * @param color 颜色
     * @param data 数据，对应点击后会返回的数据
     * @param isCar3
     * @returns {*} entity
     */
    drawPolyLine ({ jwh, id, color="#FF0000", data ,isCar3,wid=3,clampToGround=true});
/**
     * 绘制面
     * @param jwh 经纬数组
     * @param id 当前entity的id
     * @param color 颜色
     * @param data 数据，对应点击后会返回的数据
     * @returns {*} entity
     */
    drawPolygon({ jwh, id, color="#FF0000", data ,isCar3});
/**
     * 绘制点
     * @param jwh 经纬高
     * @param id 当前entity的id
     * @param color 颜色
     * @param data 数据，对应点击后会返回的数据
     * @param state true:绘制点，false：用来将feature转换成普通的entity使用
 	 * @param isCar3
     * @returns {*} entity
     */
    drawPoint ({ jwh, id, color="#FF0000", data ,state=true,isCar3});
/**
     * 绘制文字
     * @param jwh 经纬高
     * @param id 当前entity的id
     * @param color 颜色
     * @param data 数据，对应点击后会返回的数据
     * @param txt 文字描述
     * @param isCar3
     * @returns {*} entity
     */
    drawText({ jwh, id, color="#FF0000", txt, data ,size=12,isCar3});
/**
     * 绘制图标
     * @param jwh 经纬高
     * @param id 当前entity的id
     * @param imag {icon:'',width:'',height:''};
     * @param data 数据，对应点击后会返回的数据
     * @param isCar3
     * @param size
     * @returns {*} entity
     */
    drawBillboard ({ jwh, id, imag, data,isCar3 })
/**
     * 绘制图标和文字
     * @param jwh 经纬高
     * @param id 当前entity的id
     * @param imag {icon:'',width:'',height:''};
     * @param data 数据，对应点击后会返回的数据
     * @param txt 文字
     * @param color 文字颜色
     * @param isCar3
     * @returns {*} entity
     */
    drawBillboardAndTxt ({ jwh, id, imag, data ,txt,color="#FF0000",isCar3})
/**
     * 绘制点位和点位
     * @param jwh 经纬高
     * @param id 当前entity的id
     * @param color 颜色
     * @param data 数据，对应点击后会返回的数据
     * @param isCar3
     * @param txt 文字描述
     * @returns {*}
     */
    drawTextAndPoint({ jwh, id, color="#FF0000", txt, data,isCar3})
/**
 * 绘制闪烁圆点
 * @param jwh
 * @param id
 * @param color
 * @param data
 * @param isCar3
 * @param ellipseConf 其他配置-默认entity配置
 * @param materialConf 材质配置-当前闪烁速度、透明、圈数量
 * @param RConf 圆配置，大小，频率 {maxL:13.3,minL:9.5,maxR:2300,minR:120,maxS:300,minS:20)
 * @returns {*}
 */
export const drawAnmEllipse=({jwh, id,color="#FF0000", data ,isCar3,ellipseConf={},materialConf={slide:3000,grad:0.5,count:1},RConf={}})

29、 主项目使用js动态打开弹框时需要调用的方法

/**
     * js动态打开弹框时需要调用的方法，此方法主要是为了获取当前点位的真实高程，然后将j、w、h转换为当前点位的真实Cartesian3坐标系,然后给postRender监控帧率的方法提供使用。简单来说就是主项目使用js动态打开弹框时必须需要调用的方法，更新点位真实的Cartesian3坐标系。
     * @param car3
     * @param entityId
     * @param isFilter 是否需要模糊匹配id
     */
const setCkPopupPosition=({car3,entityId,isFilter=false});

30、修改地图底色

 /**
     * 修改地图底图颜色-目前只有黑褐色，后续会作为参数传递
     */
 const editBaseTileColor();

31、镜头移动

/**
     * 跳转到指定位置
     * @param j 经度
     * @param w 维度
     * @param h 高度
     * @param heading 沿Z轴进行旋转
     * @param pitch 沿Y轴进行旋转
     * @param roll 沿X轴进行旋转
     * @param duration 过渡时间单位秒
     * @param afterFun 飞行结束后执行时间
     * @param destination 地点笛卡尔3坐标系
     */
flyMapCenter ({j, w, h, heading, pitch, roll, duration, afterFun, destination})

32、给地球表面加载图片（贴地）

/**
     * 1度=π/180≈0.01745弧度，1弧度=180/π≈57.3度
     * @param bounds west,south,east,north 左下右上，例如：{88.51753778188035,44.067078994836706,88.53048168347053, 44.075565899255}
     * @param id
     * @param data
     * @param imgPath 需要铺的图片
     * @param geoConf 几何的配置项
     * @returns {any}
     */
drawPrmImage({bounds:[88.51753778188035,44.067378994836706,88.53048168347053, 44.075565899255], id:"prmImg", data:{} ,imgPath:imgUrl("daba1.svg"),geoConf: {stRotation: 0.349}})