@maptalks/transform-control

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