代码拉取完成,页面将自动刷新
A maptalks Layer to render with THREE.js
npm install maptalks.three
.https://unpkg.com/maptalks.three/dist/maptalks.three.min.js
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.97.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.DirectionalLight(0xffffff);
light.position.set(0, -10, -10).normalize();
scene.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.toExtrudeMesh(maptalks.GeoJSON.toGeometry(g), num / 4E2, m);
if (Array.isArray(mesh)) {
scene.add.apply(scene, mesh);
} else {
scene.add(mesh);
}
});
};
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);
IE 11, Chrome, Firefox, other modern and mobile browsers that support WebGL;
ThreeLayer
is a subclass of maptalks.CanvasLayer and inherits all the methods of its parent.
Constructor
new maptalks.ThreeLayer(id, options)
We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.
The only source file is index.js
.
It is written in ES6, transpiled by babel and tested with mocha and expect.js.
$ npm install
$ npm run dev
$ npm run build
$ npm run lint
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。