cari
Rumahhujung hadapan webhtml tutorialOpenlayers+Geoserver(一):项目介绍以及地图加载_html/css_WEB-ITnose

项目验收完,趁着事情不是很多,对这个项目进行梳理。我主要负责地图模块,网站其他模块主要有两个,一个是报表,主要是100多张报表,技术没有难度,主要是工作量的问题。另一个是数据的校验,就是校验数据的冲突。

现在主要介绍地图,地图主要使用openlayers+geoserver,通过Geoserver加载路线以及点状物的shape数据,将各个图层形成一个图层组,页面前端用openlayers加载该图层组,然后对此图层组进行查询。这样做的好处就是,如果有新的图层增加,如果没有特殊的需求,是不需要修改代码的,只需要在Geoserver中修改图层组,增加新的图层就可以了。如果你添加的是图层的数组,你就需要修改代码,而且查询的时候,不需要单独增加遍历新的图层。公司的数据工程部,就是负责Geoserver的配图,他们交付其他项目的时候,都是这种做法。因为这个项目地图是我一个人做,所以配图就不是那么好看,中规中矩。地图中区域的铁路、湖泊等装饰性图层都没有,没有那么好看。

地图主要加载的是某区域的国道(6326条路)、省道(8380条)、县道(9076条路)、乡道(7万)、村道(9万)、专道(134条)以及路线上的桥隧渡涵。为了此项目,去其他用到openlayers开发部门去借鉴经验,因为他们的项目需求定位就是只加载高速,数据量很小,直接从数据库加载,很显然对于此项目行不通,数据量太大。

开发的环境是Geoserver 2.7.1.1,第一次用的Geoserver 2.6.3,后来发现它对页面中文会显示乱码(尽管已经将图层的数据存储(Store)的DBF字符集设置成GBK,可能还需要其他设置就不知道了),所以改用了新的版本 。openlayers用的是2.13.1,并不是现在最新的openlayers 3.x,尽管新的备受推崇,但是由于项目太紧,没有时间去学习和替换。

在做项目的时候,参考了很多文章,比较有用的是longshenguoji的文章,也推荐加群OpenLayers官方旗舰群[2] (群号:274788071),里面很多高手,不过大部分都是推崇openlayers 3.x,进去的时候,还是不要做伸手党,很多官方的demo都能解决问题。

以上是对项目介绍,年前打算把地图部分梳理完,预计写四章内容,第一章项目介绍以及地图加载,第二章Geoserver的配置,第三章地图的图层查询以及数据的解析,第四章地图小工具。文章中都会写一些项目中自己的体会以及经验教训,走过的弯路也算是后车之鉴,毕竟openlayers 2.x有点老了。一个人的精力毕竟是有限的,欢迎大家多交流。

第一章简单介绍地图的加载,下面是主要前端页面,Window.css主要是将body设置成页面全宽。

<!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

效果图如下:

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganHTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

HTML: Adakah bahasa pengaturcaraan atau yang lain?HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.

HTML: Membina struktur laman webHTML: Membina struktur laman webApr 14, 2025 am 12:14 AM

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

Dari teks ke laman web: Kekuatan HTMLDari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AM

HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

Memahami HTML, CSS, dan JavaScript: Panduan PemulaMemahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML: Penstrukturan Kandungan WebPeranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

HTML dan Kod: Melihat lebih dekat pada istilahHTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AM

Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

HTML, CSS, dan JavaScript: Alat penting untuk pemaju webHTML, CSS, dan JavaScript: Alat penting untuk pemaju webApr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Dreamweaver Mac版

Dreamweaver Mac版

Alat pembangunan web visual

PhpStorm versi Mac

PhpStorm versi Mac

Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

mPDF

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),