arcgis api for js 關於layers圖層的理解

概述：Arcgis for Javasctipt中常見的layer有動態圖層（ArcGISDynamicMapServiceLayer

）、切片圖層（ArcGISTiledMapServiceLayer）、特征圖層（FeatureLayer）、圖象圖層（GraphicsLayer）、標注圖層（LabelLayer）、wms圖層（WMSLayer）和切片wms圖層（WMTSLayer）等幾種。本文結合SVG技術，詳細介紹Arcgis for Javasctipt中常見的layer。

1、Arcgis for Javasctipt中常見的layer簡介

1.1 ArcGISDynamicMapServiceLayer

       ArcGISDynamicMapServiceLayer為動態地圖服務圖層，可以理解為一個mxd的所有內容。

var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSFields/MapServer");

map.addLayer(dynamicMapServiceLayer);

1.2 ArcGISTiledMapServiceLayer

       ArcGISTiledMapServiceLayer為切片地圖服務圖層，是將一個MXD根據不同的級別切成不同的圖片。

var tiledMapServiceLayer = new ArcGISTiledMapServiceLayer(  
  "http://server.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer");

map.addLayer(tiledMapServiceLayer);

1.3 FeatureLayer

       FeatureLayer為特征圖層，可以理解為mxd中的圖層，通過FeatureLayer可以修改圖層的空間信息與屬性信息。

var featureLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer/0",{
    mode: FeatureLayer.MODE_ONDEMAND,
    infoTemplate: infoTemplate,
    outFields: ["*"]
  });

map.addLayer(featureLayer);

1.4 GraphicsLayer

       GraphicsLayer為圖象圖層，是一個客戶端展示的圖層，可以將客戶端繪制的圖形、標記、文字等通過graphic的方式展示。

var graphicsLayer = new GraphicsLayer();

map.addLayer(graphicsLayer);

1.5 LabelLayer

       LabelLayer是一個標注圖層，可以展示FeatureLayer或者GraphicsLayer圖形中根據特定的字段、特定的形式標注出來展現給客戶。

var symbol = new TextSymbol();
var renderer = new SimpleRenderer(symbol);
var labelLayer = new LabelLayer();
labelLayer.addFeatureLayer(featureLayer, renderer, "${CITY_NAME}");
map.addLayer(labelLayer);

1.6 WMSLayer

       WMSLayer為符合OGC標准的WMS圖層。

var wmsLayer = new esri.layers.WMSLayer(wmsURL, {
    resourceInfo: resourceInfo,
    visibleLayers: ['1','2']
  });

map.addLayer(wmsLayer);

1.7 WMTSLayer

       WMTSLayer為符合OGC標准的WMTS圖層。

var layerInfo = new WMTSLayerInfo({
    identifier: "world",
    tileMatrixSet: "EPSG:4326",
    format: "gif"
  });

var options = {
    serviceMode: "KVP",
    layerInfo: layerInfo
  };

var wmtsLayer = new WMTSLayer("http://v2.suite.opengeo.org/geoserver/gwc/service/wmts", options);

map.addLayer(wmtsLayer);

2、SVG簡介

可縮放矢量圖形是基於可擴展標記語言（標准通用標記語言的子集），用於描述二維矢量圖形的一種圖形格式。它由萬維網聯盟制定，是一個開放標准。

ü  SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)；

ü  SVG 用來定義用於網絡的基於矢量的圖形；

ü  SVG 使用 XML 格式定義圖形；

ü  SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有所損失；

ü  SVG 是萬維網聯盟的標准；

ü  SVG 與諸如 DOM 和 XSL 之類的 W3C 標准是一個整體。

2.1 SVG常用標簽

① 直線

<?xml version="1.0"standalone="no"?>

<!DOCTYPE svg PUBLIC"-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

 <svg width="100%"height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg"> 

<line x1="0" y1="0"x2="300" y2="300"

style="stroke:rgb(99,99,99);stroke-width:2"/> 

</svg>

代碼解釋：

x1 屬性在 x軸定義線條的開始；

y1 屬性在 y軸定義線條的開始；

x2 屬性在 x軸定義線條的結束；

y2 屬性在 y軸定義線條的結束；

② 折線

<?xml version="1.0"standalone="no"?>

<!DOCTYPE svgPUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

 <svg width="100%"height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

 <polyline points="0,00,20 20,20 20,40 40,40 40,60"

style="fill:white;stroke:red;stroke-width:2"/>

 </svg>

③ 矩形

<?xml version="1.0"standalone="no"?>

<!DOCTYPE svgPUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

 <svg width="100%"height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

 <rect x="20"y="20" rx="20" ry="20" width="250"

height="100"style="fill:red;stroke:black;

stroke-width:5;opacity:0.5"/> 

</svg>

代碼解釋：

rect 元素的 width 和height 屬性可定義矩形的高度和寬度；

style 屬性用來定義 CSS 屬性；

CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進制值）；

CSS 的 stroke-width屬性定義矩形邊框的寬度；

CSS 的 stroke 屬性定義矩形邊框的顏色；

x 屬性定義矩形的左側位置（例如，x="0"定義矩形到瀏覽器窗口左側的距離是 0px）；

y 屬性定義矩形的頂端位置（例如，y="0"定義矩形到瀏覽器窗口頂端的距離是 0px）；

CSS 的 fill-opacity屬性定義填充顏色透明度（合法的范圍是：0 - 1）；

CSS 的 stroke-opacity屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1）；

CSS 的 opacity 屬性定義整個元素的透明值（合法的范圍是：0 - 1）；

