1. Web/H5 使用 panolens.js 實現360全景地圖
panolens.js 是一款很強大的 全景圖片查看器，也可播放視頻，詳情可查看 官網
最近在瀏覽東西時不小心發現 GitHub 上也有 panolens.js 的 文檔和demo 。
大概分為兩種模式，模塊化引用 和 普通html引用，如下圖：
本文章主要分享一下 普通html引入 ，舉個栗子：
哇哦竟然實現了，小夥伴們趕快試試吧~~~ 記得點贊哦~~~
2. 電子地圖系統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的縮寫)，這些技術的綜合運用大大擴展了系統功能，大幅提高了系統響應速度。
3. 百度地圖web開發，全景模式下的問題
每次放大後，滑鼠先右擊一下就退出全景模式了，再點擊詳情地址OK了，說實話我也很煩它，但沒法徹底屏蔽掉，忍無可忍就換Google地圖吧，那個更新的速度也是網路沒法比的！
4. google地圖(web版)是怎麼實現的
主要技術是javascript，和伺服器交互的javascript編程，即Ajax。其中核心技術是地圖 API，這里有一個google自己開發的集成 Google AJAX API技術，基於通過標准 HTTP 請求發送的網址參數來創建地圖，並將地圖作為可在網頁上顯示的圖像返回！
可以去google地圖的開發者網站看看 http://code.google.com/intl/zh-CN/apis/maps/documentation/index.html。
5. javaweb 開發有哪些地圖插件是到鄉鎮級別的
<!DOCTYPE><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>網路地圖</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script src="http://api.map..com/api?v=1.4" type="text/javascript"></script></head><body> <input type="text" id="cityName" value="福州"/><input type="button" onclick="setCity()" value="查找" /><div id="container" style="width:1024px;height:600px;"></div> <script type="text/javascript"> var map = new BMap.Map("container"); //在container容器中創建一個地圖,參數container為div的id屬性; var point = new BMap.Point(120.2,30.25); //創建點坐標 map.centerAndZoom(point, 14); //初始化地圖，設置中心點坐標和地圖級別 map.enableScrollWheelZoom(); //激活滾輪調整大小功能 map.addControl(new BMap.NavigationControl()); //添加控制項：縮放地圖的控制項，默認在左上角； map.addControl(new BMap.MapTypeControl()); //添加控制項：地圖類型控制項，默認在右上方； map.addControl(new BMap.ScaleControl()); //添加控制項：地圖顯示比例的控制項，默認在左下方； map.addControl(new BMap.OverviewMapControl()); //添加控制項：地圖的縮略圖的控制項，默認在右下方； TrafficControl var search = new BMap.LocalSearch("中國", { onSearchComplete: function(result){ if (search.getStatus() == BMAP_STATUS_SUCCESS){ var res = result.getPoi(0); var point = res.point; map.centerAndZoom(point, 11); } },renderOptions: { //結果呈現設置， map: map, autoViewport: true, selectFirstResult: true } ,onInfoHtmlSet:function(poi,html){//標注氣泡內容創建後的回調函數，有了這個，可以簡單的改一下返回的html內容了。 // alert(html.innerHTML) }//這一段可以不要，只不過是為學習更深層次應用而加入的。 }); function setCity(){ search.search(document.getElementById("cityName").value); } search.search(document.getElementById("cityName").value); </script></body></html>第二種： 谷歌
首先引入 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
代碼如下
js代碼
var myLatlng = new google.maps.LatLng(ret.attache.json.lat, ret.attache.json.lng);// 中國地圖全圖
var optMap =
{
zoom: 15,
center: myLatlng,
streetViewControl:false,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [/**google.maps.MapTypeId.SATELLITE ,google.maps.MapTypeId.HYBRID* */], // comment
position: google.maps.ControlPosition.TOP_LEFT
},
// navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT,
position: google.maps.ControlPosition.LEFT
},
//ROADMAP SATELLITE
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('container'),optMap);
map.setOptions({Zoom:18,center:myLatlng});
html
<div id="locationDiv" >
<div id="container" style="position:relative; width:450px; height:300px;"></div>
</div>