OpenLayers 3 のベクターマップソースの読み込みの問題を解決する

1. ベクターマップ

ベクターグラフィックスは直線と曲線を使用してグラフィックスを表します。これらのグラフィックスの要素は点、線、四角形、多角形、円、円弧などであり、すべて数式を計算することによって得られます。ベクターグラフィックは数式計算によって得られるため、一般的にファイルサイズは小さくなります。ベクターグラフィックスの最大の利点は、拡大、縮小、回転しても歪まないことです。地図には数多くのアプリケーションがあり、地図データの非常に重要な構成要素です。

保存、送信、使用を容易にするために、ベクターマップは、一般的なGeoJSON 、 TopoJSON 、 GML 、 KML 、 ShapeFileなどの特定の形式で表現されます。最後のShapeFileに加えて、OpenLayers 3 は他のいくつかのベクターマップ形式をサポートしています。

2. GeoJson 形式を使用してベクターマップを読み込む

1. プロジェクト構造

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. マップ.html

<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<ヘッド>
    <meta http-equiv='コンテンツタイプ' 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='スタイルシート' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<本文>

<div id='map' style='幅: 1000px;高さ: 800px;マージン: 自動'></div>

<スクリプト>

    /**
     * マップを作成する */
    新しい ol.Map({

        // マップレイヤーを設定するlayers: [

            //Open Street Mapマップソースを使用するレイヤーを作成します。new ol.layer.Tile({
                ソース: 新しい ol.source.OSM()
            }）、

            //GeoJSONベクターマップをロードする new ol.layer.Vector({
                ソース: 新しい ol.source.Vector({
                    url: 'geojson/map.geojson', // マップソース形式: new ol.format.GeoJSON() // ベクターマップを解析するためのフォーマットクラス})
            })

        ]、

        // マップビューを表示するビューを設定します: new ol.View({
            center: [104,30], // 地図表示の中心を経度104度、緯度30度に設定します。zoom: 10, // 地図表示レベルを10に設定します。
            projection: 'EPSG:4326' //投影を設定する}),

        // ID map の div をマップのコンテナにします。ターゲット: 'map'

    })

</スクリプト>
</本文>
</html>

4. 運用結果

3.ベクターマップ上のすべてのフィーチャを取得し、スタイルを設定する

1.map2.html

<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<ヘッド>
    <meta http-equiv='コンテンツタイプ' 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='スタイルシート' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
</head>

<本文>

<div id='map' style='幅: 800px;高さ: 500px;マージン: 自動'></div>
<br>
<div スタイル = '幅: 800px;マージン: 自動'>
    <button type="button" onclick = 'updateStyle()' >フィーチャー スタイルの変更</button>
</div>

<スクリプト>

    /**
     * マップを作成する */
    var map = 新しい ol.Map({

        // マップレイヤーを設定するlayers: [
            //Open Street Mapマップソースを使用するレイヤーを作成します。new ol.layer.Tile({
                ソース: 新しい ol.source.OSM()
            }）、
        ]、

        // マップビューを表示するビューを設定します: new ol.View({
            center: [104,30], // 地図表示の中心を経度104度、緯度30度に設定します。zoom: 10, // 地図表示レベルを10に設定します。
            projection: 'EPSG:4326' //投影を設定する}),

        // ID map の div をマップのコンテナにします。ターゲット: 'map'
    });

    //ベクターマップソースレイヤーを作成し、スタイルを設定します var vectorLayer = new ol.layer.Vector({
            ソース: 新しい ol.source.Vector({
                url: 'geojson/map.geojson', // マップソース形式: new ol.format.GeoJSON() // ベクターマップを解析するためのフォーマットクラス}),
            // スタイルを設定します。色は緑、線の太さは 1 ピクセルです。style: new ol.style.Style({
                ストローク: 新しい ol.style.Stroke({
                    色: '緑'、
                    サイズ: 1
                 })
            })
        });


    マップにレイヤーを追加します(ベクトルレイヤー)。


    /**
     * ベクターレイヤー上のすべてのフィーチャを取得し、スタイルを設定します */
    関数 updateStyle(){

        //赤色と3ピクセルの線の太さのスタイルを作成します。var featureStyle = new ol.style.Style({
            ストローク: 新しい ol.style.Stroke({
                色: '赤'、
                サイズ: 3
            })
        })

        //ベクターレイヤー上のすべてのフィーチャを取得します
        var 機能 = vectorLayer.getSource().getFeatures()


        //すべてのFeatureを走査し、各Featureのスタイルを設定します for (var i = 0; i < features.length; i++) {
            機能[i].setStyle(機能スタイル)
        }


    }


</スクリプト>
</本文>
</html>

2. 運用結果

4. ベクトルマップ座標系変換

ベクターマップはEPSG:4326を使用します。OpenLayers 3 に組み込まれているマップ形式パーサーを使用して、座標をEPSG:3857

1.map3.html

<!Doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<ヘッド>
    <meta http-equiv='コンテンツタイプ' 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='スタイルシート' type='text/css'/>
    <script type='text/javascript' src='ol.js' charset='utf-8'></script>
    <script src="jquery-3.6.0.js"></script>
</head>

<本文>

<div id='map' style='幅: 1000px;高さ: 800px;マージン: 自動'></div>

<スクリプト>

    /**
     * マップを作成する */
    var map = 新しい ol.Map({

        // マップレイヤーを設定するlayers: [

            //Open Street Mapマップソースを使用するレイヤーを作成します。new ol.layer.Tile({
                ソース: 新しい ol.source.OSM()
            })
        ]、

        // マップビューを表示するビューを設定します: new ol.View({
            center: ol.proj.fromLonLat([104,30]), // マップ表示の中心を経度 104 度、緯度 30 度に設定します。zoom: 10, // マップの表示レベルを 10 に設定します。
        }）、

        // ID map の div をマップのコンテナにします。ターゲット: 'map'

    });


    // ベクターマップをロードする function addGeoJSON(data) {
        var レイヤー = 新しい ol.layer.Vector({
            ソース: 新しい ol.source.Vector({
                features: (new ol.format.GeoJSON()).readFeatures(data, { // readFeatures メソッドを使用して座標系をカスタマイズします。 dataProjection: 'EPSG:4326', // JSON データで使用される座標系を設定します。 featureProjection: 'EPSG:3857' // 現在のマップで使用されるフィーチャの座標系を設定します。 })
            })
        });
        マップにレイヤーを追加します。
    };


    $.ajax({
        url: 'geojson/map.geojson',
        成功: 関数(データ、ステータス) {
            // データ コンテンツを正常に取得したら、ベクター マップをマップに追加するメソッドを呼び出します。addGeoJSON(data);
        }
    });

</スクリプト>
</本文>
</html>

2. 運用結果

OpenLayers 3 読み込みベクターマップソースに関するこの記事はこれで終わりです。OpenLayers 3 読み込みベクターマップの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: