地图中绘制发光的线条效果

uniapp yekong 851℃

地图中绘制发光的线条效果

可以通过在地图图层上应用发光效果来实现线条的发光效果。一种常见的方法是使用地图库提供的渲染技术,如添加光晕效果或使用特定的绘制样式来实现发光效果。以下是一个示例,以Mapbox GL JS地图库为例:

// 创建地图
mapboxgl.accessToken = 'your_access_token'; // 替换为你的Mapbox access token
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-74.5, 40],
  zoom: 9
});

// 添加图层
map.on('load', function() {
  map.addLayer({
    'id': 'lines', // 图层ID
    'type': 'line', // 类型
    'source': {
      'type': 'geojson',
      'data': {
        'type': 'FeatureCollection',
        'features': [
          // 线要素数据
        ]
      }
    },
    'paint': {
      'line-width': 5, // 线宽
      'line-color': ['get', 'color'], // 通过颜色属性来显示对应的线颜色
      'line-opacity': 0.8 // 设置线的透明度
    }
  });

  // 添加发光效果
  map.addLayer({
    'id': 'glow',
    'type': 'line',
    'source': 'lines', // 设置发光图层的数据源为原始线图层
    'layout': {},
    'paint': {
      'line-width': 10, // 设置发光线的宽度,可以根据需求调整
      'line-color': 'rgba(255, 255, 0, 0.5)', // 设置发光线的颜色和透明度,可以根据需求调整
      'line-blur': 10 // 设置发光线的模糊程度,可以根据需求调整
    }
  });
});

在这个示例中,我们首先创建了一个Mapbox GL JS地图,并在地图加载完成后添加了一个名为lines的线图层。然后,我们通过调整line-opacity属性来设置原始线图层的透明度,以实现发光效果。

接下来,我们添加了一个名为glow的发光图层,将其数据源设置为原始线图层lines。通过设置发光图层的line-widthline-colorline-blur属性,可以实现发光线的宽度、颜色和模糊程度。

请注意,具体的发光效果可以根据你的需求进行调整。你可以根据地图库的文档和提供的渲染技术,调整示例中的样式属性和数值,以达到你想要的发光效果。

南京地图开放平台中使用发光线条

getLine() {
  var that = this;
  // 创建geojson对象
  var GeoJSONUtil = new GeoGlobe.Format.GeoJSONUtil();
  // 通过点方法组装点geojson串
  var geojson = GeoJSONUtil.lines(this.lineData);

  var colorArr = ["rgba(0, 244, 224, 1.00)", "rgba(245, 20, 83, 1.00)"];
  var m = 0;
  var data = geojson.data.features;
  for (var i = 0; i < data.length; i++) {
    data[i].properties = {
      "color": colorArr[m], //颜色
    };
    m++;
  }
  // 添加线数据源
  that.map.addSource('line-source', geojson);

  // 添加线图层
  that.map.addLayer({
    'id': 'lines', //图层ID
    'type': 'line', //类型
    'source': 'line-source', //数据源
    'paint': {
      'line-width': 5, //线宽
      'line-color': ['get', 'color'], //通过颜色属性来显示对应的线颜色
    }
  });
  that.map.addLayer({
    'id': 'glow',
    'type': 'line',
    'source': 'line-source', // 设置发光图层的数据源为原始线图层
    'layout': {},
    'paint': {
      'line-width': 15, // 设置发光线的宽度,可以根据需求调整
      'line-color': ['get', 'color'], // 设置发光线的颜色和透明度,可以根据需求调整
      'line-blur': 10 // 设置发光线的模糊程度,可以根据需求调整
    }
  });
},
喜欢 (2)