xt-cs-map
v1.0.28
Published
Readme
打包命令介绍
"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:枚举类型**
| 类型 | 介绍 | | --------------- | ---------------- | | Point | 点要素 | | PolyLine | 单条线组成的要素 | | MultiLineString | 多条线组成的要素 | | Polygon | 单个面组成的要素 | | MultiPolygon | 多个面组成的要素 |
一、项目中组件使用
//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贴地类
- prmPolygonWater（贴地面—水利）
- prmPolylineWater（贴地线—水流）
- entPolylineLiu（贴地线—流动）
- drawPrmPolygon（贴地面）
- 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、313、设置热力图
//初始化热力图
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、dz22、操作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}})