美文网首页
mapbox画点线面

mapbox画点线面

作者: 姜治宇 | 来源:发表于2023-05-05 14:26 被阅读0次
  drawGeometry(obj: any) {

    //画点线面
    const map = this.mapboxService.map;
    const key = obj.id;
    const geometry = obj.geometry;
    const source: any = map.getSource(key);
    const layer: any = map.getLayer(key);
    // 数据源
    const sourceData: any = {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          properties: {},
          geometry: geometry,
        },
      ],
    };
    map.addSource(key, {
      type: 'geojson',
      data: sourceData,
    });
    switch (geometry.type) {
      case 'LineString':
        map.addLayer({
          id: key,
          type: 'line',
          source: key,
          layout: {},
          paint: {
            'line-color': '#fbb03b', //线颜色
            'line-width': 2.5, // 线宽
          },
        });
        break;
      case 'Point':
        map.addLayer({
          id: key,
          type: 'circle',
          source: key,
          paint: {
            'circle-radius': 6, //圆半径
            'circle-color': '#fbb03b', //圆颜色
          },
        });
        break;
      case 'Polygon':
        map.addLayer({
          id: key,
          type: 'fill',
          source: key,
          layout: {},
          paint: {
            'fill-color': '#fbb03b', //面颜色
            'fill-opacity': 0.7, // 面透明度
          },
        });
        break;
    }
  }

相关文章

网友评论

      本文标题:mapbox画点线面

      本文链接:https://www.haomeiwen.com/subject/hufqsdtx.html