3D 等高面

Loca 3D 等高面图层，通过 shape 设置为 'isoband' 可绘制为等高面。

源代码编辑器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>等高面</title>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container" class="container"></div>
<script src="//webapi.amap.com/loca?v=1.2.0&key=您申请的key值"></script>
<script src="//a.amap.com/insight/static/distrct.js"></script>
<script>

    var map = Loca.create('container', {
        mapStyle: 'amap://styles/midnight',
        zoom: 4,
        pitch: 60,
    });

    var contourLayer = Loca.visualLayer({
        type: 'contour',
        // shape: {string}, 等高线类型 'isoband'为等高面, 'isoline'为等高线, 必填
        shape: 'isoband',
        container: map
    });

    // 设置等高线依赖的数据
    // districtData: 绘制等高线时依赖的用户数据
    contourLayer.setData(districtData, {
        // lnglat: {string}, 数据中经纬度坐标所在的列名称, 必填
        lnglat: 'lnglat',
        // value: {string}, 数据中权重数据所在的列名称, 必填
        value: 'count'
    });

    // 设置等高线属性值
    contourLayer.setOptions({
        // interpolation: 数据插值设置项，可缺省
        interpolation: {
            // step: {number}, 用于数据插值的步长，可缺省，缺省值为 500
            // step 不宜过小，过小的 step 可能会导致绘制性能严重下降
            step: 300,
            // effectRadius: {number}, 每一个原始值在插值过程中影响的范围，可缺省，缺省值为 1000
            // effectRadius / step 的值不宜过大，建议在 20 以内，可以获得良好的性能效果
            effectRadius: 1000,
        },
        // threshold: {number}, 等高线拆分步长，及按照用户提供的数据每隔 threshold 大小来绘制一条等高线
        // 可缺省，缺省值为 1
        threshold: 3,
        // smoothNumber: {number}, 等高线平滑次数，可缺省，缺省值为 2
        smoothNumber: 3,
        // style: 等高线绘制样式，可缺省
        style: {
            // height: {number}, 3D 等高线最大高度, 可缺省，缺省值为 5 * 1E4
            height: 8 * 1E4,
            // color: {Array}, 绘制等高线使用的颜色序列, 可缺省，缺省值为 ["#3656CD", "#655FE7", '#20C2E1', '#23D561', '#9CD523', '#F1E229', '#FFBF3A', '#FB8C00', '#FF5252', "#BC54E2", "#FF6FCE"]
            color: ["#074050", "#105965", "#217a79", "#4c9b82", "#6cc08b", "#97e196", "#d3f2a3"]
        }
    });

    contourLayer.render();
</script>
</body>
</html>

控制台

清空

返回顶部示例中心常见问题智能客服公众号
二维码