maptalks / maptalks.three Goto Github PK

View Code? Open in Web Editor NEW

567.0 20.0 129.0 32.85 MB

A maptalks layer to render with three.js.

Home Page: https://deyihu.github.io/maptalks.three.website/

License: MIT License

JavaScript 6.89% TypeScript 93.11%

maptalks threejs maptalks-layer maptalks-plugins 3d data-visualization gis

maptalks.three's Introduction

maptalks.three

A maptalks Layer to render with three.js

20220116_213033.mp4

Examples

Demos.

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

Incompatible changes

three.js >=128 the default umd package is ES6
Starting from version 0.16.0, the default umd package is ES6,To fit the new version of three.js about three umd package change
If your running environment does not support ES6, we also provide Es5 version maptalks.three.es5.js,This requires the version of three.js < = 127,

Migration from <=v0.5.x to v0.6.0

Re-implementated locateCamera, sync with map's projMatrix and viewMatrix.
Model's z position is reversed from v0.5.0. So if you have models rendered with v0.5.x, rotation needs to be updated.
For THREE <= 0.94, material's side need to set to THREE.BackSide or THREE.DoubleSide to render correctly
- THREE >= 0.95 doesn't need, maybe due to #14379
Add support for THREE >= 0.93
Add support for GroupGLLayer

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/[email protected]/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.DirectionalLight(0xffffff);
    light.position.set(0, -10, -10).normalize();
    scene.add(light);

    var material = new THREE.MeshPhongMaterial();
    countries.features.forEach(function (g) {
        //g is geojson Feature
        var num = g.properties.population;

        var extrudePolygon=threeLayer.toExtrudePolygon(g, { height: num }, material);
        threeLayer.addMesh(extrudePolygon)
    });
};

map.addLayer(threeLayer);
</script>

With ES Modules:

import * as THREE from 'three';
import * as maptalks from 'maptalks';
import { ThreeLayer } from 'maptalks.three';

const map = new maptalks.Map('map', { /* options */ });

const threeLayer = new ThreeLayer('t');
threeLayer.prepareToDraw = function (gl, scene, camera) {
    const light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, -10, -10).normalize();
    scene.add(light);
    //...
};

threeLayer.addTo(map);

Supported Browsers

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

API Reference

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

$ npm run dev

Package and generate minified bundles to dist directory

$ npm run build

Lint

$ npm run lint

Publication

npm version ${version}
npm publish
npm push master ${version}

maptalks.three's People

Contributors

Stargazers

Watchers

Forkers

z0630 zhongcaiwei jerry-goodboy zmm623 puckjam wenlin1220 kanhof hanmag wegiangb davidweining2333 liubgithub sermonis hesitanting yealzoy junishanghai liuxinqiong deyihu maxiaofei2009 liquid-zhangliquan the-end-hero xiangliliang huyangbeacon wefiy gnaaobd mankorn huangkaizh leedejun dandanyouxiang xianxuli ichk southernpl lovsw lizhongyier wuzhenzhen1314 handsomegit feiyuanxin bluestone029 ssjylsg a873054267 geothinking kekeqy leecheck whlysu tpolong mrsasuke simpleyong kevin1573 jujulike cxuyang oldeng cghworker luojiong yorisona fujianlijiahan ggmemeda geographic-information-system-research tclxjiaxing-huang amengpp ziyingxue 862218924 zhenglei1112 jacolmark dutao-zfl lzfying torns aaiyo huangyunxin1994 mylove6qd stickermhf drawmindmap arctic-0 472542625 apengragon aaroncwacker siwuji hey-ksource lzuniujp08 pfguo patience-lilisi guviva 1xjh lemonjay incubated-geek-cc gisergll junglelan deltacdevadmin blstdmi linxing58 yyyyh stateless8289 erictop3 gisfinder mucks zhoubin10 dijacky wwwk ehtick cq641876623 770408517 andycheung-hub

maptalks.three's Issues

How to use this plugin for wfs format data

toExtrudeMesh BufferGeometry Not used ？

        const geom = new THREE.ExtrudeGeometry(shape, config);
        const buffGeom = new THREE.BufferGeometry();
        buffGeom.fromGeometry(geom);
        const mesh = new THREE.Mesh(geom, material);

buffGeom Not used?

是否添加一个支持pixi做一个vectorlayer的renderer

是否添加一个支持pixi做一个vectorlayer的renderer
使用webgl 提高绘制效率

memory test example

test whether the internal cache works

