带纹理的点

为 Points 类型添加纹理。使用 textures、vertexUVs 和 textureIndices 属性。

源代码编辑器

复制

运行

还原

          <!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="http://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 = [
        'http://a.amap.com/jsapi_demos/static/demo-center/3d_texture_tiananmen_256.png',
        'http://a.amap.com/jsapi_demos/static/demo-center/3d_texture_tiantan_256.png',
        'http://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>
        

控制台

清空

示例
中心常见
问题智能
客服