openlayers加载天地图

天地图加载大量图标会出现卡顿状况，使用openlayers加载优化javascript

百度地图是使用mapv.jscss

在页面添加html代码

@* openlayers提示框层 *@
    <div id="popup2" class="ol-popup">
        <a href="#" id="popup-closer2" class="ol-popup-closer"></a>
        <div id="popup-content2"></div>
    </div>

js源码
html

var getGisMap2 = (function () {

    //建立windowinfo overlay
    var container_pop = document.getElementById('popup2');
    var content = document.getElementById('popup-content2');
    var closer = document.getElementById('popup-closer2');
    var overlay2 = new ol.Overlay(({
        element: container_pop,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
        }
    }));
    //关闭windowinfo 
    closer.onclick = function () {
        overlay2.setPosition(undefined);
        closer.blur();
        return false;
    };


    //定义polygon  fill 及stroke 样式
    var fill = new ol.style.Fill();
    var stroke = new ol.style.Stroke({
        color: 'yellow',
        width: 1
    });

    var map, labelList;
    var views = new ol.View({
        projection: 'EPSG:4326',
        center: [],
        zoom: 12,
        maxZoom: 18
    });
    var vec_c = getTdtLayer("vec_c");
    var cva_c = getTdtLayer("cva_c");
    //初始化地图 天地图
    map = new ol.Map({
        layers: [
         vec_c,
         cva_c
        ],
        target: 'mapDiv2',
        overlays: [overlay2],
        view: views
    });
    //解决地图文字被压扁问题
    function getTdtLayer(lyr) {
       
        var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
        var projection = ol.proj.get("EPSG:4326");
        var projectionExtent = [-180, -90, 180, 90];
        var maxResolution = (ol.extent.getWidth(projectionExtent) / (256 * 2));
        var resolutions = new Array(18);  //地图最大放大级别
        var z;
        for (z = 0; z < 18; ++z) {
            resolutions[z] = maxResolution / Math.pow(2, z);
        }
        var tileOrigin = ol.extent.getTopLeft(projectionExtent);
        var layer = new ol.layer.Tile({
            extent: [-180, -90, 180, 90],
            source: new ol.source.TileImage({
                tileUrlFunction: function (tileCoord) {
                    var z = tileCoord[0] + 1;
                    var x = tileCoord[1];
                    var y = -tileCoord[2] - 1;
                    var n = Math.pow(2, z + 1);
                    x = x % n;
                    if (x * n < 0) {
                        x = x + n;
                    }
                    return url.replace('{z}', z.toString())
                            .replace('{y}', y.toString())
                            .replace('{x}', x.toString());
                },
                projection: projection,
                tileGrid: new ol.tilegrid.TileGrid({
                    origin: tileOrigin,
                    resolutions: resolutions,
                    tileSize: 256
                })
            })
        });
        return layer;
    }
       
    //换热站图层
    var layer_station = new ol.layer.Vector({
        source: new ol.source.Vector()
    });
    //换热站名字图层
    var layer_name = new ol.layer.Vector({
        source: new ol.source.Vector()
    });
    
    //热源图层
    var layer_source = new ol.layer.Vector({
        source: new ol.source.Vector()
    });

    //监听地图放大缩小级别
    map.on("moveend", function (e) {
        var zoom = map.getView().getZoom(); //获取当前地图的缩放级别 
        if (zoom < 9) {
            $("#mapDiv").load('ParentMap2?r=' + Math.random()) //地图缩小到必定级别返回上一层页面地图
        }
        else if (zoom >= 9 && zoom < 13) {
            layer_station.setVisible(false); //隐藏换热站图标
        }
        else if (zoom >= 13 && zoom < 15) {
            layer_station.setVisible(true);  //显示换热站图标
            layer_name.setVisible(false);    //隐藏换热站名字
        }
        else if (zoom >= 15) {
            layer_name.setVisible(true);  //隐藏换热站名字
        }
    });
    // 监听地图点击事件
    map.on('click', function (e) {
        map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
            if (feature.type == 'heatStation') {  //换热站图标点击事件
                //点击换热站
                var item = feature.item;
                layui.layer.open({
                    type: 2,
                    title: '运行图',
                    shadeClose: false,
                    shade: [0.1, '#000'],
                    closeBtn: 1,
                    area: ['1000px', '500px'],
                    content: '/Html/components/operation.html?orgid=' + item.ObjectId
                })
            }
            else if (feature.type == 'heatSource') { //热源图标点击事件
               
                //点击热源
                var item = feature.item;
                var coordinate = e.coordinate;
                var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                    coordinate, 'EPSG:3857', 'EPSG:4326'));
                $.post('/Map/HeatingRunMap/GetHeatSourceRuningData', {
                    heatSourceId: item.ObjectId
                }, function (res) {
                    if (res.IsSuccess) {
                        var str = '名称 ：' + item.ObjectName + '<br>' +
                            '所属 ：' + item.OrgShortName + '<br>';
                        if (res.Data.length) {
                            res.Data.forEach(function (param) {
                                str += '<span style="color:#4f95e9">' + param.Key + ' :' + param.Value + '</span><br>'
                            })
                        } else {
                            str += '<span style="color:#4f95e9">无即时数据<span>'
                        }
                        content.innerHTML = str;
                    }
                })
                overlay2.setPosition(coordinate);
            }
            else {
                console.log(feature.getId());
            }

        })
    });


    //初始化接口加载
    $.ajax({
        url: '/Map/HeatingRunMap/GetCityHeatSourceCount',
        type: 'POST',
        dataType: 'json',
        data: {
            cityId: $('#city_id').val()
        },
        success: function (data) {
            var temp = [];
            if (data.Message) {
                //OpenLayer3调用天地图，拖拽后，地图消失的问题，坐标点必定要用parseFloat()转换下
                temp.push(parseFloat(data.Data[0].MapX));
                temp.push(parseFloat(data.Data[0].MapY))
                views.setCenter(temp);               
                showHeatStation($('#city_id').val());//显示换热站及label
                getMap($('#city_id').val(), '200');//显示热源
                drawLine()  //显示管线
            }
        }
    });

    //绘制一次管线
    function drawLine() {
        $.ajax({
            url: '/Map/HeatingRunMap/GetLineByCityId',
            type: 'POST',
            dataType: 'json',
           // async: false,
            data: {
                cityId: $('#city_id').val(),
                eleId: 1,
            },
            success: function (data) {
                var points = [];
                var out_points = [];
                $.each(data.Data, function (i, val) {
                    points = [];                    
                        val.Points.forEach(function (item) {
                            var res = item.split(",");
                            var temp = [];
                            temp.push(parseFloat(res[0])); //字符串转换
                            temp.push(parseFloat(res[1]));
                            points.push(temp);
                        //由[["22","22"],["11","33"],...]转换成[[22,22],[11,33],...]形式的数组,线才不会乱画
                        })
                        out_points.push({
                            "geometry": {
                                "type": 'LineString',
                                "ObjectId": val.ObjectId,
                                "coordinates": points
                            },
                                "type": "Feature",
                                "id": val.ObjectId                            
                        })
                    
                });
                //组装geojson数据
                var geojsonObject = {
                    'type': 'FeatureCollection',
                    'crs': {
                        'type': 'name',
                        'properties': {
                            'name': 'EPSG:4326'
                        }
                    },
                    'features': out_points
                };

                //建立features
                var source = new ol.source.Vector({
                    features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
                });

                //一次管线
                var layer_line = new ol.layer.Vector({
                    source: source,
                    style: new ol.style.Style({
                        stroke: new ol.style.Stroke({
                            width: 2,
                            color: '#ff0000'
                        })
                    })
                });
                map.addLayer(layer_line)
            }
        });
    }

    //显示热源
    function getMap(cityId, energyType) {      
        
        $.ajax({
            url: '/Map/HeatingRunMap/GetPointByCityId',
            type: 'POST',
            dataType: 'json',
            data: {
                cityId: cityId,
                eleId: -1,
                energyType: energyType || "-1,1"
            },
            success: function (data) {
                if (data.Message) {
                    var styles = [
						new ol.style.Style({
						    image: new ol.style.Icon({
						        src: '/Content/img/gis/Map_icon_other20.png'
						    })
						}),
						new ol.style.Style({
						    image: new ol.style.Icon({
						        src: '/Content/img/gis/Map_icon_gas20.png'
						    })
						}),
						new ol.style.Style({
						    image: new ol.style.Icon({
						        src: '/Content/img/gis/Map_icon_coal20.png'
						    })
						}),
						new ol.style.Style({
						    image: new ol.style.Icon({
						        src: '/Content/img/gis/Map_icon_electric20.png'
						    })
						})
                    ];
                    $.each(data.Data, function (i, item) {
                        var feature;
                        
                        if (item.energyType == 0) {
                            feature = new ol.Feature({
                                geometry: new ol.geom.Point([item.MapX, item.MapY])
                            });
                            feature.setStyle(styles[1]);
                        } else if (item.energyType == 1) {
                            feature = new ol.Feature({
                                geometry: new ol.geom.Point([item.MapX, item.MapY])
                            });
                            feature.setStyle(styles[2]);
                        } else if (item.energyType == 3) {
                            feature = new ol.Feature({
                                geometry: new ol.geom.Point([item.MapX, item.MapY])
                            });
                            feature.setStyle(styles[3]);
                        } else {
                            feature = new ol.Feature({
                                geometry: new ol.geom.Point([item.MapX, item.MapY])
                            });
                            feature.setStyle(styles[0]);
                        }
                        feature.item = item;
                        feature.type = 'heatSource';

                        layer_source.getSource().addFeature(feature);

                    })
                    map.addLayer(layer_source)
                    var allFeatrues = layer_source.getSource().getFeatures();

                    //点击热源按钮
                    $("#energyType li").click(function () {
                        var temp = [];
                        if ($(this).hasClass('active')) {
                            $(this).removeClass('active')
                        } else {
                            $(this).addClass('active')
                        }
                        var str = "";
                        if ($('#energyType li.active').length != 0) {
                            $('#energyType li.active').each(function (i, item) {
                                str += $(item).attr('data-type') + ","
                            });
                            str = str.substr(0, str.length - 1);
                            str.split(',').forEach(function (val) {  //过滤
                                allFeatrues.forEach(function (ff) {
                                    if (val == 0 || val == 1 || val == 3) {
                                        if (ff.item.energyType == val) {
                                            temp.push(ff);
                                        }
                                    }
                                    else if (val == -1) {
                                        if (ff.item.energyType == 2 || ff.item.energyType == 4 || ff.item.energyType == 5 || ff.item.energyType == 6) {
                                            temp.push(ff);
                                        }
                                    }

                                })

                            })
                            layer_source.getSource().clear();
                            layer_source.getSource().addFeatures(temp);
                        } else {
                            str = -200
                            layer_source.getSource().clear();
                        }

                    })


                }
            }
        });
    }

    //换热站图标
    function showHeatStation(cityId) {
        var styles = [
			new ol.style.Style({
			    image: new ol.style.Icon({
			        src: '/Content/img/gis/hotsiteOnLine.png'  //正常
			    })
			}),
			new ol.style.Style({
			    image: new ol.style.Icon({
			        src: '/Content/img/gis/hotsiteOver.png'  //异常
			    })
			}),
			new ol.style.Style({
			    image: new ol.style.Icon({
			        src: '/Content/img/gis/hotsiteLow.png' //无即便数据
			    })
			})
        ];

        $.ajax({
            url: '/Map/HeatingRunMap/GetPointByCityId',
            type: 'POST',
            dataType: 'json',
            data: {
                cityId: cityId,
                eleId: -2
            },
            success: function (data) {
                labelList = data.Data;
                var feature;
                $.each(data.Data, function (i, item) {
                    //换热站的状态类型（0：正常，1：无即时数据，2：异常）
                    if (item.HeatStationStatusType == 0) {
                        feature = new ol.Feature({
                            geometry: new ol.geom.Point([item.MapX, item.MapY])
                        });
                        feature.setStyle(styles[0]);
                    } else if (item.HeatStationStatusType == 2) {
                        feature = new ol.Feature({
                            geometry: new ol.geom.Point([item.MapX, item.MapY])
                        });
                        feature.setStyle(styles[1]);
                    } else if (item.HeatStationStatusType == 1) {
                        feature = new ol.Feature({
                            geometry: new ol.geom.Point([item.MapX, item.MapY])
                        });
                        feature.setStyle(styles[2]);
                    }
                    feature.item = item;
                    feature.type = 'heatStation';
                    layer_station.getSource().addFeature(feature);
                })
                map.addLayer(layer_station);
                showHeatStationLabel(labelList);
                layer_name.setVisible(false);  //初始化隐藏

                //点击异常换热站按钮
                var allFeatrues2 = layer_station.getSource().getFeatures();
                var allLabelName = layer_name.getSource().getFeatures();
                $(".hrz_fault").click(function () {
                    var temp = [];
                    var tempLabel = [];
                    if ($(this).hasClass('active')) {   //显示所有换热站
                        $(this).removeClass('active')
                        layer_station.getSource().clear();  //清除该图层的覆盖物
                        layer_station.getSource().addFeatures(allFeatrues2);  //添加换热站图标
                        layer_name.getSource().clear();//清除该图层的覆盖物
                        layer_name.getSource().addFeatures(allLabelName);//添加换热站名字

                    } else {
                        $(this).addClass('active')  //只显示异常换热站
                        allFeatrues2.forEach(function (ff) {
                            if (ff.item.HeatStationStatusType == 2) {
                                temp.push(ff);
                            }
                        })
                        layer_station.getSource().clear();//清除该图层的覆盖物
                        layer_station.getSource().addFeatures(temp);//添加异常换热站图标
                        allLabelName.forEach(function (ff) {
                            if (ff.item.HeatStationStatusType == 2) {
                                tempLabel.push(ff);
                            }
                        })
                        layer_name.getSource().clear();//清除该图层的覆盖物
                        layer_name.getSource().addFeatures(tempLabel);//添加异常换热站名字
                    }
                })
            }
        });
    }

    //换热站名字
    function showHeatStationLabel(labelList) {
        var feature;
        labelList.forEach(function (item) {
            feature = new ol.Feature({
                geometry: new ol.geom.Point([item.MapX, item.MapY])
            });
            feature.setStyle(new ol.style.Style({
                text: new ol.style.Text({
                    // font: '10px sans-serif' 默认这个字体，能够修改为其余的，格式和css的字体设置同样
                    text: item.ObjectName,
                    offsetY: 12,
                    fill: new ol.style.Fill({
                        color: '#0aa7f9',

                    })
                })
            }));
            feature.item = item;
            layer_name.getSource().addFeature(feature);
        })
        map.addLayer(layer_name);
    };

    return {
        showHeatStation: showHeatStation,
        getMap: getMap,
        showHeatStationLabel: showHeatStationLabel,

    }
}());

效果如图：java