跳到主要内容

管线

此类功能的实现，需要使用Mapmost特定工具及服务，具体请联系官方客服(0512-67632003)。

管线事件​

setOnPipelineClickListener(function (callback){})​

设置管线点击事件监听​
参数​
名称参数枚举值是否必填描述
function(callback) {}FnN/A是地图坐标拾取回调
callback.locationFloat[]N/AN/A拾取点的经度、纬度、高度
callback.typeStringN/AN/A管线类型
代码示例​
mapmostUE.setOnPipelineClickListener(function(callback) {
    let {location, type} = callback
})

removeOnPipelineClickListener()​

删除管线点击事件监听​
参数​
名称参数枚举值是否必填描述
代码示例​
mapmostUE.removeOnPipelineClickListener()

管线可视化​

addPipeline(id,type,url)​

添加三维管线​
参数​
名称参数枚举值是否必填描述
idStringN/A是三维管线的id
typeStringN/A是三维管线的类型，需与管线分析服务配合定义
urlStringN/A是管线3dTiles服务地址
代码示例​
// 添加三维管线
mapmostUE.addPipeline("11111","JS_LINE","http://XXX.XXX.XX.XXX:XXXX/SIP3D/pipeline_3dtiles/JS_LINE/tileset.json");
效果​
show

removePipeline(id)​

删除三维管线​
参数​
名称参数枚举值是否必填描述
idStringN/A是需删除三维管线的id
代码示例​
// 删除三维管线
mapmostUE.removePipeline("11111");
效果​
show

highlightPipeline(options)​

高亮管线​
参数​
名称参数枚举值是否必填描述
optionsObjectN/A是高亮管线参数对象
options.pipeShapeStringN/A是管段形状，方形或圆形
options.sizeObjectN/A是管段的体积参数对象
options.size.diameterFloatN/A是直径
options.size.widthFloatN/A是宽
options.size.heightFloatN/A是高
options.startObjectN/A是管段的起点参数对象
options.start.xFloatN/A是经度
options.start.yFloatN/A是纬度
options.start.zFloatN/A是高度
options.endObjectN/A是管段的终点参数对象
options.end.xFloatN/A是经度
options.end.yFloatN/A是纬度
options.end.zFloatN/A是高度
options.propertyObjectN/A是管段的材质属性
options.property.protectiveMaterialStringN/A是保护材质
options.property.materialStringN/A是材质
options.property.roadLocationStringN/A是位置
options.guidStringN/A是管段的guid
options.pipeTypeStringN/A是管段类型
代码示例​
let url = "http://xxx.xxx.xx.xxx/SIPPipe/SIPPipe/getPipeLineInfo?lng=120.67620849609375&lat=31.315441131591797&height=-5.921449661254883&type=gd_line";

fetch(url).then(res => res.json()).then(response => {
    console.log(response)

    for (let i = 0; i < response.data.length; i++) {

        // UE仅做高亮生成，不做信息展示
        mapmostUE.highlightPipeline(response.data[i]);
    }

});

unhighlightPipeline()​

取消所有高亮管线​
参数​
名称参数枚举值是否必填描述
代码示例​
// 取消所有高亮管线
mapmostUE.unhighlightPipeline();

drawPipelineDirection(options)​

