openlayers加載天地圖

時間  2020-12-03
標籤 javascript css html java ajax json 數組 dom async post 欄目 JavaScript 简体版
原文   原文鏈接

天地圖加載大量圖標會出現卡頓狀況，使用openlayers加載優化javascript

百度地圖是使用mapv.jscss

  1. 在頁面添加html代碼 
    @* openlayers提示框層 *@
    <div id="popup2" class="ol-popup">
        <a href="#" id="popup-closer2" class="ol-popup-closer"></a>
        <div id="popup-content2"></div>
    </div>

     

  2. 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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程