Skip to content

水面

水面的保存和压平相同,都是使用 togeojson()的方式直接转换为 json 格式数据上传保存,水面需要额外调用水面接口,需要引用插件 Water.js

HTML
<script type="text/javascript" src="Build/Plugins/Water/Water.js"></script>

水面绘制

JavaScript

var waterDataSource;
//存储水面的面要素会保存到该对象中
var promise = viewer.dataSources.add(new LSGlobe.GeoJsonDataSource("waterDataSource"));
promise.then(function(dataSource) {
    waterDataSource = dataSource;
}).otherwise(function(error) {

});

//水面的绘制
var waterHandler = new LSGlobe.ScreenSpaceEventHandler(viewer.scene.canvas);
waterHandler.setInputAction(function(movement) {
    //获取的坐标上添加标绘点,具体的坐标获取参照坐标转换
    var Pos = scene.pickGlobe(movement.position);
},LSGlobe.ScreenSpaceEventType.LEFT_CLICK);

//根据上面获取到的点集合经过处理后达到新的数据
var oValuePoint = ChangePolygonPosition(event.positions);//同压平的坐标处理方法



var pos = oValuePoint;//同上面oValuePoint

//创建
var wateritem = new LSGlobe.Water(viewer.scene);
wateritem.name = "水面";//水面名称
wateritem.id = id;//水面的id
wateritem.waveWidth = 5;//波纹宽度
wateritem.flowDirection = 90;//水流方向
wateritem.flowSpeed =10;//水流速度
wateritem._waterColor = LSGlobe.Color.fromCssColorString("#FFFF00");//水面颜色
wateritem.des = "";//水面描述
wateritem.alpha = 100;//
wateritem.waterPolygon = new LSGlobe.PolygonGeometry({
    polygonHierarchy: new LSGlobe.PolygonHierarchy(LSGlobe.Cartesian3.fromDegreesArrayHeights(oValuePoint)),
    perPositionHeight: true
});

//属性
var oWaterEntityProp = {};
oWaterEntityProp.waveWidth = wateritem.waveWidth;
oWaterEntityProp.flowDirection = wateritem.flowDirection;
oWaterEntityProp.flowSpeed = wateritem.flowSpeed;
oWaterEntityProp._waterColor = "#006ab4";
oWaterEntityProp.alpha = 100;
oWaterEntityProp.des = wateritem.des;
oWaterEntityProp.name = wateritem.name;
//该面是辅助设置水面的面,最后水面的高度和范围是该面显示的高度和范围(该面用于保存,存储于waterDataSource.entities)
var waterEntity = waterDataSource.entities.add({
    name: '水面',//水面名称
    id: id,
    polygon: {
        hierarchy: {
            positions:LSGlobe.Cartesian3.fromDegreesArrayHeights(oValuePoint)
        },
        material: new LSGlobe.Color(0.5, 1.0, 1.0, 0.01),
        fill: true,
        //显示填充
        outline: false,
        outlineColor: LSGlobe.Color.YELLOW,
        perPositionHeight: true
    }
});
waterEntity.properties = oWaterEntityProp;

viewer.scene.waterCollection._water.push(wateritem);

水面编辑

JavaScript
//获取水面对象
function fnGetOwaterById(id) {
    var oSingleWater;
    var aWater = scene.waterCollection._water;
    for (var i = 0; i < aWater.length; i++) {
        if (id == aWater[i].id) {
            aWater[i].index = i;
            oSingleWater = aWater[i];
            break;
        }
    }
    return oSingleWater;
}
//笛卡尔积转经纬度
function fnCartesian2Degreen(oCartesian){
    var ellipsoid=viewer.scene.globe.ellipsoid;
    var cartesian3=new LSGlobe.Cartesian3(oCartesian.x,oCartesian.y,oCartesian.z);
    var cartograhphic=ellipsoid.cartesianToCartographic(cartesian3);
    var lat=LSGlobe.Math.toDegrees(cartograhphic.latitude);
    var lng=LSGlobe.Math.toDegrees(cartograhphic.longitude);
    var alt=cartograhphic.height;
    return {lng:lng,lat:lat,alt:alt}
}
//经纬度转笛卡尔积坐标
function  fnDegreen2Cartesian(oDegreen) {
    return LSGlobe.Cartesian3.fromDegrees(oDegreen.lng?oDegreen.lng:oDegreen.x, oDegreen.lat?oDegreen.lat:oDegreen.y, oDegreen.alt?oDegreen.alt:oDegreen.z, viewer.scene.globe.ellipsoid);
}

var oWater = fnGetOwaterById(id);//水面对象
var oWaterEntity = waterDataSource.entities.getById(id);//水面数据存储对象

//水面名称修改
oWater.name = "水面新名称";
oWaterEntity.name = = "水面新名称";

