外贸网站有哪些,wordpress 站点群,来宾住房与城乡建设网站,新泰做网站在https://blog.csdn.net/qq_36287830/article/details/136321365改善而来的 需要进行坐标转换 不转换你画的线和实际数据是无法一一对应的 会出现偏移 关键代码 模拟请求后获取到数据场景 fetch(./a.json).then(async (res) {//等待数据格式化为Jsonlet json await res.…在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数据 文件有点大 绑了个资源 文章顶上看
