地图飞行线

最新推荐文章于 2024-05-21 23:21:19 发布

垫底菜鸡

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量126

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_52600282/article/details/132312149

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>MapVGL</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<!--    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=GtoLOeVgIGGxi5QmrPMuRV43rZtqtz9Z"></script>-->
    <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=GtoLOeVgIGGxi5QmrPMuRV43rZtqtz9Z"></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.min.js"></script>
    <script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map_container {
            width: 100%;
            height: 1000px;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="map_container"></div>
<script>
    let bmapgl = new BMapGL.Map('map_container'),
        point= new BMapGL.Point(106.706725,26.591632);
    bmapgl.centerAndZoom(point,10);
    bmapgl.setMapStyleV2({
        styleId:'f0efb3cdf7033af9d32db189cb49eb63'
    });
    bmapgl.enableScrollWheelZoom(true);
    //倾斜角度
    bmapgl.setTilt(73);

    //创建炫光处理通道  在图层管理器View中，传入effects参数使用
    let bright  = new mapvgl.BrightEffect({
        threshold: 0,
        blurSize: 1,
        clarity: 1
    })
    //视图管理添加地图
    var view=new mapvgl.View({
        map:bmapgl,
        effects:[bright]
    });

    //配置标记点参数
    var layer = new mapvgl.IconLayer({
        width: 15,
        height: 15,
        icon: '../assets/img/bjd.png',
        enablePicked: true, // 是否可以拾取
        selectedIndex: -1, // 选中项
        selectedColor: '#0078d4', // 选中项颜色
        autoSelect: true, // 根据鼠标位置来自动设置选中项
        onClick: (e) => { // 点击事件
            console.log(e)
        },
    });
    //标记点坐标
    var data=[{
        geometry:{
            type:'Point',
            coordinates:[106.706725,26.591632]
        }
    }];
    //设置标记点坐标
    layer.setData(data);
    //视图管理中添加标记点
    view.addLayer(layer);

    //生成3D曲线 curve曲线
    var curve=new mapvgl.BezierCurve({
        start:[106.706725,26.591632],
        end:[106,26.40235]
    })
    //获取3D曲线的分段部分
    let curdata=curve.getPoints();
    //生成飞行线 track 轨迹
    var track = new mapvgl.SimpleLineLayer({
        color: 'rgba(255, 153, 0, 0.6)',
        textureColor: 'rgba(255, 153, 0, 0.6)',
        textureWidth: 3,
        textureLength: 100,
        data: [{
            geometry: {
                type: 'LineString',
                coordinates: curdata
            }
        }]
    });
    //试图中添加飞行线
    view.addLayer(track)


    //曲线跑动蝌蚪  tadpole
    var tadpole = new mapvgl.LineTripLayer({
        color: 'rgb(255, 255, 204)', // 飞线动画颜色
        step: 0.3,
        data:[{
            geometry:{
                type: 'LineString',
                coordinates: curdata
            }
        }]
    });
    view.addLayer(tadpole);
</script>

</body>
</html>



<!--// 1. 创建地图实例-->
<!--var bmapgl = new BMapGL.Map('map_container');-->
<!--var point = new BMapGL.Point(106.706725, 26.591632);-->
<!--//添加标点-->
<!--let marker = new BMapGL.Marker(point)-->
<!--bmapgl.addOverlay(marker)-->
<!--bmapgl.centerAndZoom(point, 15);-->
<!--bmapgl.enableScrollWheelZoom(true);-->
<!--bmapgl.setTilt(40);-->
<!--bmapgl.setHeading(0);-->

<!--var view = new Mapvgl.View({map: bmapgl});-->

<!--var data=[];-->
<!--data.push({-->
<!--geometry:{-->
<!--type:'LineString',-->
<!--coordinates:curve-->
<!--}-->
<!--})-->


<!--var curve = new Mapvgl.BezierCurve({-->
<!--start: [106.706725, 26.591632],-->
<!--end: [114.86580246051246, 40.500658093946514]-->
<!--});-->
<!--var curvedata= curve.getPoints(curve)-->
<!--var layer = new Mapvgl.FlyLineLayer({-->
<!--color: 'rgba(50, 50, 200, 1)',-->
<!--textureColor:'rgba(50,50,200,1)',-->
<!--textureWidth:10,-->
<!--textureLength:100,-->
<!--});-->
<!--layer.setData(curvedata);-->
<!--view.addLayer(layer)-->