L7和mapbox结合使用的案例1

2021-10-20 11:02:21 阅读：355 来源： 互联网

标签：map const 案例 coordinates L7 mapbox type properties

先在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

L7和mapbox结合使用的案例1