maptalks.three

API

If you are not familiar with maptalks, refer to its documentation.This will help you read the document

BaseObject

This is the base class for all 3D objects,Its function and maptalks.geometry are as similar as possible.

Bar, ExtrudePolygon, ExtrudeLine, Line, Model base on it

If you're familiar with three.js. You can customize your own graphic elements based on it

such as examples we provide circle ,fatline,linetrip,linetrail

methods

  const bar=threeLayer.toBar(...);
  bar.getType()


bar.setInfoWindow({
    content: 'hello world,height:' + d.height * 400,
    title: 'message',
    animationDuration: 0,
    autoOpenOn: false
});

bar.setToolTip(d.height * 400, {
    showTimeout: 0,
    eventsPropagation: true,
    dx: 10
});



   bar.on('click',function(e){

   });


   bar.off('click',function(e){

   });


 animationShow(options = {}, cb) {
                if (this._showPlayer) {
                    this._showPlayer.cancel();
                }
                if (maptalks.Util.isFunction(options)) {
                    options = {};
                    cb = options;
                }
                const duration = options['duration'] || 1000,
                    easing = options['easing'] || 'out';
                const player = this._showPlayer = maptalks.animation.Animation.animate({
                    'scale': 1
                }, {
                    'duration': duration,
                    'easing': easing
                }, frame => {
                    const scale = frame.styles.scale;
                    if (scale > 0) {
                        this.getObject3d().scale.set(scale, scale, scale);
                    }
                    if (cb) {
                        cb(frame, scale);
                    }
                });
                player.play();
                return player;
}


 class Circle extends maptalks.BaseObject {
            constructor(coordinate, options, material, layer) {
                options = maptalks.Util.extend({}, OPTIONS, options, { layer, coordinate });
                super();
                //Initialize internal configuration
                // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L135
                this._initOptions(options);
                const { altitude, radius } = options;
                //generate geometry
                const r = layer.distanceToVector3(radius, radius).x
                const geometry = new THREE.CircleBufferGeometry(r, 50);

                //Initialize internal object3d
                // https://github.com/maptalks/maptalks.three/blob/1e45f5238f500225ada1deb09b8bab18c1b52cf2/src/BaseObject.js#L140
                this._createMesh(geometry, material);

                //set object3d position
                const z = layer.distanceToVector3(altitude, altitude).x;
                const position = layer.coordinateToVector3(coordinate, z);
                this.getObject3d().position.copy(position);
                this.getObject3d().rotation.x = -Math.PI;
            }
 }

events support

ThreeLayer

A maptalks Layer to render with THREE.js

ThreeLayer is a subclass of maptalks.CanvasLayer and inherits all the methods of its parent.

constructor

new maptalks.ThreeLayer(id, options)

methods

   threeLayer.coordinateToVector3(map.getCenter(),1);






* toShape(polygon) `polygon|MultiPolygono to THREE.Shape`

  * polygon
  * return THREE.Shape




* toExtrudeMesh(polygon, altitude, material, height) `polygon to THREE.ExtrudeGeometry Mesh`
 
  * polygon [Polygon|MultiPolygon]
  * altitude
  * material [THREE.Material]
  * height [The value of the polygon being raised]
  * return THREE.Mesh
  * `In the new version, you can use toExtrudePolygon instead`





* toExtrudePolygon(polygon, options, material)

  * polygon [Polygon|MultiPolygon]
  * options.altitude=0
  * options.height=1
  * options.topColor=null 
  * options.bottomColor='#2d2f61'
  * options.interactive=true [Can I interact]
  * material [THREE.Material]
  * return [ExtrudePolygon](./src/ExtrudePolygon.js)

```js
  var mesh = threeLayer.toExtrudePolygon(maptalks.GeoJSON.toGeometry(g), {
        height: levels * heightPerLevel,
        topColor: '#fff'
  }, material);





* toLine(lineString, options, material)

  * lineString [maptalks.LineString]
  * options.altitude=0
  * options.colors=null
  * options.interactive=true
  * material [THREE.Material]
  * return [Line](./src/Line.js)
```js
 var line = threeLayer.toLine(lineString, { altitude: 0 }, material);


 var line = threeLayer.toExtrudeLine(lineString, { altitude: 0, width: 3, height: 1 }, material);


   lineTrails = lineStrings.slice(0, 300).map(function (d) {
     var line = threeLayer.toExtrudeLineTrail(d.lineString,
       { altitude: 0, width: 3, height: 2, chunkLength: d.len / 40, speed: 1, trail: 6 },
       highlightmaterial);
     return line;
   });


  var model=threeLayer.toModel(object,{
                coordinate:map.getCenter(),
                altitude:100
  });


 map.on('mousemove',function(e){
     threeLayer.identify(e.coordinate);
 });

How to customize your own graphics

BaseObject is the base class of graphics provided by us. If you need to customize your own graphics, please extend it based on it

  class xxx extends maptalks.BaseObject{
    
    constructor(...){
        options = maptalks.Util.extend({}, OPTIONS, options, { layer, coordinate });
        super();
        this._initOptions(options);

        ...

        this._createMesh(geometry, material);
        //this._createGroup();
        //this._createLine(geometry,material);
    }

    ....
   
  }

The value of BaseObject’s object3d attribute is three.js. You can perform relevant operations on it, such as scale, position, rotation, etc

In theory, you can customize any graphics component you need. Of course, it requires you to be familiar with three.js

This site is open source. Improve this page.