javascript
超图 for javascript 版本入门程序讲解
啟動iServer服務以后,進入到服務管理頁面;在菜單 示范程序 下拉,看到for JavaScript 項;
進入到for JavaScript示范程序;
以下是第一個示范程序的源碼;
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>墨卡托投影系地圖</title><style type="text/css">body{margin: 0;overflow: hidden;background: #fff;}#map{position: relative;height: 553px;border:1px solid #3473b7;}</style><link href='./css/bootstrap.min.css' rel='stylesheet' /><link href='./css/bootstrap-responsive.min.css' rel='stylesheet' /><script src = '../libs/SuperMap.Include.js'></script><script type="text/javascript">var map, layer,host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;url = host + "/iserver/services/map-china400/rest/maps/China";function init(){//初始化地圖map = new SuperMap.Map("map",{controls:[new SuperMap.Control.Navigation() ,new SuperMap.Control.Zoom()]});map.addControl(new SuperMap.Control.MousePosition());//初始化圖層layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, null,{maxResolution:"auto"});//監聽圖層信息加載完成事件layer.events.on({"layerInitialized":addLayer});}//異步加載圖層function addLayer(){map.addLayer(layer);//顯示地圖范圍map.setCenter(new SuperMap.LonLat(0, 0), 1);}</script> </head><body onLoad = "init()"><div id = "map"></div></body> </html>看一下此發布的地圖的坐標系;
最常用于網絡地圖應用的兩個坐標系統是EPSG:4326和EPSG:3857。
EPSG:4326(又名WGS84,未投影)是一個地理的非項目坐標系。它是lat,longs GPS顯示器。它的單位是十進制度。EPSG:4326無法在平面地圖上以有意義的方式顯示。
EPSG:3857(又名Pseudo-Mercator,球形墨卡托或Web墨卡托)是投影坐標系。這是Google Maps和幾乎所有其他Web制圖應用程序使用的坐標系。
?
需要包含for Javascript的庫;SuperMap.Include.js;和相應的樣式文件;
?
<div id = "map"></div>
定義一個div,id為map,作為顯現地圖的容器;
樣式的#map{}部分,定義此容器的樣式;
?
host和url是發布的地圖服務網址;
?
map = new SuperMap.Map("map",{controls:[
??????????????????????? new SuperMap.Control.Navigation() ,
?????????????????????? new SuperMap.Control.Zoom()
??????????? ]});
初始化地圖;第一個參數是div的id;
在地圖上添加地圖瀏覽控件;Control.Navigation
Navigation是不可見控件,監聽鼠標點擊、平移、滾輪等事件來實現對地圖的瀏覽操作。
Control.Zoom(),在地圖上添加縮放控件;就是左上角的加減號的那個;
SuperMap.Control.MousePosition(); ? ? //該控件顯示鼠標移動時,所在點的地理坐標。
?
TiledDynamicRestLayer: 動態分塊圖層,用來對接SuperMap iServer 8C的分塊動態REST圖層服務
"China", 圖層名;
maxResolution {Float} 用于地圖實例化的時候設置最大分辨率(設置該值可以使地圖在分辨率達到某個值的時候無法 再縮小)。當不想將整張地圖都展示在通過 tileSize 指定大小的一張瓦 片上的時候設置該值。設置為auto的時候地圖會自適應視口大小。?
?
異步加載圖層;圖層信息加載完成,執行addLayer();
map.addLayer(layer); 把圖層添加到地圖;
map.setCenter(new SuperMap.LonLat(0, 0), 1); 設置地圖中心點(0,0);SuperMap.LonLat是超圖經緯度類;1是縮放級別。
總結
以上是生活随笔為你收集整理的超图 for javascript 版本入门程序讲解的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 超图iServer版本安装和使用入门图解
- 下一篇: 一些jquery 常用实例图解