ホームページ > 記事 > ウェブフロントエンド > Openlayers+Geoserver (1): プロジェクトの紹介とマップloading_html/css_WEB-ITnose
Openlayers+Geoserver (1): プロジェクトの紹介とマップloading_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:59:141917ブラウズ
プロジェクトが承認されたら、あまり物事が進まないうちにプロジェクトを整理しましょう。私は主にマップ モジュールを担当しています。1 つはレポートです。技術的な問題はありませんが、主に作業量の問題です。もう 1 つはデータの競合を検証するデータ検証です。
ここで主にマップを紹介します。マップは主に openlayers+geoserver を使用し、ルートとポイントの形状データは Geoserver を介して読み込まれ、ページのフロントエンドは openlayers を使用します。レイヤー グループをロードして、このレイヤー グループをクエリします。この利点は、新しいレイヤーを追加する場合、特別な要件がない限りコードを変更する必要がなく、Geoserver のレイヤー グループを変更して新しいレイヤーを追加するだけで済むことです。レイヤーの配列を追加する場合は、コードを変更する必要がありますが、クエリを実行するときに、新しいレイヤーを個別に追加して走査する必要はありません。同社のデータ エンジニアリング部門は、Geoserver のグラフィックスを担当し、他のプロジェクトを提供する際にこれを行います。このプロジェクト マップは自分で作成したため、添付の写真はあまり美しくなく、満足のいくものではありません。マップ上のエリアには鉄道や湖などの装飾レイヤーがないため、見た目はあまり良くありません。
この地図には主に国道 (6326 道路)、地方道 (8380 道路)、県道 (9076 道路)、田舎道 (70,000)、村道 (90,000)、特別道路 (134)、橋がロードされています。 、ルート沿いのトンネル、交差点、暗渠。このプロジェクトでは、他の openlayers 開発部門に行ってその経験から学びました。なぜなら、彼らのプロジェクト要件は高速読み込みだけであり、データ量が非常に少ないため、このプロジェクトでは明らかに不可能だからです。データ量が大きすぎます。
開発環境は Geoserver 2.7.1.1 です。初めて Geoserver 2.6.3 を使用したとき、中国語ページで文字化けが表示されることがわかりました (レイヤー データ ストレージの DBF 文字セット ( Store）はGBKに設定されていましたが、他の設定が必要になる可能性があります（わかりません）ので、新しいバージョンに切り替えました。 openlayers は最新の openlayers 3.x ではない 2.13.1 を使用します。新しいものが強く推奨されますが、プロジェクトが厳しすぎるため、学習して置き換える時間がありません。
プロジェクトに取り組む際には、longshenguoji の記事を参考にしました。また、OpenLayers 公式フラッグシップ グループ [2] (グループ番号: 274788071) に参加することをお勧めします。 , 多くの専門家がいますが、ほとんどの専門家が openlayers 3 を推奨しています。
上記はプロジェクトの紹介で、年内にマップ部分を整理する予定です。最初の章はプロジェクトの紹介とマップの読み込みです。 Geoserver の構成、第 3 章はマップ レイヤー、第 4 章マップ ガジェットです。この記事では、私自身の経験とプロジェクトで学んだ教訓のいくつかを書きます。結局のところ、openlayers 2.x は少し古いです。結局のところ、人のエネルギーには限りがあるので、誰もがもっとコミュニケーションをとることを歓迎します。
最初の章では、マップの読み込みについて簡単に紹介します。次に、Window.css で本文をページの全幅に設定します。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title ></title> <script src="Script/jquery-1.10.2.min.js"></ script> <script src="Script/OpenLayers/OpenLayers.js"></ script> <script src="Script/Map.js"></ script> <link rel="stylesheet" type="text/css" href="CSS/Window.css" /> </head><body> <div id='map' class="map"> </div ></body></html>View Code
以下のコードは、このシリーズのメインコンテンツである Map.js と、後で紹介するクエリとガジェットです。このjsで書かれています。
var map;//地图初始化加载function init(){ var bounds = new OpenLayers.Bounds(109.62468672071573, 20.061844970906243, 117.35435946391824, 25.528473333333334); //地图的边界 var options = { projection: "EPSG:4326", minResolution: "auto", maxResolution: "auto", numZoomLevels: 20, center: new OpenLayers.LonLat(113, 23) };//地图控制 map = new OpenLayers.Map( 'map', options); //group就是相应的图层组，在Geoserver中该图层组叫 guangdong var group = new OpenLayers.Layer.WMS("group" , //geoserver所在服务器地址,ip是内网的，geoserver端口是8090； "http://192.168.0.87:8090/geoserver/guangdong/wms" , { layers: "guangdong",//图层组名称 transparent: "true" }, { isBaseLayer: true } ); map.addLayer(group); map.zoomToExtent(bounds); //将地图扩大的数据}$(function () { init();})View Code レンダリングは次のとおりです: