// edge 3d视图占位
// WKT(Well-known text)是一种文本标记语言,用于表示矢量几何对象、空间参照系统及空间参照系统之间的转换
 let parseWKT =  wktFormat.parse(item.reportAddress)

// Turf.js:JavaScript 空间分析库，由Mapbox 提供，Turf 实现了常用的空间分析操作，例如生成缓冲区、计算等高线，建立 TIN 等等
// 画线
  let line = turf.lineString(parseWKT.coordinates)

// GeoJSON是一种对各种地理数据结构进行编码的格式 
1. let feature = new GeoJSON().readFeatures(JSON.stringify(faultPoint))
// 设定矢量要素的线样式。
2.Stroke
3.点击事件增加overLay覆盖
     addAttributesOver(layer) {
            // 这里的layer railRoadPointLayer
            let map = this.map;
            //建立overlay层 地图上显示面板id信息、鼠标hover事件
            let selectHover = new Select({
                layers: [layer],
                multi: true,
                condition: singleClick,
            });

            let pannelInf = document.getElementById("pannelInfo");

            selectHover.on("select", function (e) {
                let layerDataSourceId = new Overlay({ // 覆盖层
                    element: pannelInf,
                    autoPan: true, // 默认为false，如果设置为true，则在调用setPosition将平移映射，以便在当前视图中 overlay 完全可见
                    // offset: [-50, -100],
                });
                map.addOverlay(layerDataSourceId);
                //let element = layerDataSourceId.getElement(); 选中的feature
                let feature = e.selected[0];
                if (feature) {
                    // console.log(feature)
                    map.getTargetElement().style.cursor = "pointer";
                    pannelInf.style.display = "block"
                    let coordinate = feature.geometryChangeKey_.target.flatCoordinates;
                    layerDataSourceId.setPosition(coordinate);
                    // pannelInf.innerHTML = `<div>故障发生事件：${feature.values_.belongpro}</div>` +
                    //     `<div>网元名称：${feature.values_.code}</div>` +
                    //     `<div>故障类型：${feature.values_.name}</div>` +
                    //     `<div>工单级别:${feature.values_.projectmanager}</div>`
                    pannelInf.innerHTML = `<div>故障段：${feature.values_.belongpro}</div>` +
                        `<div>故障次数：${feature.values_.name}</div>` +
                        `<div>原因分析：${feature.values_.code}</div>`
                } else {
                    map.getTargetElement().style.cursor = "auto";
                    pannelInf.style.display = "none"
                }
            })
            // 将给定的交互添加到地图中
            map.addInteraction(selectHover)
        },


 /***  高德带箭头的道路样式  */
    setLineStyle(feature,res) {
        // trackLine是LineString对象
        // Get the feature's default geometry. A feature may have any number of named geometries. The "default" geometry (the one that is rendered by default) is set when calling
        let trackLine = feature.getGeometry()
        let styles = [
            new Style({
                stroke: new Stroke({
                    color: "#46ef30",
                    width: 10,
                }),
                zIndex: 3,
            }),
            new Style({
                stroke: new Stroke({
                    color: "#000000",
                    width: 12,
                }),
                zIndex: 1,
            }),
        ];
        //对segments建立btree索引

        /*RBush是一个high-performanceJavaScript库，用于点和矩形的二维空间索引。
        它基于优化的R-tree数据结构，支持大容量插入。空间索引是一种用于点和矩形的特殊数据结构，允许您非常高效地执行“此边界框中的所有项目”之类的查询（例如，比在所有项目上循环快数百倍）。
        它最常用于地图和数据可视化。*/

        let tree = new RBush(); //路段数
        // forEachSegment
        // 遍历每个段，调用提供的回调。 如果回调返回一个真实值，则函数立即返回该值。 否则函数返回
        trackLine.forEachSegment(function (start, end) {
            let dx = end[0] - start[0];
            let dy = end[1] - start[1];
            //计算每个segment的方向，即箭头旋转方向

             /*atan2 方法返回一个 -pi 到 pi 之间的数值，表示点 (x, y) 对应的偏移角度。这是一个逆时针角度，以弧度为单位，正X轴和点 (x, y) 与原点连线之间。
             函数接受的参数：先传递 y 坐标，然后是 x 坐标。*/
            let rotation = Math.atan2(dy, dx);
            let geom = new LineString([start, end])
            // 获取几何的范围。
            let extent = geom.getExtent();
            let item = {
                minX: extent[0],
                minY: extent[1],
                maxX: extent[2],
                maxY: extent[3],
                geom: geom,
                rotation: rotation,
            };
            tree.insert(item);
        });
        //轨迹地理长度
        let length = trackLine.getLength();
        //像素间隔步长
        let stpes = 40; //像素步长间隔
        //将像素步长转实际地理距离步长
        let geo_steps = stpes * res;
        //箭头总数
        let arrowsNum = parseInt(length / geo_steps);
        for (let i = 1; i < arrowsNum; i++) {
            // getCoordinateAt 返回沿线串提供的分数处的坐标。是一个介于 0 和 1 之间的fraction数字，其中 0 是线串的开始，1 是结束。
            let arraw_coor = trackLine.getCoordinateAt((i * 1.0) / arrowsNum);
            let tol = 0.0001; //查询设置的点的容差，测试地图单位是米(10)。如果是4326坐标系单位为度的话，改成0.0001.
            let arraw_coor_buffer = [
                arraw_coor[0] - tol,
                arraw_coor[1] - tol,
                arraw_coor[0] + tol,
                arraw_coor[1] + tol,
            ];
            //进行btree查询
            let treeSearch = tree.search({
                minX: arraw_coor_buffer[0],
                minY: arraw_coor_buffer[1],
                maxX: arraw_coor_buffer[2],
                maxY: arraw_coor_buffer[3],
            });
            let arrow_rotation;
            //只查询一个，那么肯定是它了，直接返回
            if (treeSearch.length === 1) arrow_rotation = treeSearch[0].rotation;
            else if (treeSearch.length > 1) {
                let results = treeSearch.filter(function (item) {
                    //箭头点与segment相交，返回结果。该方法实测不是很准，可能是计算中间结果
                    //保存到小数精度导致查询有点问题
                    // if(item.geom.intersectsCoordinate(arraw_coor))
                    //   return true;

                    //换一种方案，设置一个稍小的容差，消除精度问题
                    let _tol = 1; //消除精度误差的容差
                    if (
                        // 测试几何图形和传递的范围是否相交。
                        item.geom.intersectsExtent([
                            arraw_coor[0] - _tol,
                            arraw_coor[1] - _tol,
                            arraw_coor[0] + _tol,
                            arraw_coor[1] + _tol,
                        ])
                    )
                        return true;
                });
                if (results.length > 0) arrow_rotation = results[0].rotation;
            }
            styles.push(
                new Style({
                    geometry: new Point(arraw_coor),
                    image: new Icon({
                        src: require('../assets/images/arrow.png'),
                        scale: 0.8,
                        rotation: -arrow_rotation + Math.PI / 2,
                    }),
                    zIndex: 3,
                })
            );
        }
        return styles;
    },