rx 和 ry 屬性可使矩形產生圓角。

④ 圓

<?xml version="1.0"standalone="no"?>

<!DOCTYPE svgPUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg width="100%"height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg"> 

<circle cx="100"cy="50" r="40" stroke="black"

stroke-width="2"fill="red"/> 

</svg>

代碼解釋：

cx 和 cy 屬性定義圓點的 x 和 y 坐標。如果省略 cx 和 cy，圓的中心會被設置為 (0, 0)

r 屬性定義圓的半徑。

⑤ 橢圓

<?xml version="1.0"standalone="no"?>

<!DOCTYPE svgPUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg width="100%"height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg"> 

<ellipse cx="300"cy="150" rx="200" ry="80"

style="fill:rgb(200,100,50);

stroke:rgb(0,0,100);stroke-width:2"/> 

</svg>

代碼解釋：

cx 屬性定義圓點的 x坐標；

cy 屬性定義圓點的 y坐標；

rx 屬性定義水平半徑；

ry 屬性定義垂直半徑。

⑥ 多邊形

<?xml version="1.0"standalone="no"?>

<!DOCTYPE svgPUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg width="100%"height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg"> 

<polygon points="220,100300,210 170,250"

style="fill:#cccccc;

stroke:#000000;stroke-width:1"/> 

</svg>

代碼解釋：

points 屬性定義多邊形每個角的 x和 y 坐標

⑦ 路徑

使用path標簽時，就像用指令的方式來控制一只畫筆，path支持的指令有： 

M = moveto(M X,Y) ：將畫筆移動到指定的坐標位置

L = lineto(L X,Y) ：畫直線到指定的坐標位置

H = horizontal lineto(H X)：畫水平線到指定的X坐標位置

V = vertical lineto(V Y)：畫垂直線到指定的Y坐標位置

C = curveto(CX1,Y1,X2,Y2,ENDX,ENDY)：三次貝賽曲線

S = smooth curveto(SX2,Y2,ENDX,ENDY)

Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次貝賽曲線

T = smooth quadratic Belziercurveto(T ENDX,ENDY)：映射

A = elliptical Arc(ARX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧線

Z = closepath()：關閉路徑

 其中藍色的指令是常用的，綠色的目前為止還沒有用到

a、L H V指令 

M　起點X，起點Y　L（直線）終點X，終點Y　H（水平線）終點X　V（垂直線）終點Y

如：M 10,20 L 80,50 M 10,20 V 50 M 10,20H 90

 b、A指令 

允許不閉合。可以想像成是橢圓的某一段，共七個參數：

ARX,RY,XROTATION,FLAG1,FLAG2,X,Y

RX,RY指所在橢圓的半軸大小

XROTATION指橢圓的X軸與水平方向順時針方向夾角，可以想像成一個水平的橢圓繞中心點順時針旋轉XROTATION的角度。

FLAG1只有兩個值，1表示大角度弧線，0為小角度弧線。

FLAG2只有兩個值，確定從起點至終點的方向，1為順時針，0為逆時針

X,Y為終點坐標

如：m200,250 a 150,30 0 1 0 0,70

⑧ 文本

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg viewBox = "0 0 200 200" version = "1.1">

<text x = "10" y = "25" fill = "navy" font-size = "15">

        It was the best of times

    </text>

    <text x = "10" y = "25" dx = "5" dy = "15" fill = "navy" font-size = "15">

        It was the worst of times.

    </text>

</svg>

3、Arcgis for Javasctipt中常見layer詳解

       上面簡單的介紹了常見的layer和SVG中一些常見的標簽，常見的layer中，ArcGISTiledMapServiceLayer、WMSLayer和WMTSLayer為柵格圖層，ArcGISDynamicMapServiceLayer、FeatureLayer、GraphicsLayer、LabelLayer為矢量圖層。柵格圖層用柵格圖片的方式展示，矢量圖層用SVG（Scalable Vector Graphic）的方式展示，下面就結合SVG對常見的layer做一個詳細的介紹與說明。

3.1 Arcgis for Javascript的頁面組織

       打開一個地圖，點擊右鍵->審查元素，可查看生成完成后的地圖的頁面組織形式，如下：

如上圖，Arcgis for Javascript的頁面組織形式如下圖：

下面就上面的組織形式做一個簡單的介紹：

a、map_root

map_root是地圖的顯示容器，里面包含了地圖、地圖控制、Popup、縮放控件等。

b、esriControlsBR

esriControlsBR是地圖控制控件。

c、  esriPopup

esriPopup是地圖Popup，地圖的InfoWindow是出現在這個div中。

d、 map_zoom_slider

map_zoom_slider是地圖縮放控件。

e、map_tiled

       map_tiled是切片顯示的div。

f、svg

       svg是一些矢量圖層的展示的。

3.2柵格圖層

3.2.1切片圖層和WMTSLayer

如上圖所示，切片圖層和WMTSLayer就是通過上述形式在前段展示的。Arcgis切片的是將圖片按照256*256的大小將圖片切的。

3.2.2WMSLayer

       WMSLayer沒有進行切片，直接將整個圖片顯示。

3.3矢量圖層

       ArcGISDynamicMapServiceLayer、FeatureLayer、GraphicsLayer、LabelLayer等矢量圖層通過svg實現的，其中：

PictureMarkerSymbol是通過<image>實現的。

SimpleMarkerSymbol是通過<circle>或者<path>等實現的。

線對象是通過<path>來實現的。

面對象是通過<circle>、閉合<path>等實現的。

LabelLayer是通過<text>實現的。