@maptalks/transform-control NPM

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 |