Openlayers+Geoserver (1): プロジェクトの紹介とマップloading_html/css_WEB-ITnose
プロジェクトが承認されたら、あまり物事が進まないうちにプロジェクトを整理しましょう。私は主にマップ モジュールを担当しています。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レンダリングは次のとおりです:
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7555
15
1382
52
83
11
28
96
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