//水面描述修改
oWater.des = "水面新描述";
oWaterEntity.properties.addProperty("des", "水面新描述");

//水面位置修改
var originWaterCenter = fnCartesian2Degreen(oWater._waterCenterPos);//原水面的中心的经纬度坐标
oWater._waterCenterPos=SGlobe.Cartesian3.fromDegrees(120, 30, 10, viewer.scene.globe.ellipsoid);//新的水面中心坐标

//计算出originWaterCenter和新中心坐标(120,30,10)的经纬度高度差值
var fDiffLng=120-originWaterCenter.lng;
var fDiffLat=30-originWaterCenter.lat;
var fDiffAlt=10-originWaterCenter.alt;

//获取原水面所有点坐标
var aWaterPointArray = ChangePolygonPosition(oWaterEntity.polygon.hierarchy.getValue().positions);

//经度差值不为0
for (var i = 0; i < aWaterPointArray.length; i = i + 3) {
    aWaterPointArray[i] += fDiffLng; //height 改变后的高度值
}
//纬度差值不为0
for (var i = 1; i < aWaterPointArray.length; i = i + 3) {
    aWaterPointArray[i] += fDiffLat; //height 改变后的高度值
}
//高度差值不为0
for (var i = 2; i < aWaterPointArray.length; i = i + 3) {
    aWaterPointArray[i] += fDiffAlt; //height 改变后的高度值
}
//重新存储坐标点
oWaterEntity.polygon.hierarchy = {positions:LSGlobe.Cartesian3.fromDegreesArrayHeights(aWaterPointArray)};

//波纹宽度
oWater.waveWidth = 5;
oWaterEntity.properties.addProperty("waveWidth", 5);

//水流速度
oWater.flowSpeed = 5;
oWaterEntity.properties.addProperty("flowSpeed", 5);

//水立方向
oWater.flowDirection = 90;
oWaterEntity.properties.addProperty("flowDirection", 90);

//水面的颜色
oWater._waterColor = LSGlobe.Color.fromCssColorString("#FF0000").withAlpha(1);
oWaterEntity.properties.addProperty("_waterColor", "#FF0000");

水面显示隐藏

JavaScript

oWater.isVisible = true;//true:显示,false:隐藏

水面飞行

JavaScript

var entity = waterDataSource.entities.getById(waterid);
var entityPosition = getRealPosition(entity);//同单体化
viewer.camera.flyTo({
    destination: LSGlobe.Cartesian3.fromDegrees(entityPosition.lng, entityPosition.lat, entityPosition.alt),
    duration: 3
})

水面删除

JavaScript

waterDataSource.entities.removeById(id);
var oWater = fnGetOwaterById(treeNode.id);
if (oWater) oWater.destroy();

水面存储

水面存储是以 json 格式保存的,直接赋值给 oSubSceneData.water,然后随场景保存接口一并提交保存

JavaScript
oSubSceneData.water = waterDataSource.toGeoJson()

水面重载

水面获取接口,参数 jsonType 为 5

//localhost:8000/wish3dearth/api/scene/v1.0.0/getSceneJsonInfo

JavaScript
var oGeoJson = result.data;
//result.data前面获取的水面数据json
var promise = LSGlobe.GeoJsonDataSource.load(oGeoJson, {});
promise.then(function(dataSource) {
    //将数据再次加载到初始化存储水面的对象中
    waterDataSource = dataSource;
    //添加到球中
    viewer.dataSources.add(dataSource);

    var entities = waterDataSource.entities._entities._array;
    for (var i = 0; i < entities.length; i++) {
        var entity = entities[i];
        var WaterId = entity.id;
        var WaterName = entity.name;
        if (entity.polygon) {
            entity.polygon.outline = false;
            var wateritem = new LSGlobe.Water(viewer.scene);
            wateritem.waterPolygon = new LSGlobe.PolygonGeometry({
                polygonHierarchy: new LSGlobe.PolygonHierarchy(entity.polygon.hierarchy._value.positions),
                perPositionHeight: true
            });
            var oProperties = entity.properties.getValue();
            wateritem.id = WaterId;
            wateritem.waveWidth = oProperties.waveWidth;
            wateritem.flowDirection = oProperties.flowDirection;
            wateritem.flowSpeed = oProperties.flowSpeed;
            wateritem._waterColor = LSGlobe.Color.fromCssColorString(oProperties._waterColor).withAlpha(oProperties.alpha / 100);
            wateritem.name = WaterName;
            wateritem.des = oProperties.des;
            wateritem.alpha = oProperties.alpha;
            wateritem.isVisible = entity.show;
            viewer.scene.waterCollection._water.push(wateritem);
        }
    }
}).otherwise(function(error) {
    console.log(error);
});

示例代码 code

code示例地址

Released under the MIT License.