在https://blog.csdn.net/qq_36287830/article/details/136321365改善而來的 需要進行坐標轉換 不轉換你畫的線和實際數據是無法一一對應的 會出現偏移

關鍵代碼 模擬請求后獲取到數據場景

    fetch('./a.json').then(async (res) => {//等待數據格式化為Jsonlet json = await res.json()//新建圖層組 管理線圖層let pathLayerGroup = new ol.layer.Group({name: "path"})//數據遍歷路線json.data.path_list.forEach((item, ind) => {//新建圖層 為每一根新建一個圖層let lineLayer = new ol.layer.Vector({//數據源先為空source: new ol.source.Vector(),//結合前面的話 這里需要設置層級 否則看不到 給個合適的值就可以zIndex: 666,//樣式style: new ol.style.Style({//填充顏色stroke:new ol.style.Stroke({color: ind == 0 ? '#459c50' : '#459c5066', // 根據渲染順序 決定主線路 設置線條顏色width: 10 // 設置線條寬度}),}),name: "path" + ind//給個名字 后面為點擊事件做準備})//先將數據用flatMap方法展開層級 然后遍歷for (let path of item.path.flatMap(ite => ite.segments)) {let line = []//需要對字符串數據轉為數組let coor = JSON.parse(path.coor)//xyxy數據是這樣排列的 所以需要步進2取值for (var j = 0; j < coor.length; j += 2) {//數據回填為坐標值 先轉為wgs84后再使用line.push(gcj02towgs84(coor[j], coor[j + 1]));}//將線添加進去lineLayer.getSource().addFeature(new ol.Feature({geometry: new ol.geom.LineString(line)}))}//將處理好的圖層添加到圖層組pathLayerGroup.getLayers().push(lineLayer)})//渲染圖層組map.addLayer(pathLayerGroup);//監聽渲染完成事件map.once('rendercomplete', function () {// 按坐標生成點const pointA = turf.point([112.551049, 37.870552]);const pointB = turf.point([116.397604, 39.907694]);// 計算中心點const midPoint = turf.midpoint(pointA, pointB);//計算縮放級別const zoomLevel = Math.round(Math.log2(turf.distance(pointA, pointB)));//動畫 修改位置map.getView().animate({zoom: zoomLevel, duration: 1000});map.getView().animate({center: midPoint.geometry.coordinates, duration: 1000});});//監聽點擊事件map.on('click', (event) => {//遍歷所有的點擊map.forEachFeatureAtPixel(event.pixel, (feature, layer) => {//只可以操作點圖層為中含有path的路徑圖層if (layer.get('name').includes('path') && feature) {//循環所有的路徑圖層for (const featureElement of pathLayerGroup.getLayersArray()) {//如果和點擊的是同一個圖層 則修改樣式if (layer.get('name') == featureElement.get('name')) {layer.getStyle().getStroke().setColor('#459c50')} else {//否則還原樣式featureElement.getStyle().getStroke().setColor('#459c5066')//還原后調用修改完成 重新渲染featureElement.changed()}}//調用圖層的修改完成方法 重新渲染layer.changed()}});//禁止冒泡event.stopPropagation();})})

下面坐標轉換文件

var gcj02towgs84 = function (lng, lat) {var a = 6378245.0;var ee = 0.00669342162296594323;if (out_of_china(lng, lat)) {return [lng, lat];} else {var dlat = transformlat(lng - 105.0, lat - 35.0);var dlng = transformlng(lng - 105.0, lat - 35.0);var radlat = lat / 180.0 * Math.PI;var magic = Math.sin(radlat);magic = 1 - ee * magic * magic;var sqrtmagic = Math.sqrt(magic);dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * Math.PI);dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * Math.PI);var mglat = lat + dlat;var mglng = lng + dlng;return [lng * 2 - mglng, lat * 2 - mglat];}
};var transformlat = function (lng, lat) {var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0;ret += (20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin(lat / 3.0 * Math.PI)) * 2.0 / 3.0;ret += (160.0 * Math.sin(lat / 12.0 * Math.PI) + 320 * Math.sin(lat * Math.PI / 30.0)) * 2.0 / 3.0;return ret;
};var transformlng = function (lng, lat) {var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0;ret += (20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin(lng / 3.0 * Math.PI)) * 2.0 / 3.0;ret += (150.0 * Math.sin(lng / 12.0 * Math.PI) + 300.0 * Math.sin(lng / 30.0 * Math.PI)) * 2.0 / 3.0;return ret;
};var out_of_china = function (lng, lat) {return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
};

最后模擬的json數據
文件有點大 綁了個資源 文章頂上看