openlayers 路线规划 高德坐标转wgs84 wgs84转天地图

最终实现效果

在https://blog.csdn.net/qq_36287830/article/details/136321365改善而来的 需要进行坐标转换 不转换你画的线和实际数据是无法一一对应的 会出现偏移

关键代码 模拟请求后获取到数据场景

    fetch('./a.json').then(async (res) => {
    //等待数据格式化为Json
            let 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数据
文件有点大 绑了个资源 文章顶上看 或者https://gitee.com/xia-ci/gaode-map-data