我来帮你梳理下问题并给出修正方案，你的核心需求是同时展示原始GPS轨迹和简化后的轨迹，目前代码里有几个关键问题需要调整：

首先明确：可以原地修改要素的几何，但如果要同时保留原始轨迹和简化轨迹，必须复制要素并修改副本的几何，再用新图层展示简化版——因为原地修改会覆盖原始几何，无法同时显示两者。

你的代码核心错误 #

你在创建简化轨迹的数据源时写了var simpleSource = new GeoJSON(simpleGeo);，这是不对的：GeoJSON是OpenLayers的格式解析类，不是数据源类，正确的做法是把简化后的几何赋值给新的Feature，再用VectorSource来承载这个Feature。另外你注释了map.addLayer(vectorLayer);，导致原始轨迹图层没有被添加到地图上，需要取消注释。

修正后的完整代码 #

我标注了关键修改点，同时优化了样式区分和视图适配：

import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { defaults as defaultInteractions, Modify, Select } from 'ol/interaction';

$(document).on('turbolinks:load', function() {
  var image = new CircleStyle({
    radius: 5,
    fill: null,
    stroke: new Stroke({ color: 'red', width: 1 })
  });
  
  // 区分原始/简化轨迹的样式：原始用绿色，简化用红色
  var styles = {
    'Point': new Style({ image: image }),
    'LineString': new Style({ stroke: new Stroke({ color: 'green', width: 2 }) }),
    'MultiLineString': new Style({ stroke: new Stroke({ color: 'green', width: 2 }) }),
    'MultiPoint': new Style({ image: image }),
    'MultiPolygon': new Style({ stroke: new Stroke({ color: 'yellow', width: 1 }), fill: new Fill({ color: 'rgba(255, 255, 0, 0.1)' }) }),
    'Polygon': new Style({ stroke: new Stroke({ color: 'blue', lineDash: [4], width: 3 }), fill: new Fill({ color: 'rgba(0, 0, 255, 0.1)' }) }),
    'GeometryCollection': new Style({ stroke: new Stroke({ color: 'magenta', width: 2 }), fill: new Fill({ color: 'magenta' }), image: new CircleStyle({ radius: 10, fill: null, stroke: new Stroke({ color: 'magenta' }) }) }),
    'Circle': new Style({ stroke: new Stroke({ color: 'red', width: 2 }), fill: new Fill({ color: 'rgba(255,0,0,0.2)' }) })
  };
  
  // 简化轨迹专属样式
  var simpleStyle = new Style({
    stroke: new Stroke({ color: 'red', width: 2 })
  });

  var styleFunction = function(feature) {
    return styles[feature.getGeometry().getType()];
  };

  // 原始轨迹数据源与图层
  var vectorSource = new VectorSource({
    format: new GeoJSON(),
    url: 'v1/track?journey={"last"}'
  });
  var vectorLayer = new VectorLayer({
    source: vectorSource,
    style: styleFunction
  });

  var select = new Select({ wrapX: false });
  var modify = new Modify({ features: select.getFeatures() });

  var map = new Map({
    interactions: defaultInteractions().extend([select, modify]),
    layers: [
      new TileLayer({ source: new OSM() }),
      vectorLayer // 直接将原始图层加入地图初始化配置
    ],
    target: 'map',
    view: new View({ center: [0, 0], zoom: 2 })
  });

  // 加载并处理简化轨迹
  $.getJSON('v1/track?journey={"last"}', function(data) {
    // 读取原始轨迹要素
    var originalTrack = (new GeoJSON()).readFeature(data);
    // 执行几何简化
    var simplifiedGeometry = originalTrack.getGeometry().simplify(0.01);
    
    // 复制原始要素，避免修改原始数据
    var simplifiedTrack = originalTrack.clone();
    // 给副本设置简化后的几何
    simplifiedTrack.setGeometry(simplifiedGeometry);

    // 创建简化轨迹的数据源
    var simpleSource = new VectorSource({
      features: [simplifiedTrack]
    });

    // 创建简化轨迹图层并添加到地图
    var simpleLayer = new VectorLayer({
      source: simpleSource,
      style: simpleStyle
    });
    map.addLayer(simpleLayer);

    // 自动适配地图视图到轨迹范围
    var extent = originalTrack.getGeometry().getExtent();
    map.getView().fit(extent, { padding: [50, 50, 50, 50], duration: 1000 });
  });
});

关键修改说明 #

1. 样式区分：给简化轨迹单独设置红色样式，和原始绿色轨迹清晰区分
2. 正确创建数据源：用VectorSource承载复制后的要素，替代错误的GeoJSON类用法
3. 要素复制而非原地修改：使用originalTrack.clone()创建副本，保证原始要素的几何不受影响，实现双轨迹同时展示
4. 自动视图适配：添加map.getView().fit()让地图自动缩放到轨迹范围，无需手动调整
5. 图层初始化优化：在地图初始化时直接加入原始图层，避免后续手动调用addLayer

关于原地修改几何的补充 #

如果你的需求不需要保留原始轨迹，确实可以原地修改要素几何，代码示例如下：

// 遍历原始数据源中的要素并修改几何
vectorSource.getFeatures().forEach(function(feature) {
  var simplifiedGeom = feature.getGeometry().simplify(0.01);
  feature.setGeometry(simplifiedGeom);
});

但这种方式会直接替换原始几何，无法同时展示原始和简化轨迹，所以不适合你的当前需求。

内容的提问来源于stack exchange，提问作者MarcoK