vue+openlayer をベースにマップの集約と散乱効果を実現

序文：

Openlayer は、私たちの GIS でよく使用されているオープンソースソフトウェアであり、非常に良いフィードバックを受けています。以前の ol3 と同様に、大流行しました。マップの実装も非常にシンプルで実用的です。現在、vue で使用されているマップはたくさんあります。では、vue に openlayer を導入して、マップの分散効果、またはさらに深いマップの集約効果を実現したらどうなるでしょうか。この記事では、vue でのマップの実装を共有します。現在、openlayer の5 シリーズと 6.5 はユニバーサルであり、テスト済みで利用可能です。

結果：

1.重合効果：

2. 散布効果：

具体的な実装手順:

1. プロジェクトにOpenLayerを導入する

cnpm i ol --save

2. 構成（必要に応じて導入）

（1）新しいvueファイルを作成する

（２）テンプレート

<div id="マップ"></div>

（３）js部分

関連する設定ファイルをインポートします。これが私のインポートすべてです。状況に応じて削除できます。

"ol/ol.css"をインポートします。
「ol/View」からViewをインポートします。
「ol/Map」からマップをインポートします。
"ol/layer/Tile" から TileLayer をインポートします。
「ol/Overlay」からOverlayをインポートします。
「ol/source/XYZ」からXYZをインポートします。
"ol/source" から { Vector を SourceVec 、Cluster として } インポートします。
"ol"から{Feature}をインポートします。
"ol/layer" から、Vector を LayerVec として、Vector を VectorLayer としてインポートします。
"ol/geom" から { Point, LineString } をインポートします。
 
輸入 {
  スタイル、
  アイコン、
  埋める、
  脳卒中、
  文章、
  CircleStyle として Circle、
} から "ol/style" へ;
 
"ol/source" から { OSM、TileArcGISRest } をインポートします。

3. 地図表示を実現する

マウント:

マウント() {
  このメソッドは、次のとおりです。
},

方法: ここでは 2 つのマップテンプレートを提供しています。どちらもオンラインです。イントラネットの場合は、独自のアドレスに置き換えてください。

initMap(){
    // マップをレンダリングする varlayers = [
        //濃い青の背景 new TileLayer({
          ソース: 新しいXYZ({
            URL:
            "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
          }）、
        }）、
        // 背景を初期化 // new TileLayer({
        // ソース: new OSM(),
        // })、
        
      ];
 
      this.map = 新しいマップ({
        レイヤー: レイヤー、
        ターゲット: "マップ"、
        ビュー: 新しいビュー({
          投影: 'EPSG:4326',
          中央: [120, 30],
          ズーム: 10,
          最小ズーム: 5,
          最大ズーム: 14
        }）、
      });
      //クリックすると現在の座標が表示されます this.map.on(
        "クリック"、
        関数 (evt) {
          アラート(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },
        地図
      );
}

4. 散水機能

マウント:

マウント() {
  このメソッドは、次のとおりです。
},

方法:

initMap(){
    // マップをレンダリングする varlayers = [
         //濃い青の背景// new TileLayer({
        // ソース: new XYZ({
        // URL:
        // "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        // })、
        // })、
        //背景を初期化する new TileLayer({
          ソース: 新しい OSM()、
        }）、
        
      ];
 
      this.map = 新しいマップ({
        レイヤー: レイヤー、
        ターゲット: "マップ"、
        ビュー: 新しいビュー({
          投影: 'EPSG:4326',
          中央: [120, 30],
          ズーム: 10,
          最小ズーム: 5,
          最大ズーム: 14
        }）、
      });
      //クリックすると現在の座標が表示されます this.map.on(
        "クリック"、
        関数 (evt) {
          アラート(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },
        地図
      );
    //ここでは固定データポイントを記述しているので、アドレスをレンダリングした後で this.addMarker() を直接呼び出すことができます。
},
マーカーを追加します（）{
    //描画ボードを作成します。let sourceArr = new SourceVec({}); 
    //ランダムデータを定義します。ここでは200個のランダムデータです。for (var i = 1; i <= 200; i++) {
      //ポイントの座標情報 let coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
      feature = new Feature(新しい Point(座標)) とします。
      マーカースタイル = 新しいスタイル({
          画像: 新しいアイコン({
            不透明度: 0.75、
            ソース: this.fixedStationImg1,
        }）、
      })
      機能.setStyle(マーカースタイル)
      ソースArr.addFeature(機能);
    }
 
 
     //LayerVec /VectorLayer どちらもOK var layer = new VectorLayer({
          出典: sourceArr、
        })
 
      //マップに描画ボードを追加する this.map.addLayer(
        層
      );  
    
}

5. 集約効果

マウント:

マウント() {
  このメソッドは、次のとおりです。
},

方法:

initMap(){
    // マップをレンダリングする varlayers = [
         //濃い青の背景// new TileLayer({
        // ソース: new XYZ({
        // URL:
        // "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        // })、
        // })、
        //背景を初期化する new TileLayer({
          ソース: 新しい OSM()、
        }）、
        
      ];
 
      this.map = 新しいマップ({
        レイヤー: レイヤー、
        ターゲット: "マップ"、
        ビュー: 新しいビュー({
          投影: 'EPSG:4326',
          中央: [120, 30],
          ズーム: 10,
          最小ズーム: 5,
          最大ズーム: 14
        }）、
      });
      //クリックすると現在の座標が表示されます this.map.on(
        "クリック"、
        関数 (evt) {
          アラート(evt.coordinate[0] + ";" + evt.coordinate[1]);
        },
        地図
      );
    //ここでは固定データポイントを記述しているので、アドレスをレンダリングした後で this.addMarker() を直接呼び出すことができます。
},
マーカーを追加します（）{
    //描画ボードを作成します。let sourceArr = new SourceVec({}); 
    //ランダムデータを定義します。ここでは200個のランダムデータです。for (var i = 1; i <= 200; i++) {
      //ポイントの座標情報 let coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
      feature = new Feature(新しい Point(座標)) とします。
      markerStyle = new Style({
          画像: 新しいアイコン({
            不透明度: 0.75、
            ソース: this.fixedStationImg1,
        }）、
      })
      機能.setStyle(マーカースタイル)
      ソースArr.addFeature(機能);
    }
 
 
      //マップに追加レイヤー - 集約ポイント - LayerVec / VectorLayer どちらもOK var layer = new LayerVec({
          ソース: this.ClusterSource、
          スタイル: 関数 (機能、解像度) {
            var size = feature.get('features').length;
            //集約数が1の場合、つまり最下層が配置アイコンの場合 if (size == 1) {
              新しいスタイルを返す({
                画像: 新しいアイコン({
                  アンカー: [0.5, 1],
                  src: require("../../assets/Img/marker_yes.png"),
                })
              })
            }それ以外 {
              //ここで集計部分のスタイルを設定します return new Style({
                イメージ: 新しい CircleStyle({
                  半径: 30,
                  ストローク: 新しいストローク({
                    色: 「白」
                  }）、
                  塗りつぶし: 新しい塗りつぶし({
                    色: '青'
                  })
                }）、
                テキスト: 新しいテキスト({
                  テキスト: size.toString(),
                  塗りつぶし: 新しい塗りつぶし({
                    色: 「白」
                  })
                })
              })
            }
          }
        })   
 
      //マップに描画ボードを追加する this.map.addLayer(
        層
      );  
    
}

参考文献:

js で openlayer を使用する: https://blog.csdn.net/HerryDong/article/details/110951955

これで、マップ集約と散乱効果を実現するための vue+openlayer に関するこの記事は終了です。より関連性の高い vue openlayer マップ集約コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

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