绘制管线流向性效果​
参数​
名称参数枚举值是否必填描述
optionsObjectN/A是管线参数对象
options.pipeShapeStringN/A是管段形状，方形或圆形
options.sizeObjectN/A是管段的体积参数对象
options.size.diameterFloatN/A是直径
options.size.widthFloatN/A是宽
options.size.heightFloatN/A是高
options.startObjectN/A是管段的起点参数对象
options.start.xFloatN/A是经度
options.start.yFloatN/A是纬度
options.start.zFloatN/A是高度
options.endObjectN/A是管段的终点参数对象
options.end.xFloatN/A是经度
options.end.yFloatN/A是纬度
options.end.zFloatN/A是高度
options.propertyObjectN/A是管段的材质属性
options.property.protectiveMaterialStringN/A是保护材质
options.property.materialStringN/A是材质
options.property.roadLocationStringN/A是位置
options.guidStringN/A是管段的guid
options.pipeTypeStringN/A是管段类型
代码示例​
let url = "http://xxx.xxx.xx.xxx/SIPPipe/SIPPipe/getPipeLineInfo?lng=120.67620849609375&lat=31.315441131591797&height=-5.921449661254883&type=gd_line";
fetch(url).then(res => res.json()).then(response => {
    console.log(response)

    for (let i = 0; i < response.data.length; i++) {
        // 绘制流向性箭头效果
        mapmostUE.drawPipelineDirection(response.data[i]);
    }

});

clearPipelineDirection()​

取消管线流向性效果​
参数​
名称参数枚举值是否必填描述
代码示例​
mapmostUE.clearPipelineDirection();

setPipelineLayerVisibility(pipelineType, isVisible)​

设置三维管线图层可见性​
参数​
名称参数枚举值是否必填描述
pipelineTypeStringN/A是场景中对应的管线3DTiles对象的名称，例如给水为js
isVisibleboolN/A是该图层是否可见
// 显示三维管线图层
$("#showPipelineLayer").click(function () {
    mapmostUE.setPipelineLayerVisibility('js',true);
})

// 隐藏三维管线图层
$("#hidePipelineLayer").click(function () {
    mapmostUE.setPipelineLayerVisibility('js',false);
})

管线分析​

开启流向性分析​

涉及接口​
  1. 设置管线点击事件监听
  2. 绘制管线流向性效果
代码示例​
mapmostUE.setOnPipelineClickListener(function (val) {
        let {location, type} = val;

        let url = "http://xxx.xxx.xx.xxx/SIPPipe/SIPPipe/getPipeLineInfo?lng=" + location[0] + "&lat=" + location[1] + "&height=" + location[2] + "&type=" + type;

        fetch(url).then(res => res.json()).then(response => {
            console.log(response)

            for (let i = 0; i < response.data.length; i++) {
                // 绘制流向性箭头效果
                mapmostUE.drawPipelineDirection(response.data[i]);
            }

        });

    });
效果​
show

关闭流向性分析​

涉及接口​
  1. 移除管线点击事件监听
  2. 清除管线流向性效果
代码示例​
mapmostUE.clearPipelineDirection();
mapmostUE.removeOnPipelineClickListener();
效果​
show

开启连通性分析​

涉及接口​
  1. 设置管线点击事件监听
  2. 高亮管线
  3. 添加Marker
