飞机起飞剖面航迹的航迹路线-leaflet方式

0 示例演示地址

GIS动态扩散模型-演示版 https://simu.cool/vue/#/

1 安装依赖

npm install leaflet-polylinedecorator

2 引用依赖

import "leaflet-polylinedecorator"

3 定义图层组

  options: {
    //图层组
    markerPtRenderlayerGroup: undefined,
    markerPlRenderlayerGroup: undefined,
  },

  onAdd(map) {
    this._map = map;
    //存放每组点的经纬度
    this.options.latlngs = [];
    this.options.markerPlRenderlayerGroup = L.layerGroup().addTo(this._map);
    this.options.markerPtRenderlayerGroup = L.layerGroup().addTo(this._map);
    // 初始化界面
    this._initLayout();
    return this._container;
  },

5 渲染Geojson线对象

// 标绘飞行路线和方向
  startMarkerVectorFlight(geojsonFeatures) {
    let array = [];
    for (let i = 0; i < geojsonFeatures.length; i++) {
      let geoData = geojsonFeatures[i];
      let geojsonFeature = JSON.parse(geoData.geojsonKeyPt);
      let temp = [];
      temp.push(geojsonFeature.coordinates[1]);
      temp.push(geojsonFeature.coordinates[0]);
      array.push(temp);
    }
    //3.绘制图案
    var pathPattern = L.polylineDecorator(array, {
      //添加模式
      patterns: [
        {
          //模式符号的偏移位置
          offset: 0,
          //模式符号的重复间隔
          repeat: 10,
          //符号实例
          symbol: L.Symbol.dash({
            //符号大小
            pixelSize: 5,
            //符号样式
            pathOptions: {
              //颜色
              color: 'yellow',
              //线宽
              weight: 2,
              //透明度
              opacity: 1
            }
          })
        },
        {
          //模式符号的偏移位置
          offset: '0%',
          //模式符号的重复间隔
          repeat: '20%',
          //符号实例
          symbol: L.Symbol.marker({
            //是否允许旋转
            rotate: true,
            //标记显示样式
            markerOptions: {
              //图标
              icon: L.icon({
                //图标地址
                iconUrl: './img/icon_plane.png',
                //图标位置
                iconAnchor: [16, 16]
              })
            }
          })
        }
      ]
    }).addTo(this.options.markerPlRenderlayerGroup);
  },

注意在目录中放入飞机图片。