首页 > 其他分享> > L7和mapbox结合使用的案例1

L7和mapbox结合使用的案例1

2021-10-20 11:02:21 作者：互联网

先在html文件中准备一个定义了高宽的 DOM 容器
```
<div id="map" style="width: 100%;height:900px;"></div>
```

引入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>

开始写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里面，只加载一次效果更好，上面我用的还是以前的，后面更新在改正吧，大家用的时候注意一点。

标签：map,const,案例,coordinates,L7,mapbox,type,properties
来源： https://blog.csdn.net/weixin_44141284/article/details/120829641