maptalks.TransformControl

Usage

transform-control a plugin to control model's translate、rotation and scale.

Install

• Install with npm: npm install @maptalks/transform-control.
• Use unpkg CDN: https://unpkg.com/@maptalks/transform-control/dist/transform-control.js

Vanilla Javascript

<script type="text/javascript" src="../maptalks.transform-control.js"></script>
<script>
var map = new maptalks.Map("map",{
    center : [0, 0],
    zoom   :  15
});
var transformControl = new maptalks.TransformControl();
transformControl.addTo(map);
transformControl.on('transforming', e => {
    //get translate、rotation、scale
    const translate = e.translate;
    const rotation = e.rotation;
    const scale = e.scale;
});
</script>

ES6

import TransfromControl from '@maptalks/transform-control';

const map = new maptalks.Map("map",{
    center : [0, 0],
    zoom   :  15
});
const transformControl = new maptalks.TransformControl();
transformControl.addTo(map);
transformControl.on('transforming', e => {
    const target = e.target;
    target.setTRS(e.translate, e.rotation, e.scale);
});
transformControl.on('positionchange', e => {
    const target = e.target;
    target.setCoordinates(e.coordinate);
});

API

• Class : TransformControl(inherited from maptalks.Eventable)

  transform control's constructor.

  Method : new TransformControl(options)

  | Parameter | Type | Default | Description| | ------------- |---------- |-------------|--------- | | id | String | | transform control's id | | options | Object | null | construct options |

  Method : addTo(map)

  add the control to a map | Parameter | Type | Default | Description| | ------------- |---------- |-------------|--------- | | map | maptalks.Map | | a map to add |

  returns : TransformControl: this

  Method : remove()

  remove the control from map

  Method : transform(target)

  specify a target to transform | Parameter | Type | Default | Description| | ------------- |---------- |-------------|--------- | | target | GLTFMarker | Mesh | null | the target to transform |

  Method : getTransformTarget()

  get the current tranforming target

  returns : Object: the transforming target object

  Method : enable()

  enable the control

  returns : TransformControl: return this

  Method : disable()

  disable the control, when disable the control, it will be not available TransformControl: return this

  Method : isEnbale()

  whether the control is enable Boolean: true or false

  Event : transforming

  when transforming the target, it will trigger transforming event | Parameter | Type | Default | Description| | ------------- |---------- |-------------|--------- | | target | GLTFMarker | | the target to transform | | action | String | | transforming action, includes xy-translate、x-translate、y-translate、z-translate、z-rotate、scale | | type | GLTFMarker | | event type name | | translate | Array | | current translate when transforming | | scale | Array | | current scale when transforming | | rotation | Array | | current rotation when transforming |

  Event : positionchange

  when changing target's position, it will trigger positionchange event | Parameter | Type | Default | Description| | ------------- |---------- |-------------|--------- | | target | GLTFMarker | | the target to transform | | action | String | | transforming action, includes xy-translate、x-translate、y-translate、z-translate、z-rotate、scale | | type | GLTFMarker | | event type name | | coordinate | Array | | current coordinate when changing target's position |

  Event : transformend

  when endding the transform task, it will trigger transformend event | Parameter | Type | Default | Description| | ------------- |---------- |-------------|--------- | | target | GLTFMarker | | the target to be transformed | | action | String | | current action | | type | GLTFMarker | | event type name |