0.8.0 • Published 4 months ago
maptalks.modelcontrol v0.8.0
maptalks.modelcontrol
maptalks model control .
support geometry:
- GLTFMarker
- ThreeLayer toModel (Model)
Install
NPM
npm i maptalks.modelcontrol
CDN
<script type="text/javascript" src="https://unpkg.com/maptalks.modelcontrol/dist/maptalks.modelcontrol.js"></script>
DEMO
API
ModelControl
class
import {
ModelControl
} from 'maptalks.modelcontrol';
const modelcontrol = new ModelControl(map, {
lineSymbol: {
lineColor: '#fff'
},
scaleColor: 'red',
rotateColor: 'blue',
translateColor: 'green',
heightColor: 'white',
highLightColor: 'yellow',
opacity: 0.4,
panelSize: 300,
//Allow negative altitude values
allowNegativeAltitude: true,
// scaleCursor:'url(data/scale-cursor.svg) 13 13, auto',
// rotationCursor:'url(data/rotation-cursor.svg) 13 13, auto',
// translateCursor:'url(data/translate-cursor.svg) 13 13, auto',
// heightCursor:'url(data/height-cursor.svg) 13 13, auto',
});
//set selected model,model is GLTFMarker or maptalks.three BaseObject
modelcontrol.setModel(baseObjectModel);
//enable
modelcontrol.enable();
//disable
modelcontrol.disable();
methods
enable(coordinates)
If you want to customize the coordinate points of the model, otherwise the center point of the model will be used by defaultdisable()
isEnabled()
setModel(model)
set current modelsetTarget(model)
set current model , Equivalent tosetModel
setOriginalScale(scale)
set model Initialized scaling factor
//for GLTFMarker
modelcontrol.setOriginalScale(gltfMarker.getScale()[0]);
//for maptalks.three
modelcontrol.setOriginalScale(baseObjectModel.getObject3d().scale.x);
events
translate
when model translatetranslate_in
when mouse enter translate dom componenttranslate_out
when mouse leave translate dom componentscale
when model scalescale_in
when mouse enter scale dom componentscale_out
when mouse leave scale dom componentrotation
when model rotationrotation_in
when mouse enter rotation dom componentrotation_out
when mouse leave rotation dom componentheihgt
when model heihgt changeheight_in
when mouse enter heihgt dom componentheight_out
when mouse leave heihgt dom component
//show tip ,you can do other things
function showTip(e) {
const {
coordinate,
type
} = e;
if (!coordinate) {
marker.remove();
return;
}
let message = '';
if (type === 'translate_in') {
message = '平移';
} else if (type === 'scale_in') {
message = '缩放';
} else if (type === 'rotation_in') {
message = '旋转';
} else if (type === 'height_in') {
message = '调整高度'
}
const content = `你可以对模型进行${message}`;
marker.setContent(`<div class="control-message">${content}</div>`);
if (!marker.getMap()) {
marker.addTo(map);
}
marker.setCoordinates(coordinate);
}
modelcontrol.on('translate_in scale_in rotation_in height_in', showTip);
modelcontrol.on('translate_out scale_out rotation_out height_out', () => {
marker.remove();
});
//when model translate,scale,rotation,.....
modelcontrol.on('translate scale rotation height', e => {
const {
type
} = e;
marker.remove();
if (type === 'translate') {
gltfMarker.setCoordinates(e.coordinate);
}
if (type === 'scale') {
const scale = e.scale;
gltfMarker.setScale(scale, scale, scale)
}
if (type === 'rotation') {
const rotation = e.rotation;
gltfMarker.setRotation(0, 0, rotation + 180);
}
if (type === 'height') {
const coordinate = gltfMarker.getCoordinates();
coordinate.z = e.height;
gltfMarker.setCoordinates(coordinate);
}
})