代码示例​
let startGuid = null;
    let endGuid = null;
    
    mapmostUE.setOnPipelineClickListener(function (val) {
        let {location, type} = val;

        if (type.indexOf('_point') > -1){
            var notyf = new Notyf({
                position:{
                    x:'center',
                    y:'top'
                }
            });
            notyf.error('连通性不支持点选管点，请重新选择管段')
            return;
        }

        if (type.indexOf('_line') > -1){
            type = type.substring(0,type.indexOf('_line'));
        } else if (type.indexOf('_point') > -1){
            type = type.substring(0,type.indexOf('_point'));
        } else {
            return;
        }
        if (startGuid === null){
            mapmostUE.unhighlightPipeline();
            mapmostUE.removeMarker("startMarker");
            mapmostUE.removeMarker("endMarker");
            mapmostUE.addMarker("startMarker",{
                "name": "检测点1",
                "type": "classic",
                "location": [location[0],location[1],location[2]],
                "iconImage": "http://xxx.xxx.xx.xxx/XiXi/icon/monitor.png",
                "bgColor": "#669966",
                "enableAutoFlyTo": false,
                "imageUrl":""
            })
            // 管线信息查询接口，返回包括guid，起始点，形状，管径
            let url = "http://xxx.xxx.xx.xxx/SIPPipe/SIPPipe/getPipeLineInfo?lng=" + location[0] + "&lat=" + location[1] + "&height=" + location[2] + "&type=" + val.type;
            fetch(url).then(res => res.json()).then(response => {
                console.log(url)
                startGuid = response.data[0].guid;
            });
        } else if (endGuid === null){
            mapmostUE.removeMarker("endMarker");
            mapmostUE.addMarker("endMarker",{
                "name": "检测点2",
                "type": "classic",
                "location": [location[0],location[1],location[2]],
                "iconImage": "http://xxx.xxx.xx.xxx/XiXi/icon/monitor.png",
                "bgColor": "#669966",
                "enableAutoFlyTo": false,
                "imageUrl":""
            })
            // 管线信息查询接口，返回包括guid，起始点，形状，管径
            let url = "http://xxx.xxx.xx.xxx/SIPPipe/SIPPipe/getPipeLineInfo?lng=" + location[0] + "&lat=" + location[1] + "&height=" + location[2] + "&type=" + val.type;
            fetch(url).then(res => res.json()).then(response => {
                console.log(response.data)
                endGuid = response.data[0].guid;
                
                // 判断是否为同一管段，如果是，不查询，给出提示
                if (startGuid === endGuid) {
                    var notyf = new Notyf({
                        position:{
                            x:'center',
                            y:'top'
                        }
                    });
                    notyf.error('2个检测点为同一管段，请重新选择')
                    startGuid = null
                    endGuid = null
                    return;
                }

                // 查询连通性
                let url = "http://xxx.xxx.xx.xxx/SIPPipe/SIPPipe/pipelineAnls/getConnectivity?startGuid=" + startGuid + "&endGuid=" + endGuid + "&pipeType=" + type;
                console.log(url)
                fetch(url).then(res => res.json()).then(response => {
                    console.log(response.data)
                    if (response.data.length === 0){
                        var notyf = new Notyf({
                            position:{
                                x:'center',
                                y:'top'
                            }
                        });
                        notyf.error('该两点不连通')
                        return
                    }
                    for (let i = 0; i < response.data.length; i++) {
                        console.log(response.data[i])
                        // 高亮所有返回的管段
                        mapmostUE.highlightPipeline(response.data[i])
                    }
                });

                startGuid = null;
                endGuid = null;
            });
        }

    });
效果​
show

关闭连通性分析​

涉及接口​
  1. 移除管线点击监听
  2. 清除管线高亮效果
  3. 删除Marker
代码示例​
mapmostUE.unhighlightPipeline();
mapmostUE.removeMarker("startMarker");
mapmostUE.removeMarker("endMarker");
mapmostUE.removeOnPipelineClickListener();
效果​
show

开启横截面分析​

涉及接口​
  1. 开启横截面分析状态
  2. 添加Marker
startCSectionAnalysis(function(callback){})​
开启横截面分析状态​
参数​
名称参数枚举值是否必填描述
function(callback) {}FnN/A是横截面分析回调，返回起点终点
callback.startPointFloat[]N/AN/A横截面起点
callback.endPointFloat[]N/AN/A横截面终点
代码示例​
mapmostUE.startCSectionAnalysis(function (val) {

        mapmostUE.removeMarker("CSectionMarker");
        mapmostUE.addMarker("CSectionMarker",{
            "name": "CSection",
            "type": "cleanWindow",
            "location": [(val.startPoint[0] + val.endPoint[0])/2,(val.startPoint[1] + val.endPoint[1])/2,(val.startPoint[2] + val.endPoint[2])/2],
            "enableAutoFlyTo": true,
            "url": "http://xxx.xxx.xx.xxx/SIPSD/pipelineAnalysis/CSection.html?data=" + JSON.stringify(val),
            "windowWidth": 800, // 默认350
            "windowHeight": 500, // 默认150
        })
    })
