弧度连接线

两地直接连线，弧度数可依赖数据字段

源代码编辑器

<!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"></div>
<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值&"></script>
<script src="//webapi.amap.com/loca?v=1.3.2&key=您申请的key值"></script>
<script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>
<script>

    var map = new AMap.Map('container', {
        mapStyle: 'amap://styles/db9efe6a1745ac24b7269b862f359536',
        features: ['bg', 'road'],
        center: [116.40866,39.87596],
        zoom: 11,
        pitch: 66,
        rotation: 45,
        viewMode: '3D'
    });

    var layer = new Loca.LinkLayer({
        map: map,
        fitView: false,
    });
    
    
    $.get('//a.amap.com/Loca/static/mock/home_comp_line.json', function (home_comp_line) {
        layer.setData(home_comp_line.slice(0,500), {
            lnglat: 'lnglat'
        });
    
        layer.setOptions({
            blendMode: 'lighter',
            style: {
                // 曲率 [-1, 1] 区间
                curveness: function(data) {
                  if(data.value.dis < 100){
                    return 0.07;
                  } else if(data.value.dis < 300){
                    return 0.05;
                  } else if(data.value.dis < 500){
                    return 0.02;
                  }  else if(data.value.dis < 700){
                    return 0.01;
                  } else {
                    return 0.005;
                  }
                },
                opacity: 0.8,
                color: '#5DFBF9'
            }
        });
    
        layer.render();
    });
</script>
</body>
</html>

控制台

清空

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