openlayers 绘制蓝红相间的直线

OpenLayers是一个开源的JavaScript库，用于在Web上创建交互式地图和地理信息应用程序。要使用OpenLayers绘制蓝红相间的直线，你可以使用`ol.style.Stroke`和`ol.style.Fill`来定义线的边框和填充颜色。下面是一个简单的示例代码：

// 引入OpenLayers库
import { Map, View, VectorSource, LineString, Style } from 'openlayers';

// 创建地图
const map = new Map({
  target: 'map', // 在HTML中设置的地图容器id
  view: new View({
    center: [0, 0], // 地图中心坐标
    zoom: 2, // 初始缩放级别
  }),
});

// 创建矢量层
const vectorLayer = new ol.layer.Vector({
  source: new VectorSource({
    features: [
      new LineString([
        // 定义线段的坐标点，这里以两个点为例
        [-100, 0],
        [100, 0],
      ]),
    ]),
  }),
});

// 定义样式
const strokeStyle = new Style({
  stroke: {
    color: 'blue', // 首先绘制蓝色部分
    width: 5, // 线宽
  },
});
vectorLayer.setStyle(strokeStyle);

// 当地图移动或缩放时，切换到红色部分
const fillStyle = new Style({
  fill: {
    color: 'red', // 红色填充
  },
});
map.on('postrender', () => {
  if (vectorLayer.getStyle() === strokeStyle) {
    vectorLayer.setStyle(fillStyle);
  } else {
    vectorLayer.setStyle(strokeStyle);
  }
});

// 添加矢量层到地图
map.addLayer(vectorLayer);

在这个例子中，我们首先创建了一个地图、矢量源和线字符串。然后定义了两种风格：一种是蓝色边框，另一种是红色填充。`postrender`事件会在地图渲染后触发，检查当前的样式是否为蓝色，如果是，则切换到红色填充，反之亦然。