https://www.echartsjs.com/examples/zh/editor.html?c=bar3d-music-visualization&gl=1

利用echarts 音乐可视化的这个例子来测试，内部针对geometry的缓存是否有效果

threeLayer Support for adding and removing object 3D

for:

threeLayer.add(objects);


threeLayer.remove(objects)

expose three renderer options in threeLayer's construtor

Let use can set favored options to three renderer in threeLayer's options.

need add near and far parameters to camera in ThreeLayer

const camera = this.camera = new THREE.PerspectiveCamera(fov, size.width / size.height, 1, farZ);
camera.near = 300;
camera.far = 100000000;
scene.add(camera);

if added, then will be ok.

Raycaster 在特定情况下拾取不正常

maptalks v0.45.1
maptalks.three.js: v0.6.2
three.min.js:179 THREE.WebGLRenderer 97

可能和地图canvas的长宽相关

canvas height == canvas style height * 2 && canvas width == canvas style width* 2
上面这种情况无法拾取
调整电脑分辨率，到特定值时

canvas height == canvas style height 1 && canvas width == canvas style width 1
上面这种情况正常拾取

layer animation support Skipping frames

Skipping frames

It can provide a higher number of frames and reduce unnecessary rendering.

图层的动画支持跳帧

ExtrudeMesh extracted as a component as ExtrudePolygon

for:

class ExtrudePolygon extends BaseObject {
    constructor(polygon, options, material, layer) {
        options = maptalks.Util.extend({}, OPTIONS, options, { layer, polygon });
        super();
        this._initOptions(options);
        const { height, topColor, bottomColor, altitude } = options;
        const geometry = getExtrudeGeometry(polygon, height, layer);
        if (topColor && !material.map) {
            initVertexColors(geometry, bottomColor, topColor);
            material.vertexColors = THREE.VertexColors;
        }
        this._createMesh(geometry, material);
        const z = layer.distanceToVector3(altitude, altitude).x;
        this.getObject3d().position.z = z;
    }
}

three layer's offset display when OS display scale is not 100%

reported by @zhongcaiwei

if set as the image shows, the three layer's display will be offseted.

a parent class for extrudemesh,bar, line, points, terrain etc

for example:

class Bar extends BaseObject {
    constructor(coordinate, options, material, layer) {
        options = maptalks.Util.extend({}, OPTIONS, options, { layer, coordinate });
        super();
        this._initOptions(options);
        const { height, radius, topColor, bottomColor, altitude } = options;
        options.height = layer.distanceToVector3(height, height).x;
        options.radius = layer.distanceToVector3(radius, radius).x;
        const geometry = getGeometry(options);
        if (topColor && !material.map) {
            initVertexColors(geometry, bottomColor, topColor);
            material.vertexColors = THREE.VertexColors;
        }
        this._createMesh(geometry, material);
        const z = layer.distanceToVector3(altitude, altitude).x;
        const position = layer.coordinateToVector3(coordinate, z);
        this.getObject3d().position.copy(position);
        this.getObject3d().rotation.x = Math.PI / 2;
        this.getObject3d().translateY(options.height / 2);
    }
}


class Line  extends BaseObject


class Points  extends BaseObject



class Terrain extends BaseObject

....

Its function and maptalks. geometry are as similar as possible.

BaseObject Provide relevant functions. More features may be provided in the future

    getObject3d() {
        return this.object3d;
    }

    getId() {
        return this.id;
    }

    setId() {
        this.id = id;
        return this;
    }

    getType() {

    }

    getOptions() {
        return this.options;
    }

    getProperties() {
        return (this.options || {}).properties;
    }

    setProperties(property) {

        return this;
    }


    getLayer() {
        return this.options.layer;
    }

    show() {

        return this;
    }


    hide() {

        return this;
    }

    isVisible() {

    }


    getSymbol() {


    }

    setSymbol() {

        return this;
    }

    setInfoWindow(options) {

        return this;
    }

    getInfoWindow() {

    }

    openInfoWindow(coordinate) {

    }

    closeInfoWindow() {

    }


    removeInfoWindow() {

    }

    setTooltip(options) {

    }

    removeTooltip() {

    }

    config() {

    }

    on() {

    }

    off() {

    }

添加光晕效果无效

