L7和mapbox结合使用的案例2

1. 先在html文件中准备一个定义了高宽的 DOM 容器

   <div id="map" style="width: 100%;height:900px;"></div>
   

2. 引入js

   <!-- mapbox-gl -->
   <link href="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css" rel="stylesheet">
   <script src="https://api.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
   <!-- chinese-->
   <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v0.10.0/mapbox-gl-language.js'></script>
   <!-- 空间分析和统计-->
   <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
   <!-- L7-->
   <script src="https://unpkg.com/@antv/l7"></script>
   

3. 开始写js代码

        mapboxgl.accessToken = 'XXXX';
        mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v10',
            //center: [104.195397, 35.86166],
            center: [47.481766,29.31166],
            zoom: 1.1
        });
        // 修改地图语言为中文
        const geocoder = new MapboxLanguage({
            defaultLanguage: 'zh', // Specify the language as German.
            });
        map.addControl(geocoder);
        // 取消双击缩放
        map.doubleClickZoom.disable();
   
        const scene = new L7.Scene({
          id: 'map',
          map: new L7.Mapbox({
            mapInstance: map,
          }),
        });
        // 构建点数据格式
        const points=[
     {
       value: 0.39,
       info: "英国 入境金额：$0.39万, 出境金额：$474.14万",
       name: "英国",
       lnglat: [-3.435973,55.378051],
     },
     {
       value: 693.53,
       info: "中国香港 入境金额：$693.53万, 出境金额：$1742.08万",
       name: "中国香港",
       lnglat:[ 114.066662,22.588638],
     },
   ];
        // 线数据格式
        const lines=[
     {
       from: "-3.435973,55.378051",
       to: "114.066662,22.588638"
     },
     {
       from: "17.873887, -11.202692",
       to: "-63.61667199999999, -38.416097"
     },
   ];
   
        // 构建点坐标
        scene.on('loaded', () => {
            // 标记点
           for (const { name, info,lnglat } of points) {
              // 创建默认 marker
              const popup = new L7.Popup({
                offsets: [ 0, 20 ]
              }).setText(info);
   
              const el = document.createElement('img');
                //  自己指定的图片路径
                el.src = '/static/img/坐标.png';
                el.style.height='30px';
                el.style.weight='30px';
   
              const marker = new L7.Marker({element: el})
                .setLnglat(lnglat)
                .setPopup(popup);
              scene.addMarker(marker);
              marker.on('click', (ev)=>{
                  //alert(ev)
                  console.log(name);
                });
            }
   
            // 流线
           scene.addImage(
                'plane',
                '/static/img/飞机.png'
               // 'https://gw.alipayobjects.com/zos/bmw-prod/0ca1668e-38c2-4010-8568-b57cb33839b9.svg'
            );
            const flydata = eval(lines).map(item => {
                // @ts-ignore
                const latlng1 = item.from.split(',').map(e => {
                    return e * 1;
                });
                // @ts-ignore
                const latlng2 = item.to.split(',').map(e => {
                    return e * 1;
                });
                return {coord: [latlng1, latlng2]};
            });
   
           console.log(flydata);
           const flyLine = new L7.LineLayer({blend: 'normal'})
                .source(flydata, {
                    parser: {
                        type: 'json',
                        coordinates: 'coord'
                    }
                })
                .color('#ff6b34')
                // 飞机
                .texture('plane')
                .shape('arc')
                // .shape('arc')
                .size(20)
                // .active(true)
                .animate({
                    duration: 2,//动画时间 单位(s)秒
                    interval: 0.3,//轨迹间隔, 取值区间 0 - 1
                    trailLength: 0.1//轨迹长度 取值区间 0 - 1
                })
                .style({
                    textureBlend: 'replace',
                    lineTexture: true, // 开启线的贴图功能
                    //iconStep: 10, // 设置贴图纹理的间距
                    opacity: 1
                });
   
           const flyLine2 = new L7.LineLayer()
                .source(flydata, {
                    parser: {
                        type: 'json',
                        coordinates: 'coord'
                    }
                })
                .color('#ff6b34')
                .shape('arc')
                // .shape('arc')
                .size(1)
                // .active(true)
                .style({
                    //lineType: 'dash',
                    dashArray: [5, 5],
                    opacity: 0.7
                });
           scene.addLayer(flyLine2);
           scene.addLayer(flyLine);
   
        });
   

   注：需要自己指定accessToken和img的src路径