使用openlayers画一根线条

OpenLayers是一个强大的开源JavaScript库，用于构建交互式的Web地图应用。要使用OpenLayers在地图上画一条线（Polyline），你可以按照以下步骤操作：

1. 引入OpenLayers库：首先在HTML文件中引入OpenLayers的CDN链接，或者本地包含其文件。

<script src="https://cdn.jsdelivr.net/npm/openlayers@6.6.1/dist/OpenLayers.js"></script>

2. 初始化地图：创建一个`<div>`容器，并设置地图的视口大小。

<div id="map" style="width: 100%; height: 500px;"></div>

3. 创建地图实例：在JavaScript中，初始化地图并设置投影和分辨率。

const map = new ol.Map({
  target: 'map',
  view: new ol.View({
    center: [0, 0], // 设置中心点
    zoom: 2,       // 设置初始缩放级别
    projection: 'EPSG:4326', // 使用WGS84坐标系
  }),
});

4. 添加在线层或地形数据：通常我们会添加一个WMS或TMS服务作为底图。

const layer = new ol.layer.Tile({
  source: new ol.source.OSM(), // 或者使用其他在线地图服务
});
map.addLayer(layer);

5. 创建线条矢量层：使用`ol.format.GeoJSON`将线条数据转换为OpenLayers可以理解的格式。

const lineFeature = {
  type: 'Feature',
  geometry: {
    type: 'LineString',
    coordinates: [[0, 0], [10, 10]], // 线条起点和终点坐标
  },
};

const lineSource = new ol.source.Vector({
  url: 'data/lines.geojson', // 如果是本地文件，路径改为本地
  format: new ol.format.GeoJSON(),
  features: [ol.format.GeoJSON.writeFeature(lineFeature)],
});

const lineLayer = new ol.layer.Vector({
  source: lineSource,
  style: new ol.style.Stroke({
    color: 'blue',
    width: 2,
  }),
});
map.addLayer(lineLayer);