drawPlane(x, y, z, value, i) {
						const hei = value / 10;
						const geometry = new THREE.PlaneGeometry(1, hei);
						const material = new THREE.MeshBasicMaterial({
							map: texturesGZ[i % 2],
							depthTest: false,
							transparent: true,
							color: colorsGZ[i % 2],
							side: THREE.DoubleSide,
							blending: THREE.AdditiveBlending
						});
						const plane = new THREE.Mesh(geometry, material);
						plane.position.set(x, y, z + hei / 2);
						plane.rotation.x = Math.PI / 2;
						plane.rotation.z = Math.PI;
						const plane2 = plane.clone();
						plane2.rotation.y = Math.PI / 2;
						return [plane, plane2];
					}

不用maptalk渲染是没问题的添加之后就没有了

O

[email protected](loading-gltf)--The text is on the back

[email protected] is overturning.

加载大模型循环溢出

obj模型400M左右，加载慢致浏览器崩溃，有解决方案吗。。。拆分模型加载还是解决不了速度问题，就放弃了，ui也表示无解，拆分是个大工程

Transformation 转换点报错

new maptalks.Transformation().transform([116.41772800168769,39.89375265237956], 15)

控制台报错跟踪发现
this.matrix 没有值
大概是什么原因导致的呢

Three.js r102 起光線渲染好像不正常了

Three.js r102 起光線渲染好像不正常了，目前暫時沒空深挖到底發生什麼事，先在此回報。

and Raycaster does not work correctly

some component support animateShow

ExtrudePolygon Bar etc support tween animation

ExtrudePolygon Bar 支持 animateShow方法，类似 linestring,polygon的animateShow

index.js layer.draw 举例参数顺序问题

how to add animate？？

me.toExtrudeGeometry is not a function error

Uncaught TypeError: me.toExtrudeGeometry is not a function
at demo.html:158
at Array.forEach ()
at ThreeLayer.threeLayer.prepareToDraw (demo.html:150)
at ThreeRenderer.t.prepareDrawContext (maptalks.min.js:6)
at ThreeRenderer.t.draw (maptalks.min.js:6)
at ThreeRenderer.r._drawAndRecord (maptalks.min.js:6)
at ThreeRenderer.r._tryToDraw (maptalks.min.js:6)
at ThreeRenderer.r.render (maptalks.min.js:6)
at r.drawLayers (maptalks.min.js:6)
at r.renderFrame (maptalks.min.js:6)

对obj引入的模型做点击事件，比如针对模型中的部分建筑

More Functional Support and Improvement of BaseObject

for

   //tooltip test
                mesh.setToolTip(levels * heightPerLevel, {
                    showTimeout: 0,
                    eventsPropagation: true,
                    dx: 10
                });

                //infowindow test
                mesh.setInfoWindow({
                    content: 'hello world,height:' + levels * heightPerLevel,
                    title: 'message',
                    animationDuration: 0,
                    autoOpenOn: false
                });

                // mesh.getInfoWindow().addTo(map);

                //event test
                ['click', 'mousemove', 'mouseout', 'mouseover', 'mousedown', 'mouseup', 'dblclick', 'contextmenu'].forEach(function (eventType) {
                    mesh.on(eventType, function (e) {
                        console.log(e.type, e);
                        // console.log(this);
                        if (e.type === 'mouseout') {
                            this.setSymbol(material);
                        }
                        if (e.type === 'mouseover') {
                            this.setSymbol(highlightmaterial);
                        }
                    });
                });

threeLayer support fire baseObject events, open ToolTip and InfoWinfow

for

