<!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>Points texture 带纹理的点</title>
<meta name="description" content="为 Points 类型添加纹理。使用 textures、vertexUVs 和 textureIndices 属性。">
<style>
html, body, #container {
margin: 0; padding: 0; width: 100%; height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D"></script>
<script>
var map = new AMap.Map('container', {
viewMode: '3D',
features: ['road', 'bg'],
// mapStyle: 'amap://styles/whitesmoke',
zooms: [3, 20],
zoom: 13
});
var object3Dlayer = new AMap.Object3DLayer({
zIndex: 110,
opacity: 1
});
map.add(object3Dlayer);
function lnglatToG20(lnglat) {
lnglat = map.lngLatToGeodeticCoord(lnglat);
lnglat.x = AMap.Util.format(lnglat.x, 3);
lnglat.y = AMap.Util.format(lnglat.y, 3);
return lnglat;
}
var coords = [
[116.397477, 39.908692], // 天安门
[116.410886, 39.881949], // 天坛
[116.464332, 39.915299], // 央视
];
// 纹理图片的长宽尺寸要求为:2的N次方个像素。
// 因此这里的图片尺寸为 256px * 256px,也可以是1024*256等尺寸。
var imgs = [
'https://a.amap.com/jsapi_demos/static/demo-center/3d_texture_tiananmen_256.png',
'https://a.amap.com/jsapi_demos/static/demo-center/3d_texture_tiantan_256.png',
'https://a.amap.com/jsapi_demos/static/demo-center/3d_texture_cctv_256.png'
];
var points3D = new AMap.Object3D.Points();
points3D.transparent = true;
var geometry = points3D.geometry;
for (var i = 0, len = imgs.length; i < len; i++) {
var img = imgs[i];
// 设置纹理贴图,数组中可以放入图片 url 和 canvas 对象,图片要符合宽高为 2的N次方 * 2的N次方个像素。
// 纹理个数最多为8个,如果超出8个需要自行使用 CSS sprites 技术整合图片,并通过 vertexUVs 定位图片位置。
points3D.textures.push(img);
}
for (var p = 0; p < coords.length; p += 1) {
var center = lnglatToG20(coords[p]);
geometry.vertices.push(center.x, center.y, 0);
geometry.pointSizes.push(80);
geometry.vertexColors.push(p * 0.029, p * 0.015, p * 0.01, 0.5);
geometry.pointAreas.push(0, 0, 1, 1);
// 每两个元素描述一个顶点的纹理坐标信息,纹理坐标以图片左上角为原点。分别是左上角和右下角。
geometry.vertexUVs.push(0, 0, 1, 1);
// 每个元素描述一个顶点的纹理索引信息,多纹理时使用,取值范围[0-7]。单纹理或者无纹理时不需要设值。
geometry.textureIndices.push(p);
}
// points3D.borderColor = [0.6, 0.8, 1, 1];
// points3D.borderWeight = 3;
object3Dlayer.add(points3D);
</script>
</body>
</html>
订阅评论
0 评论