线

接下来我们使用LGeoJSONLayer看看线条的渲染。

绘制国界线

同样的，我们按照图层=数据+样式的思路，将线数据绘制到地图上。

创建数据解析器

线条的数据类型有多种，对于常见的shp格式的，我们可以利用shp.js这个库将数据转换为geojson，然后再使用GeoJSONFeatureProvider数据解析器构建provider。如果是type类型为line的geojson，可以直接使用GeoJSONFeatureProvider数据解析器构建provider。

const json = await getJSON("public/demos/data/china.json"); //获取数据
const provider = new GeoJSONFeatureProvider(json);          //该数据是geojson类型，所以使用GeoJSONFeatureProvider构建provider

创建样式

这里我们设置了一个线条的样式，颜色橙色，线宽2px

const style: IFeatureStyleOptions = {
  polyline: {                                  //线样式
    color: "orange",                           //线颜色：橙色
    width: 2                                   //线宽度：2
  }
}

创建图层

有了数据源和样式，我们就可以创建图层了，并把图层加载到地图上。

const layer = new LGeoJSONLayer({        
  name: "国界",                                   //图层name
}).setDataSource(provider).setDrawOptions(style);//图层设置数据源，设置绘制样式
map.addLayer(layer);                             //图层添加到地图上

现在就可以在地图上看到我们的国界线了

模拟铁路

我们再通过两个图层叠加模拟铁路的效果

getJSON("public/demos/data/railway.json").then(json => {   
  const provider = new GeoJSONFeatureProvider(json); //该数据是geojson类型，所以使用GeoJSONFeatureProvider
  const style: IFeatureStyleOptions = {
    polyline: {                                      //线样式
      color: "rgba(203, 203, 203, 1)",               //线颜色
      width: 2                                       //线宽度：2
    }
  }
  //创建了一个浅色线条的图层
  const layerBottom = new LGeoJSONLayer().setDrawOptions(style).setDataSource(provider);
  //将图层添加到地图上
  map.addLayer(layerBottom);
  const topStyle: IFeatureStyleOptions = {
    polyline: {                                     //线样式
      color: "rgba(119, 119, 119, 1)",              //线颜色
      dashArray: [10, 10],                          //线型：实线部分和白线部分的大小依次是为10,10,10,10...
      width: 2                                      //线宽度：2
    }
  }
  //创建LGeoJSONLayer图层，并设置数据源和样式
  const layerTop = new LGeoJSONLayer().setDrawOptions(topStyle).setDataSource(provider);
  //将图层添加到地图上，是一个深色虚线线条图层放置在浅色线条图层的上方
  map.addLayer(layerTop);
})

线标签

线条样式的配置中也同样支持添加文本标签和图片标签

getJSON("public/demos/data/rivers.json").then(json => {
  const provider = new GeoJSONFeatureProvider(json);
  const style: IFeatureStyleOptions = {
    polyline: {                                          //线条样式
      label: [                                           //线条标签样式
        {
          text: {                                        //线条标签文本样式
            data: "$NAME",                               //文本内容：数据源属性字段NAME
            backColor: "rgba(255,0,0,0.6)",              //文本背景色
            backPadding: [2, 2],                         //文本背景色留边
            backRoundRect: true,                         //文本背景色使用圆角矩形
            color: "white",                              //文本颜色：白色
            font: "12px Arial",                          //文本字体
            backStrokeColor: new Spectra("yellow"),      //文本背景色描边颜色
            backStrokeWidth: 2,                          //文本背景色描边宽度
            backStrokeDashArray: (feature) => {          //文本背景色的描边线型
              if (feature.properties["SYSTEM"] && feature.properties["SYSTEM"].length > 0) {
                return [10, 10];
              } else {
                return [];
              }
            },
            backShadowColor: "gray"                      //文本背景色阴影的颜色
          }
        }
      ]
    }
  }
  const layer = new LGeoJSONLayer({
    name: "河流"                                         //图层名称
  }).setDrawOptions(style).setDataSource(provider);     //图层设置样式和数据源
  map.addLayer(layer);
});

完整示例