/**
     * fire baseObject events
     * @param {*} e 
     */
    _identifyBaseObjectEvents(e) {
        const map = this.map || this.getMap();
        map.resetCursor('default');
        const { type, coordinate } = e;
        const baseObjects = this.identify(coordinate);
        if (type === 'mousemove') {
            if (baseObjects.length) {
                map.setCursor(`pointer`);
            }
            // mouseout objects
            const outBaseObjects = [];
            if (this._baseObjects) {
                this._baseObjects.forEach(baseObject => {
                    let isOut = true;
                    baseObjects.forEach(baseO => {
                        if (baseObject == baseO) {
                            isOut = false;
                        }
                    });
                    (isOut && outBaseObjects.push(baseObject));
                });
            }
            outBaseObjects.forEach(baseObject => {
                if (baseObject instanceof BaseObject) {
                    // reset _mouseover status
                    baseObject._mouseover = false;
                    baseObject._fire('mouseout', Object.assign({}, e, { target: baseObject, type: 'mouseout' }));
                    baseObject.closeToolTip();
                }
            });
            baseObjects.forEach(baseObject => {
                if (baseObject instanceof BaseObject) {
                    if (!baseObject._mouseover) {
                        baseObject._fire('mouseover', Object.assign({}, e, { target: baseObject, type: 'mouseover' }));
                        baseObject._mouseover = true;
                    }
                    baseObject._fire(type, Object.assign({}, e, { target: baseObject }));
                    // tooltip 
                    const tooltip = baseObject.getToolTip();
                    if (tooltip && (!tooltip._owner)) {
                        tooltip.addTo(this._innerMarker);
                    }
                    baseObject.openToolTip(coordinate);
                }
                else {
                    console.warn(baseObject, 'is not BaseObject');
                }
            });
        } else {
            baseObjects.forEach(baseObject => {
                if (baseObject instanceof BaseObject) {
                    baseObject._fire(type, Object.assign({}, e, { target: baseObject }));
                    if (type === 'click') {
                        const infoWindow = baseObject.getInfoWindow();
                        if (infoWindow && (!infoWindow._owner)) {
                            infoWindow.addTo(map);
                        }
                        baseObject.openInfoWindow(coordinate);
                    }
                } else {
                    console.warn(baseObject, 'is not BaseObject');
                }
            });
        }
        this._baseObjects = baseObjects;
        return this;
    }

完善BaseObject的功能和实现，使其的功能和maptalk.Geometry尽可以能的相同，从而提供统一的使用体验，比如on,off,setSymbol,setInfoWindow等一系列方法

图层的identify也可以有Baseobject 来提供实现

Baseobject 可以有自己的identity 的方法，针对特殊的mesh的identity 可以有自己去实现，例如fatline

因为有些mesh不好用raycaster来处理的

RayCaster doesn't work

Version: 0.6.0

Will throw:

three.min.js:862 THREE.Raycaster: Unsupported camera type.

reverse Y in camera matrix

In default, three's coordinate direction of Y axis is reversed with 2d point in map system.

Thus, y value in three needs to be scaled with -1 to fit with map point.

e.g. in biglayer

Now this is achieved by set camera's position in -z (behind the display plane)

三维建筑纹理不显示

我想在绘制的建筑上添加图片纹理，但是不显示图片，代码如下：
var loader = new THREE.TextureLoader();
loader.load("2.jpeg",function(texture){

m = new THREE.MeshPhongMaterial();

m.map = texture;

features.slice(0,1).forEach(function (g) {
    var heightPerLevel = 10;
    var levels = g.properties.levels || 1;
    

          mesh = me.toExtrudeMesh(maptalks.GeoJSON.toGeometry(g), levels * heightPerLevel*10, m);
          if (Array.isArray(mesh)) {
            scene.add.apply(scene, mesh);
          } else {
            scene.add(mesh);
          }

          
      })    


});

};
threeLayer.addTo(map);

threeLayer support identify

provide more examples of custom components

linetrip

linetrial

sprite

提供更多自定义组件的例子，比如旅行的线，拖尾的线等

for example

/**
         * custom component
         * */

        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;
            }

            hello() {
                return 'hello ' + this.getId();
            }
        }

将BaseObject 暴露出来，允许用户自己去自定义自己的组件

Model container

Model container component

Used to accommodate a model and allow consent to the operation of the model

提供一个模型容器的组件，可以用来容纳各种模型，为所有模型的操作提供统一的方法等

			scene = new THREE.Scene();

			//PointLight-点光源
            var pointLight = new THREE.PointLight( 0xdcdbdb );
            pointLight.position.copy(camera.position);
           /* pointLight.distance = 100;//距离
            pointLight.intensity = 1;//强度 默认为1*/
            pointLight.visible =true;//开关，默认开
            scene.add(pointLight);
            //AmbientLight-环境光源
            scene.add(new THREE.AmbientLight(0xffffff,0.2));// soft white light

            // SpotLight-聚光灯
            var spotLight = new THREE.SpotLight(0xf44336,1);
            spotLight.position.copy(camera.position);//位置

            spotLight.castShadow = true;//能否产生阴影 默认不能
            spotLight.shadowCameraNear = 1;//投影近点
            spotLight.shadowCameraFar = 10;//投影远点
            spotLight.shadowCameraFov = 10;//视场有多大
            spotLight.distance = 0;//距离
            spotLight.angle = 0.1;//角度
            
           //spotLight.shadowCameraVisible = true;//开启调试模式

            `scene.add(spotLight);``

灯光配置如上，在threeJs中直接使用有红色聚光灯效果，同等配置在maptalks+threeJs中无效