解析OpenLayers 3加載矢量地圖源的問(wèn)題

更新時(shí)間：2021年12月22日 17:03:59 作者：大樹(shù)下躲雨

矢量圖形最大的優(yōu)點(diǎn)是無(wú)論放大、縮小或旋轉(zhuǎn)等不會(huì)失真。在地圖中存在著大量的應(yīng)用，是地圖數(shù)據(jù)中非常重要的組成部分，這篇文章主要介紹了OpenLayers 3加載矢量地圖源的相關(guān)資料,需要的朋友可以參考下

一、矢量地圖

矢量圖使用直線和曲線來(lái)描述圖形，這些圖形的元素是一些點(diǎn)、線、矩形、多邊形、圓和弧線等等，它們都是通過(guò)數(shù)學(xué)公式計(jì)算獲得的。由于矢量圖形可通過(guò)公式計(jì)算獲得，所以矢量圖形文件體積一般較小。矢量圖形最大的優(yōu)點(diǎn)是無(wú)論放大、縮小或旋轉(zhuǎn)等不會(huì)失真。在地圖中存在著大量的應(yīng)用，是地圖數(shù)據(jù)中非常重要的組成部分。

為了便于存儲(chǔ)，傳遞，使用，矢量地圖會(huì)按照一定的格式來(lái)表達(dá)，比如常見(jiàn)的GeoJSON，TopoJSON，GML，KML，ShapeFile等等。除了最后一個(gè)ShapeFile，其他幾個(gè)格式的矢量地圖OpenLayers 3都支持。

二、使用GeoJson格式加載矢量地圖

1、項(xiàng)目結(jié)構(gòu)

2、map.geojson

{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[104.08859252929688,30.738294707383368],[104.18060302734375,30.691068801620155],[104.22042846679688,30.739475058679485],[104.08859252929688,30.738294707383368]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[104.08859252929688,30.52323029223123],[104.08309936523438,30.359841397025537],[104.1998291015625,30.519681272749402],[104.08859252929688,30.52323029223123]]]}},{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[103.70269775390624,30.675715404167743],[103.69308471679688,30.51494904517773],[103.83316040039062,30.51494904517773],[103.86474609375,30.682801890953776],[103.70269775390624,30.675715404167743]]]}}]}

3、map.html

<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :加載矢量地圖</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>

<script>

    /**
     *  創(chuàng)建地圖
     */
    new ol.Map({

        // 設(shè)置地圖圖層
        layers: [

            //創(chuàng)建一個(gè)使用Open Street Map地圖源的圖層
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),

            //加載一個(gè)geojson的矢量地圖
            new ol.layer.Vector({
                source: new ol.source.Vector({
                    url: 'geojson/map.geojson',     // 地圖來(lái)源
                    format: new ol.format.GeoJSON()    // 解析矢量地圖的格式化類
                })
            })

        ],

        // 設(shè)置顯示地圖的視圖
        view: new ol.View({
            center: [104,30],       // 設(shè)置地圖顯示中心于經(jīng)度104度，緯度30度處
            zoom: 10,           // 設(shè)置地圖顯示層級(jí)為10
            projection: 'EPSG:4326'     //設(shè)置投影
        }),

        // 讓id為map的div作為地圖的容器
        target: 'map'

    })

</script>
</body>
</html>

4、運(yùn)行結(jié)果

三、獲取矢量地圖上的所有Feature,并設(shè)置樣式

1、map2.html

<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :獲取矢量地圖上的所有Feature,并設(shè)置樣式</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<body>

<div id='map' style='width: 800px;height:500px;margin: auto'></div>
<br>
<div style='width: 800px;margin: auto'>
    <button type="button" onclick = 'updateStyle()' >修改Feature樣式</button>
</div>

