Openlayers+Geoserver (1): プロジェクトの紹介とマップloading_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

Openlayers+Geoserver (1): プロジェクトの紹介とマップloading_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:59 AM

プロジェクトが承認されたら、あまり物事が進まないうちにプロジェクトを整理しましょう。私は主にマップモジュールを担当しています。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

レンダリングは次のとおりです:

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。