效果​
show

关闭横截面分析​

涉及接口​
  1. 关闭横截面分析状态
  2. 移除Marker
stopCSectionAnalysis()​
关闭横截面分析状态​
参数​
名称参数枚举值是否必填描述
代码示例​
mapmostUE.removeMarker("CSectionMarker");
mapmostUE.stopCSectionAnalysis();
效果​
show

开启纵截面分析​

涉及接口​
  1. 设置管线点击事件监听
  2. 高亮管线
  3. 添加Marker
代码示例​
mapmostUE.setOnPipelineClickListener(function (val) {

        let {location, type} = val;
        
        mapmostUE.removeMarker("LSectionMarker");
        mapmostUE.unhighlightPipeline();

        let url1 = "http://xxx.xxx.xx.xxx/SIPPipe/SIPPipe/getPipeLineInfo?lng=" + location[0] + "&lat=" + location[1] + "&height=" + location[2] + "&type=" + type;
        console.log(url1)
        fetch(url1).then(res => res.json()).then(response => {
            console.log(response.data)
            for (let i = 0; i < response.data.length; i++) {
                console.log(response.data[i])
                // 高亮查询到的管段
                mapmostUE.highlightPipeline(response.data[i])
            }
        });

        // 纵截面不支持查询管点
        if (type.indexOf('_point') > -1){
            var notyf = new Notyf({
                position:{
                    x:'center',
                    y:'top'
                }
            });
            notyf.error('纵截面分析不支持查看管点，请重新点选管段')
            return;
        }

        if (type.indexOf('_line') > -1){
            type = type.substring(0,type.indexOf('_line'));
        } else if (type.indexOf('_point') > -1){
            type = type.substring(0,type.indexOf('_point'));
        } else {
            return;
        }
        // 管线信息查询接口，返回包括guid，起始点，形状，管径
        let url2 = "http://xxx.xxx.xx.xxx/SIPPipe/SIPPipe/getPipeLineInfo?lng=" + location[0] + "&lat=" + location[1] + "&height=" + location[2] + "&type=" + val.type;
        console.log(url2)
        fetch(url2).then(res => res.json()).then(result => {
            console.log(result.data)
            for (let i = 0; i < result.data.length; i++) {
                // 获取纵截面数据
                let getLongiSectionUrl = "http://xxx.xxx.xx.xxx/SIPPipe/SIPPipe/pipelineAnls/getLongiSection?pipeType=" + type + "&guid=" + result.data[i].guid;
                console.log(getLongiSectionUrl)
                fetch(getLongiSectionUrl).then(res => res.json()).then(response => {
                    // 添加管段形状和管段类型
                    response.data.pipeShape = result.data[i].pipeShape
                    response.data.pipeType = type
                    console.log(JSON.stringify(response.data))
                    console.log("http://xxx.xxx.xx.xxx/SIPSD/pipelineAnalysis/LSection.html?data=" + JSON.stringify(response.data))

                    mapmostUE.addMarker("LSectionMarker",{
                        "name": "LSection",
                        "type": "cleanWindow",
                        "location": [location[0],location[1],location[2]],
                        "enableAutoFlyTo": false,
                        "url": "http://xxx.xxx.xx.xxx/SIPSD/pipelineAnalysis/LSection.html?data=" + JSON.stringify(response.data),
                        // "url": "http://xxx.xxx.xx.xxx/LSection.html?data=" + JSON.stringify(response.data),
                        "windowWidth": 800, // 默认350
                        "windowHeight": 500, // 默认150
                    })
                    
                });
            }
        });

    });
效果​
show

关闭纵截面分析​

涉及接口​
  1. 删除Marker
  2. 移除高亮管线
  3. 移除管线点击事件监听
代码示例​
mapmostUE.removeMarker("LSectionMarker");
mapmostUE.unhighlightPipeline();
mapmostUE.removeOnPipelineClickListener();
效果​
show