OpenLayers记录（六）模糊查询数据，列表显示并点击定位

OpenLayers记录（六）模糊查询数据，列表显示并点击定位

1实现效果

2实现代码

/**************模糊查询**************/
//监听回车事件
function onKey(e) {
    var eve = e || window.event;
    if (eve.keyCode == 13) {
        //  layer.msg('监听成功');
        fuzzySearch()
    }


};
//查询功能
function fuzzySearch() {
    var count = 400;
    var infects = new Array(count);
    var cures = new Array(count);
    var code = new Array(count);
    var lon = new Array(count);
    var Name = new Array(count);
    var coordinates = new Array(count);
    var lat = new Array(count);
    var dataSource = new Array(count);
    var oTxt = document.getElementById('searchInput');
    var oList = document.getElementById('fuzzySearchResults');
    $.ajax({
        url: "js/dat.json",
        type: 'get',
        dataType: 'json',
        async: false,
        success: function(results) {
            dataSource = results;
            for (var i = 0; i < results.length; i++) {
                code[i] = results[i][0];
                Name[i] = results[i][1];
                infects[i] = results[i][2];
                cures[i] = results[i][3];
                lat[i] = results[i][4];
                lon[i] = (1) * results[i][5]; //坐标偏移处理

                coordinates[i] = ol.proj.fromLonLat([lat[i], lon[i]], 'EPSG:3857', 'EPSG:3857');

                if (infects[i] == "" || infects[i] == null) {
                    infects[i] = "暂无数据";
                } else if (cures[i] == " " || cures[i] == null) {
                    cures[i] = "暂无数据";
                } else if (lat[i] == "" || lat[i] == null) {
                    lat[i] = "暂无数据";
                } else if (lon[i] == "" || lon[i] == null) {
                    lon[i] = "暂无数据";
                }
            }
        }
    });
    var fruits = new Array(count);
    for (i = 0; i < count; i++) {
        fruits[i] = [
            code[i],
            Name[i],
            infects[i],
            cures[i],
            lat[i],
            lon[i]
        ]
    };
    /**查询结果
     * 开始  */
    var keyWord = oTxt.value;
    var fruitList = searchByRegExp(keyWord, fruits);
    renderFruits(fruitList);

    function renderFruits(list) {
        if (!(list instanceof Array)) {
            return;
        }
        oList.innerHTML = '';
        var len = list.length;
        var item = null;
        for (var i = 0; i < len; i++) {
            //创建ul1容器
            ul1 = document.createElement('ul');
            ul1.className = "fuzzySearchUL";
            ul1.id = "fuzzySearchUL";

            oList.appendChild(ul1);

            //创建 icon+标题    加入到ul1中
            item1 = document.createElement('li');
            item1.innerHTML = "" + list[i][1];
            ul1.appendChild(item1);
            //换行
            item = document.createElement('br');
            ul1.appendChild(item);

            //添加节水代码， 加入到ul1中
            item0 = document.createElement('li');
            item0.innerHTML = "ID：" + list[i][0];
            ul1.appendChild(item0);
            //添加地址， 加入到ul1中
            item4 = document.createElement('li');
            item4.innerHTML = "治愈人数:" + list[i][3];
            ul1.appendChild(item4);
            //添加地址， 加入到ul1中
            item5 = document.createElement('li');
            item5.innerHTML = "累计人数:" + list[i][2];
            ul1.appendChild(item5);

            //添加经度， 加入到ul1中
            item2 = document.createElement('li');
            item2.innerHTML = "经度:" + list[i][4] + " + list[i][4] + " name='lon' /> ";
            ul1.appendChild(item2);
            //添加纬度， 加入到ul1中
            item3 = document.createElement('li');
            item3.innerHTML = "纬度:" + list[i][5] + " + list[i][5] + " name='lat' />";
            ul1.appendChild(item3);
        }
        //$('#fuzzySearchResults').append(title + center + end);
    }
    //模糊匹配的时候如果不区分大小写，可以使用toLowerCase()或者toUpperCase()转换之后去匹配。

    //模糊查询1:利用字符串的indexOf方法
    function searchByIndexOf(keyWord, list) {
        if (!(list instanceof Array)) {
            return;
        }
        var len = list.length;
        var arr = [];
        for (var i = 0; i < len; i++) {
            //如果字符串中不包含目标字符会返回-1
            if (list[i].indexOf(keyWord) >= 0) {
                arr.push(list[i]);
            }
        }
        return arr;
    }
    //模糊查询2:正则匹配
    function searchByRegExp(keyWord, list) {
        if (!(list instanceof Array)) {
            return;
        }
        var len = list.length;
        var arr = [];
        var reg = new RegExp(keyWord);
        for (var i = 0; i < len; i++) {
            //如果字符串中不包含目标字符会返回-1
            if (reg.test(list[i])) {
                arr.push(list[i]);
            }
        }
        return arr;
    }
    // renderFruits(fruits);
    /****************点击搜索结果定位***************************/

    $('#fuzzySearchResults').on('click', 'ul', function() {
        function Position() {
            var lat1 = (1) * lat; //处理坐标
            var lon1 = (1) * lon; //处理坐标
            var view = map.getView();
            view.setZoom(12);

            view.setCenter(ol.proj.transform([lon1, lat1], 'EPSG:4326', 'EPSG:4326'));
            map.render();

        };
        var lon = $(this).find("input[name='lon']").val();
        var lat = $(this).find("input[name='lat']").val();
        //$(this).find("img").attr("src","image/1.png");
        //定位中心点
        //   alert(1);
        //  console.log("经度:" + lon + "纬度:" + lat);
        if (lon == null) {
            alert("请检查坐标!");

        } else if (lat == null) {
            alert("请检查坐标!");

        } else if (lon == 0) {
            alert("请检查坐标!");

        } else if (lat == 0) {
            alert("请检查坐标!");

        } else if (lon == null && lat == null) {
            alert("请检查坐标!");

        }

        Position();
    })
}