L7和mapbox结合使用的案例1

  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>
    <script src="https://unpkg.com/@antv/l7"></script>
    
  3. 开始写js代码

    // 访问令牌  这个需要自己去mapbox官网申请
    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: [17.873887, -11.202692],
        zoom: 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 point = {
                'type': 'FeatureCollection',
                'features': [
                    {
                    "geometry": {
                    "coordinates": [104.195397, 35.86166],
                        "type": "Point"
                    },
                    "properties": {
                    "name": "中国"
                     },
                     "type": "Feature"
                    },
                    {
                    "geometry": {
                    "coordinates": [67.709953, 33.93911],
                        "type": "Point"
                    },
                    "properties": {
                    "name": "阿富汗"
                     },
                     "type": "Feature"
                    },
                    {
                    "geometry": {
                    "coordinates": [17.873887, -11.202692],
                        "type": "Point"
                    },
                    "properties": {
                    "name": "安哥拉"
                     },
                     "type": "Feature"
                    },
                    {
                    "geometry": {
                    "coordinates": [-63.61667199999999, -38.416097],
                        "type": "Point"
                    },
                    "properties": {
                    "name": "阿根廷"
                     },
                     "type": "Feature"
                    },
                    {
                    "geometry": {
                    "coordinates": [47.576927, 40.143105],
                        "type": "Point"
                    },
                    "properties": {
                    "name": "阿塞拜疆"
                     },
                     "type": "Feature"
                    },
                    {
                    "geometry": {
                    "coordinates": [17.679076, 43.915886],
                        "type": "Point"
                    },
                    "properties": {
                    "name": "波斯尼亚和黑塞哥维那"
                     },
                     "type": "Feature"
                    },
             ]
            };
    // 构建点坐标
    for (const { geometry, properties } of point.features) {
        scene.on('loaded', () => {
          // 创建默认 marker
          const popup = new L7.Popup({
            offsets: [ 0, 20 ]
          }).setText(properties.name);
    
          const marker = new L7.Marker({ color: 'red'})
            .setLnglat(geometry.coordinates)
            .setPopup(popup);
    
          scene.addMarker(marker);
          marker.on('click', (ev)=>{
                  //alert(ev)
                  console.log(properties.name)
                });
        });
    }
    
    const lines=[
      {
        from: "67.709953, 33.93911",
        to: "20.168331, 41.153332"
      },
      {
        from: "17.873887, -11.202692",
        to: "-63.61667199999999, -38.416097"
      },
    ];
    
    scene.on('loaded', () => {
        scene.addImage(
            'plane',
            '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: 10,
                interval: 0.2,
                trailLength: 0.05
            })
            .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);
    })
    
    

    注:以上是基于mapbox上进行的绘制,需要自己去它们官网(https://www.mapbox.com/)申请一个accessToken,但是这个使用大于5万是要收费的,大家看情况是否采用。

    构建点坐标的时候应该把for循环写在load里面,只加载一次效果更好,上面我用的还是以前的,后面更新在改正吧,大家用的时候注意一点。

上一篇:[Data Structure] Linked List Implementation in Python


下一篇:javascript内置对象:Date