Arcgis for JavaSctipt之常用Layer详解

标签：arcgis   js   map   

Arcgis forJavaSctipt之常用Layer详解

概述：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>实现的。

下载地址

Arcgis for JavaSctipt之常用Layer详解

标签：arcgis   js   map   

原文地址：http://blog.csdn.net/gisshixisheng/article/details/42555443