maptalks.three

maptalks.three

A maptalks Layer to render with THREE.js

Examples

• Extrude Buildings.
• Load MTL Model.

Install

• Install with npm: npm install maptalks.three.
• Download from dist directory.
• Use unpkg CDN: https://unpkg.com/maptalks.three/dist/maptalks.three.min.js

Usage

As a plugin, maptalks.three must be loaded after maptalks.js and THREE.js in browsers.

<script type="text/javascript" src="https://unpkg.com/three@0.84.0/build/three.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks.three/dist/maptalks.three.js"></script>
<script>
var threeLayer = new maptalks.ThreeLayer('t');
threeLayer.prepareToDraw = function (gl, scene, camera) {
    var light = new THREE.PointLight(0xffffff, 0.8);
    camera.add(light);
    var me = this;
    countries.features.forEach(function (g) {
        var num = g.properties.population;
        var color = getColor(num);

        var m = new THREE.MeshPhongMaterial({color: color, opacity : 0.7});

        var mesh = me.toExtrudeGeometry(maptalks.GeoJSON.toGeometry(g), num / 4E2, m);
        if (Array.isArray(mesh)) {
            scene.add.apply(scene, mesh);
        } else {
            scene.add(mesh);
        }
    });
};

map.addLayer(threeLayer);
</script>

Supported Browsers

IE 11, Chrome, Firefox, other modern and mobile browsers that support WebGL;

API Reference

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

Constructor

new maptalks.ThreeLayer(id, options)

• id String layer id
• data Marker[] layer data, an array of maptalks.Marker
• options Object options
  • glOptions Object options when creating webgl context, null by default
  • doubleBuffer Boolean whether the layer canvas is painted with double buffer, true by default
  • Other options defined in maptalks.CanvasLayer

Contributing

We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.

Develop

The only source file is index.js.

It is written in ES6, transpiled by babel and tested with mocha and expect.js.

Scripts

• Install dependencies

$ npm install

• Watch source changes and generate runnable bundle repeatedly

$ gulp watch

• Tests

$ npm test

• Watch source changes and run tests repeatedly

$ gulp tdd

• Package and generate minified bundles to dist directory

$ gulp minify

• Lint

$ npm run lint