跳到主要内容
版本：9.1.0

@mapmost/mapmost-webgl-transformControls

为Mapmost SDK for WebGL的定制插件，提供对三维模型平移、旋转和缩放操作的支持。

依赖 Mapmost SDK for WebGL，版本对应关系如下：

transformControls版本SDK版本
v 1.0.0v 2.10.0+
v 2.0.0v 3.2.0+
v 3.0.0v 9.1.0+

安装​

npm install @mapmost/mapmost-webgl-transformControls@3.0.0

使用方式​

使用modules​

import mapmost from '@mapmost/mapmost-webgl';
import MapmostTransformControls from '@mapmost/mapmost-webgl-transformControls';
import '@mapmost/mapmost-webgl-transformControls/dist/mapmost-webgl-transformControls.css'

使用CDN​

<script src ='https://delivery.mapmost.com/cdn/sdk/webgl/v9.1.0/mapmost-webgl-min.js'></script>
<script src='https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-transformControls/v3.0.0/mapmost-webgl-transformControls.js'></script>
<link rel='stylesheet' href='https://delivery.mapmost.com/cdn/sdk/plugins/mapmost-webgl-transformControls/v3.0.0/mapmost-webgl-transformControls.css' type='text/css' />

用法​

new MapmostTransformControls(model, layer, options);
  • model: Obejct3D (required) 模型对象。
  • layer: ModelLayer (required) 三维图层实例。
  • options: Object (optional) 可选参数
    • isShowTool: Boolean (optional) 是否显示操作控件，默认为true。
    • isShowAllAxis: Boolean (optional) 是否显示所有轴，默认为false，只显示XYZ三轴。

使用示例​


let models_obj = ["./data/Olympic.glb"].map(item => ({
    type: 'glb',
    url: item
}));

let options = {
    id: 'model_id',
    type: 'model',
    models: models_obj,
    center: [120.74603465203592, 31.30605899929158, 0.0],
    callback: function (group, layer) {
        let model = group.children[0]
        new MapmostTransformControls(model, layer);
    }
};
map.addLayer(options);

参考 示例。

方法​

getStateInfo​

获取模型状态信息。

  • 返回值形式如下：
    {
        "center": [ // 模型放置的原点
            120.74610481430044,
            31.30605392875909,
            68.19268619625325
        ],
        "rotate": { // 旋转值
            "x": 0,
            "y": 0,
            "z": 0
        },
        "scale": { // 缩放值
            "x": 1,
            "y": 1,
            "z": 1
        }
    }

案例​

let control=new MapmostTransformControls(model, layer);
map.on('mouseup', function (e) {
    if (e.originalEvent.button === 0) {
        console.log(control.getStateInfo()) // 输出模型状态信息
    }
})

quit​

退出操作模式。

案例​

let control=new MapmostTransformControls(model, layer, {isShowTool:false});
control.quit()

setMode​

设置操作模式。

参数​

名称类型描述
modeString必填平移、旋转、缩放分别为"translate"、"rotate"、"scale"。

案例​

let control=new MapmostTransformControls(model, layer, {isShowTool:false});
control.setMode('translate') // 设置平移模式

reset​

重置模型对象。

案例​

let control=new MapmostTransformControls(model, layer, {isShowTool:false});
control.reset() // 重置