Comments (6)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>自定义三维图层</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
#container {
width: 100%;
height: 100%;
}
/* #container2 {
width: 50%;
height: 100%;
background-color: #c90;
}
#container2 canvas {
width: 100%;
height: 100%;
} */
</style>
</head>
<body style="display: flex;">
<div id="container"></div>
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.138.3/three.min.js"></script> -->
<script>
window.Three = THREE
</script>
<script src='https://unpkg.com/@antv/l7'></script>
<script src='https://unpkg.com/@antv/l7-three'></script>
<script type="text/javascript">
console.log(THREE)
const l7Scene = new L7.Scene({
id: 'container',
map: new L7.BaiduMap({
style: 'dark',
// token: '',
center: [110.770672, 34.159869],
pitch: 45,
}),
});
l7Scene.registerRenderService(L7Three.ThreeRender);
// 3、构建 threejs 图层对象并在其中添加 threejs 构建的网格对象
const threeJSLayer = new L7Three.ThreeLayer({
onAddMeshes: (threeScene, layer) => {
threeScene.add(new THREE.AmbientLight(0xffffff));
const sunlight = new THREE.DirectionalLight(0xffffff, 0.25);
sunlight.position.set(0, 80000000, 100000000);
sunlight.matrixWorldNeedsUpdate = true;
threeScene.add(sunlight);
let center = l7Scene.getCenter();
let cubeGeometry = new THREE.BoxGeometry(10000, 10000, 10000);
let cubeMaterial = new THREE.MeshNormalMaterial();
let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
layer.setObjectLngLat(cube, [center.lng + 0.05, center.lat], 0);
threeScene.add(cube);
},
})
.animate(true);
// 4、添加 threejs 图层对象
l7Scene.addLayer(threeJSLayer);
</script>
</body>
</html>
from l7.
hi @msdog, welcome!
from l7.
Hi @msdog, Please star this repo if you find it useful! Thanks ⭐!
你好 @msdog。如果该仓库对你有用,可以 star 一下,感谢你的 ⭐!
from l7.
请提供完整示例,如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// xxx
</script>
</body>
</html>
from l7.
腾讯地图也一样
from l7.
https://github.com/antvis/L7/blob/master/packages/three/src/core/threeRenderService.ts#L68-L79
百度、腾讯、天地图 暂未支持与 THREE 相机同步
from l7.
Related Issues (20)
- dumi 升级 2.3 后官网部分页面访问失败 HOT 1
- 源码看起来吃力 HOT 3
- l7加载mapbox自定义地图报错 HOT 4
- 源码运行报错 HOT 3
- L7Draw 使用新版 Device 绘制数据 WebGL 警告
- TypeError: Cannot read properties of undefined (reading 'POLYGON_CLIPPING_MAX_QUEUE_SIZE'出现这个问题 HOT 4
- 线样式 HOT 2
- 使用 MapLibre底图,新增marker 拖动报错 HOT 3
- 聚合数字显示错误 HOT 1
- vue3初始创建地图报错 HOT 6
- 无地图模式移动Marker出错 HOT 4
- 格网热力、蜂巢热力、3D热力图、3D格网热力、3D蜂巢热力,不透明度设置为0不生效 HOT 2
- G-Device 渲染引擎下,多图层拾取变慢 HOT 1
- ImageLayer的source访问跨域图片 HOT 6
- WMS服务加载GeoServer的图片类型会出现地图平铺的问题 HOT 1
- 地图初始化不显示 HOT 4
- 如何实现点击某个控件时禁用其他控件,或者可以直接切换到其他控件 HOT 2
- 使用Map时会导致点击控件同时也点击了底下的layer,同时触发控件和layer的click事件 HOT 7
- 希望增加Marker的显示隐藏操作方法 HOT 5
- 格网热力图等,设置angle,coverage等参数不及时更新 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from l7.