<script>

    /**
     *  創(chuàng)建地圖
     */
    var map = new ol.Map({

        // 設(shè)置地圖圖層
        layers: [
            //創(chuàng)建一個(gè)使用Open Street Map地圖源的圖層
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
        ],

        // 設(shè)置顯示地圖的視圖
        view: new ol.View({
            center: [104,30],       // 設(shè)置地圖顯示中心于經(jīng)度104度，緯度30度處
            zoom: 10,           // 設(shè)置地圖顯示層級(jí)為10
            projection: 'EPSG:4326'     //設(shè)置投影
        }),

        // 讓id為map的div作為地圖的容器
        target: 'map'
    });

    //創(chuàng)建一個(gè)矢量地圖源圖層，并設(shè)置樣式
    var  vectorLayer =  new ol.layer.Vector({
            source: new ol.source.Vector({
                url: 'geojson/map.geojson',     // 地圖來(lái)源
                format: new ol.format.GeoJSON()    // 解析矢量地圖的格式化類
            }),
            // 設(shè)置樣式，顏色為綠色，線條粗細(xì)為1個(gè)像素
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'green',
                    size: 1
                 })
            })
        });


    map.addLayer(vectorLayer);


    /**
     * 獲取矢量圖層上所有的Feature,并設(shè)置樣式
     */
    function updateStyle(){

        //創(chuàng)建樣式，顏色為紅色，線條粗細(xì)為3個(gè)像素
        var  featureStyle = new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                size: 3
            })
        })

        //獲取矢量圖層上所有的Feature
        var features =  vectorLayer.getSource().getFeatures()


        //遍歷所有的Feature，并為每個(gè)Feature設(shè)置樣式
        for (var i = 0;i<features.length;i++){
            features[i].setStyle(featureStyle)
        }


    }


</script>
</body>
</html>

2、運(yùn)行結(jié)果

4、矢量地圖坐標(biāo)系轉(zhuǎn)換

矢量地圖用的是EPSG:4326，我們可以通過(guò)OpenLayers 3內(nèi)置了地圖格式解析器，將坐標(biāo)轉(zhuǎn)換為EPSG:3857

1、map3.html

<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <meta content='always' name='referrer'>
    <title>OpenLayers 3 :矢量地圖坐標(biāo)系轉(zhuǎn)換</title>
    <link href='ol.css ' rel='stylesheet' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
    <script src="jquery-3.6.0.js"></script>
</head>

<body>

<div id='map' style='width: 1000px;height: 800px;margin: auto'></div>

<script>

    /**
     *  創(chuàng)建地圖
     */
    var map = new ol.Map({

        // 設(shè)置地圖圖層
        layers: [

            //創(chuàng)建一個(gè)使用Open Street Map地圖源的圖層
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],

        // 設(shè)置顯示地圖的視圖
        view: new ol.View({
            center: ol.proj.fromLonLat([104,30]),       // 設(shè)置地圖顯示中心于經(jīng)度104度，緯度30度處
            zoom: 10,           // 設(shè)置地圖顯示層級(jí)為10
        }),

        // 讓id為map的div作為地圖的容器
        target: 'map'

    });


    // 加載矢量地圖
    function addGeoJSON(data) {
        var layer = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: (new ol.format.GeoJSON()).readFeatures(data, {     // 用readFeatures方法可以自定義坐標(biāo)系
                    dataProjection: 'EPSG:4326',                            // 設(shè)定JSON數(shù)據(jù)使用的坐標(biāo)系
                    featureProjection: 'EPSG:3857'                          // 設(shè)定當(dāng)前地圖使用的feature的坐標(biāo)系
                })
            })
        });
        map.addLayer(layer);
    };


    $.ajax({
        url: 'geojson/map.geojson',
        success: function(data, status) {
            // 成功獲取到數(shù)據(jù)內(nèi)容后，調(diào)用方法將矢量地圖添加到地圖
            addGeoJSON(data);
        }
    });

</script>
</body>
</html>

2、運(yùn)行結(jié)果