本篇文章給大家談談web前端gis地圖應用，以及GIS地圖制作對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。
目錄一覽：
- 1、電子地圖系統WEBGIS 關鍵技術
- 2、公司打算開發一套webgis，需要在web上顯示地圖，那種方案比較好？
- 3、胡中南：Web端GIS技術新進展 | (PPT+速記)
- 4、webgis中為什么加入兩個地圖功能后出錯
- 5、怎么用ArcGIS制作Web地圖
- 6、WebGIS在現實生活中的應用有哪些？
電子地圖系統WEBGIS 關鍵技術
隨著Internet技術的不斷發展和人們對地理信息系統(GIS)需求的日益增長，利用Internet在Web上發布空間數據，為用戶提供空間數據瀏覽、查詢和分析的功能，已成為地理信息系統(GIS)發展的必然趨勢。于是，基于Internet技術的地理信息系統———WEBGIS就應運而生。
WEBGIS是一個將地理信息處理和地理信息分布于Web計算平臺進行的 *** 化GIS系統，它是面向對象軟件構件技術、信息互操作技術、 *** 技術發展的產物。系統采用ARCGISServer作為WEBGIS支撐平臺實現基礎地理空間數據和地質空間數據的 *** 發布。
1.柵格WEBGIS技術
“柵格WEBGIS”(Grid WEBGIS)這一概念和產品是對傳統Web地圖服務方式的一種革命。啟用這個名稱，可謂是一語雙關:就是提供地理底圖的方式來講，再也不是傳統的方式———服務器端將矢量地圖臨時生成柵格圖發給客戶端，而是事先生成好柵格圖，用戶請求時不必做任何處理就可以即時發給客戶端;就客戶端的顯示方式來講，摒棄了傳統的一張地圖的顯示方式，客戶端采用多幅小圖拼接的方式顯示，總體看起來像是小圖片填充一個大的柵格的效果。
添加微信好友, 獲取更多信息
復制微信號
預先制作好所要發布的地理底圖、遙感影像不同縮放比例下的靜態圖像存放于服務器端，待實際發布時根據縮放比例在不同級別圖像之間進行切換。這種技術大大提高了地圖的Web瀏覽速度。
2.Web服務器端技術
Web服務器端主要由兩部分組成，即IIS(Internet Information Server)和WEBGIS服務器(包括ArcIMS組件、InternetGIS站點設計向導程序Wizard及面向城市地質Web應用的擴展組件)。
其中，IIS主要負責接收普通的用戶請求，當其需要空間數據時則向WEBGIS服務器發出請求，WEBGIS服務器接收到瀏覽器端的請求后，利用ArcIMS組件和城市地質Web應用擴展組件的功能，進行處理、分析、計算等;如果需要數據服務器的數據，則由WEBGIS服務器向數據服務器發出請求。
3.Web客戶端相關技術
包括IITML、客戶端腳本語言、VML(矢量可標記語言)、XML、DOM(文檔對象模型)、CSS(層疊樣式表)及Ajax(Asynchronous JavaScript and XML的縮寫)，這些技術的綜合運用大大擴展了系統功能，大幅提高了系統響應速度。
公司打算開發一套webgis，需要在web上顯示地圖，那種方案比較好？
如何說單做webmap，arcgis server 是更好的， 可以做地圖服務，可以標注不同的點，但是畫區域、折線，幾何圖形等不支持。你也可以看看多比控件，（好像是這么寫的），他有通過javascipt方式來調用處理，類似google map api，mapbar api等ky。。。
胡中南：Web端GIS技術新進展 | (PPT+速記)
在GTC 2020『GIS基礎軟件新技術論壇』上，超圖研究院副院長胡中南作《云原生GIS及Web端技術新進展》報告，他首先系統講解了云原生GIS技術的三大新進展：微服務更微、可擴展，容器化部署更全、更易用，自動化編排適配更多平臺等，介紹了這些技術如何支撐云南地質大數據等系統實現高可用、高并發、高彈性“三高”價值；也系統闡述了Web端GIS技術從基礎庫、組件庫、模板庫到WebApps的多層次結構及相關新進展，讓GIS前端應用開發定制更快速便捷。
本文將分為云原生GIS（點擊左側藍色文字可直接查看）與Web端GIS兩大部分，現分享Web端GIS技術部分資料如下：
演講PPT
上半部分主要講云原生GIS技術如何助力GIS系統快速部署與運維。
接下來我為大家介紹Web端GIS技術。
以前大家可能認為SuperMap的Web端就是一個SuperMap iClient JavaScript，僅僅是將Leaflet等開源技術做一些封裝集成、改進，和SuperMap服務器產品的REST API做了對接，其實這只是我們Web端技術棧的組成之一，也即圖上所示的基礎的iClient Libraries類庫（L1）。
我們在上面還提供了iClient Components，就是所謂的WebGIS組件庫（L2），適配了Vue框架和React框架。在這之上我們面向行業應用共性，基于組件庫進一步封裝，提供了Web模板庫iClient Templates（L3），只需將數據、LOGO和圖片等進行簡單修改，就可以快速上線。我們還提供了可構建、可定制、可擴展的Web Apps，如MapDashboard和WebSite UI（L4），以及更偏向使用的一些Web Apps，用做制圖、分析等（L5）。
由此可見，SuperMap GIS的Web端包括這五個層次的內容,已經不僅僅是SuperMap iClient JavaScript單個產品。
在SuperMap iClient JavaScript層面，我們也有新的增強與改進。
SuperMap iClient JavaScript 2020模塊圖。Web Libraries和 Web Components都有一些增強，新增加了Web Templates。
在此，我重點介紹一下組件和模板的新特性和新技術：組件技術就是把Libararies類庫做進一步的封裝，更少的代碼做更快的開發，比如可以一行代碼加一個Web Map組件，里面填一個服務地址和地圖資源ID，就可以出一個地圖了。歡迎大家在超圖軟件官網查看范例。
這是2019年我們提供的技術。今年我們新增了多款Vue組件，包括時間軸、卷簾地圖等。地圖、圖表等都有新的增強和改進。
今年我們新增了多款Vue組件，包括時間軸、卷簾地圖等。地圖、圖表等組件都有新的增強和改進。
這是我們做的全球新冠疫情圖范例。使用組件技術做了封裝，用戶不用一行一行寫代碼，操作更方便、開發更快捷。
新的Web模板技術，可以讓應用開發更便捷。直接提供多種行業應用模板，用戶只需修改LOGO、配色，或刪除不用的地方即可。
再上面就是大屏，可快速開發建站。
No Code無代碼開發，可以快速建站，包括SuperMap iPortal門戶首頁、地圖大屏App等，都可以進行拖拉式操作，不需要寫代碼就可以完成可視化定制。門戶首頁可以拖出來，Web應用可以用大屏拖出來。
地圖大屏也做了一些增強。
以前做了大屏只能看，不能互動，不能點，點了以后也不能操作。現在能看、能點、能互動。有了交互更好用。
包括，我們對布局也做了優化，移動端可以自己修改布局。
包括超寬屏終端都可以適配，這是一個項目的照片。
另外一個定制就是SuperMap iPortal站點定制和擴展增強。
從首頁到登錄頁、管理頁甚至各個Web Apps都支持定制和擴展。
從而實現No Code的可視化定制，同時做了一些新的組件和能力增強。
可以用這個特性快速搭建一個新的首頁，從上面的菜單、左上角的LOGO，包括Banner、橫幅各種內容都支持修改、增加和刪除。甚至用戶不懂開發都可以直接進行操作。此外，該布局是自適應的，在手機上同樣可以觀看。
這是2019年已有功能，今年我們做了新的增強。另外就是全代碼定制。
你可以基于自己的技術直接寫一個首頁。不管是我們提供的組件，還是你自己寫的組件，或是第三方組件都可以拿來使用。
包括我們的登錄頁和資源管理頁都可以進行修改和定制。
此外，大屏本身也是可以擴展的。
包括數據上圖。
數據洞察，都是可以修改和定制的。
可以加自己的圖表、UI。
前面所提到的是定制開發，再上層就是直接使用的WebApp。
如果大家感興趣，可以去我們官網：，或GTC網站：來觀看新特性。
數據上圖，制圖能力更豐富。
可以在線打印Web地圖。
簡單回顧一下，我們講到的兩大部分技術：一個是云原生GIS技術，讓GIS后臺服務管理運維更高效，另一個是Web端GIS技術，讓GIS前端應用開發定制更快速。一個是高效，一個是快速。
總的報告可以用兩個圖連起來，之一就是K8s部署結構圖，通過它可以把云原生GIS技術一覽無余，包括SuperMap iServer、SuperMap iPortal、SuperMap iManager之間的關系、用了什么技術等都可以看到。
第二張圖如上所示，我們在Web端的整體技術層次都可以看到，從SuperMap iClient Libraries類庫，到組件、模板，到大屏、Site UI定制、擴展，以及WebApps等等。
以上就是我的報告，謝謝大家。
webgis中為什么加入兩個地圖功能后出錯
一開始看到OpenLayers，就有一個問題。就是它作為WebGIS的前端，通俗地說，是“顯示”地圖的。那么，它顯示的地圖是什么，是怎么顯示的，又是怎么實現的？——暫且把這個問題叫做地圖表現。我覺得最關鍵的就是Map類，把這個類分析清楚了，問題就解決了一大半了。
前面之一回里說過怎么實例化一個地圖，怎么向地圖里加圖層加控件。其實，地圖是這樣的，它就像一個容器，可以盛東西。要分析它光理解這些還不夠，我們要知道這個容器是怎么做出來的，及具體都有什么功能。
Map類有兩個常量：Z_INDEX_BASE和EVENT_TYPES，不說了，可顧名而思其意。再看它定義的一些屬性：div（The element that contains the map）、baseLayer（The currently selected base layer）、events（An events object that handles all events on the map）。是這樣，web頁的div通過以id或name的形式獲得map對象，然后layers和control在加載到map上，表現為地圖。順便說一句，控件control和事件event是相關聯的，這以后會說。
OpenLayers.Map類提供了兩種實例化方式，舉例來看：
[代碼]js代碼：
// create a map with default options in an element with the id "map1"
var map = new OpenLayers.Map("map1");
// create a map with non-default options in an element with id "map2"
//Optional object with properties to tag onto the map.
var options = {
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: 'meters',
projection: "EPSG:41001"
};
var map = new OpenLayers.Map("map2", options);
OpenLayers.Map類實現的函數APIMethod是分組的，比如Layer Functions、Control Functions、Popup Functions、Container Div Functions、Zoom, Center, Pan Functions、Layer Options、Baselayer Functions、Zooming Functions、Translation Functions。其中，最關鍵的是Layer Functions和Control Functions，因為就是Layer對象和Control對象構成了map的主體。下面從每組函數中挑選出一兩個來，看看具體實現過程。
Layer Functions：
就看addLayer函數吧，下面的addLayers就是調用的它，代碼如下：
[代碼]js代碼：
addLayer: function (layer) {
for(var i=0; i this.layers.length; i++) {
if (this.layers[i] == layer) {
var msg = "You tried to add the layer: " + layer.name +
" to the map, but it has already been added";
OpenLayers.Console.warn(msg);
return false;
}
}
layer.div.style.overflow = "";
this.setLayerZIndex(layer, this.layers.length);
if (layer.isFixed) {
this.viewPortDiv.appendChild(layer.div);
} else {
this.layerContainerDiv.appendChild(layer.div);
}
this.layers.push(layer);
layer.setMap(this);
if (layer.isBaseLayer) {
if (this.baseLayer == null) {
// set the first baselaye we add as the baselayer
this.setBaseLayer(layer);
} else {
layer.setVisibility(false);
}
} else {
layer.redraw();
}
this.events.triggerEvent("addlayer");
}
可以看到其中涉及到layer的一些 *** ，下一回具體介紹OpenLayers. Layer類。
[代碼]js代碼：
Control Functions：
addControl: function (control, px) {
this.controls.push(control);
this.addControlToMap(control, px);
}
可以看出，添加控件的過程是由controls.Push()和addControlToMap()兩個函數共同完成的。
[代碼]js代碼：
addControlToMap: function (control, px) {
// If a control doesn't have a div at this point, it belongs in the
// viewport.
control.outsideViewport = (control.div != null);
control.setMap(this);
var div = control.draw(px);
if (div) {
if(!control.outsideViewport) {
div.style.zIndex = this.Z_INDEX_BASE['Control'] +
this.controls.length;
this.viewPortDiv.appendChild( div );
}
}
}
Popup Functions：這組函數和上兩組函數相似，是在地圖上添加或刪除Popup 對象。
Zoom, Center, Pan Functions：
[代碼]js代碼：
//Allows user to pan by a value of screen pixels
pan: function(dx, dy) {
// getCenter
var centerPx = this.getViewPortPxFromLonLat(this.getCenter());
// adjust
var newCenterPx = centerPx.add(dx, dy);
// only call setCenter if there has been a change
if (!newCenterPx.equals(centerPx)) {
var newCenterLonLat = this.getLonLatFromViewPortPx(newCenterPx);
this.setCenter(newCenterLonLat);
}
}
Zooming Functions:
這里就看看放大縮小函數吧。
zoomIn: function() {
this.zoomTo(this.getZoom() + 1);
}
zoomOut: function() {
this.zoomTo(this.getZoom() - 1);
}
顯然，zoomIn和zoomOut都使用了getZoom *** ，放大就是讓zoom加1，縮小減1。
怎么用ArcGIS制作Web地圖
ArcGIS
Web地圖由底圖和一組相關圖層構成，用戶可與之交互以執行某一有意義的任務。這些地圖可供廣大用戶使用，并且包括多比例底圖、針對特定受眾的業務圖層以及可幫助用戶深入了解感興趣要素的信息彈出窗口。這些地圖還支持可視化、編輯、分析和時間功能。它們是
Web 地圖應用程序的基礎，并且可以通過包括移動設備、桌面應用程序和 Web 瀏覽器在內的多種客戶端進行查看。
如何創作 Web地圖
可通過以下三個基本步驟來創建 Web
地圖：選擇區域，確定要顯示的內容，然后保存并共享您的工作。可以從新地圖開始創建，或使用現有地圖創建。打開現有地圖時，可更改范圍、定位地點、查看圖例、查看有關要素的信息等。不管采用何種 *** ，都可以從底圖庫選擇底圖、添加數據圖層、配置彈出窗口、包含特定位置的書簽、包含地圖的描述，然后將其另存為自己的項目，并通過鏈接或者將其嵌入網站或應用程序中與他人共享。要創建引人注目的
Web 地圖，請考慮以下提示。
創建可用、易用且可操作的地圖
高質量的地圖可幫助您在 Web 上生動形象地展示地理信息。
作為地圖創作者，您的角色實質上就是開放這些信息的訪問權，并通過可用、易用且可操作的方式將您的地圖呈現出來，無論這些地圖是通過瀏覽器、移動設備還是桌面應用程序來顯示。
使用有意義的底圖和圖層
地圖應具有一定的意義，如講述一段故事、傳達一種思想或展示一個情景。為達到這個目的，您的底圖和圖層應具有以下特點：具有高質量的制圖效果的底圖和圖層、提供多種比例、可快速繪制、包含豐富準確的信息、針對特定群體;如果地圖的符號系統不夠直觀，還需要包含可查看的圖例。
您可能還會考慮包含專用于編輯時間、影像和要素的圖層。此外，通過添加一些不屬于現有圖層的要素，還可以幫助您的用戶深入了解您的地圖。例如，您可能需要在最近的火線中添加一些照片和文字說明。可以通過添加地圖注釋圖層或從文件導入要素來添加要素。
顯示重要信息
通常，提供詳細信息的更佳方式是在用戶與地圖交互時將其顯示出來，例如，通過在用戶發出相關請求時顯示彈出窗口和圖例。由于圖層可能包含大量要素數據，因此應仔細考慮要在彈出窗口中顯示哪些屬性以及這些信息的顯示方式。您不希望您的用戶被一些不相關或非必要的信息干擾;而是希望僅顯示與特定地圖相關的重要信息，并考慮在彈出窗口中包括格式化的文本、圖像、圖表等。您還可以考慮添加可編輯要素，以便用戶可以添加和移除要素及相關信息。
提供充足信息量的項目詳細信息
這些用于描述您的地圖的信息應該清楚明確。請花一些時間來提供信息性標題、摘要、描述和標簽，以便其他人可以了解地圖顯示的內容。最后，請確保對他人在地圖項目詳細信息頁面添加的任何評論做出響應。您甚至可以主動添加評論，以推廣地圖中的特定要素;例如，可以鼓勵用戶查看您剛剛添加的新的航空影像。
與您所在組織的所有人共享
Web 地圖可通過 Web
瀏覽器、移動設備和桌面客戶端進行訪問，從而使其成為用于與廣大用戶進行共享的強大工具。要獲得更大數量人群的關注，請確保將地圖共享給所有人，并確認需要查看您地圖的所有人都能夠訪問所有圖層。
WebGIS在現實生活中的應用有哪些？
地圖瀏覽（地圖、路況）
poi位置查詢
路徑查詢（公交線路、換乘，自駕車路線）
關于web前端gis地圖應用和GIS地圖制作的介紹到此就結束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關注本站。
