Arcgis for JavaSctipt之常用Layer详解

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

下载地址

时间： 2024-09-30 17:27:30

Arcgis for JavaSctipt之常用Layer详解的相关文章

logback logback.xml 常用配置详解

一:根节点 包含的属性: scan: 当此属性设置为true时,配置文件如果发生改变,将会被重新加载,默认值为true. scanPeriod: 设置监测配置文件是否有修改的时间间隔,如果没有给出时间单位,默认单位是毫秒.当scan为true时,此属性生效.默认的时间间隔为1分钟. debug: 当此属性设置为true时,将打印出logback内部日志信息,实时查看logback运行状态.默认值为false. 例如: <configuration scan="true" scan

编程常用设计模式详解--（上篇）（工厂、单例、建造者、原型）

参考来自:http://zz563143188.iteye.com/blog/1847029 一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接模式.组合模式.享元模式. 行为型模式,共十一种:策略模式.模板方法模式.观察者模式.迭代子模式.责任链模式.命令模式.备忘录模式.状态模式.访问者模式.中介者模式.解释器模式. 二.设计模式的六大原则 1

logback logback.xml常用配置详解（三） &lt;filter&gt;

转自:logback logback.xml常用配置详解(三) <filter> logback 常用配置详解(三) <filter> <filter>: 过滤器,执行一个过滤器会有返回个枚举值,即DENY,NEUTRAL,ACCEPT其中之一.返回DENY,日志将立即被抛弃不再经过其他过滤器:返回NEUTRAL,有序列表里的下个过滤器过接着处理日志:返回ACCEPT,日志会被立即处理,不再经过剩余过滤器. 过滤器被添加到<Appender> 中,为<

logback logback.xml常用配置详解（二）&lt;appender&gt;

logback 常用配置详解(二) <appender> <appender>: <appender>是<configuration>的子节点,是负责写日志的组件. <appender>有两个必要属性name和class.name指定appender名称,class指定appender的全限定名. 1.ConsoleAppender: 把日志添加到控制台,有以下子节点: <encoder>:对日志进行格式化.(具体参数稍后讲解 ) &

logback 常用配置详解（二） &lt;appender&gt;

logback 常用配置详解(二) <appender> <appender>: <appender>是<configuration>的子节点,是负责写日志的组件. <appender>有两个必要属性name和class.name指定appender名称,class指定appender的全限定名. 1.ConsoleAppender: 把日志添加到控制台,有以下子节点: <encoder>:对日志进行格式化.(具体参数稍后讲解 ) &

curl常用选项详解

curl常用选项详解 作者:尹正杰 又是下班的时间了,让我们一起来学习一下今天的Linux命令吧~我一半只把自己常用的参数列出来,其他的有但是我们几乎不常用,大家是 可以有兴趣的话可以自己参考哟~嘻嘻!在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具,可以说是一款很强大的http命令 行工具.它支持文件的上传和下载,是综合传输工具,但按传统,习惯称url为下载工具. 1.用curl抓取网页数据

cat常用参数详解

cat常用参数详解 作者:尹正杰 最近,我的一个朋友对linux特别感兴趣,于是我觉得每天交给他一个命令的使用,这样一个月下来也会使用30个命令,基本的操作他应该是没啥问题啦,接下来让我们看看 今天的命令吧. 还记得我们昨天学的命令吗?让我们一起看看我的目录下有是吗文件或者目录吧: 通过昨天学的命令,我们看出来了log.txt是我最近修改的一个文件,那么如何去看这个文件的内容呢?让我们一起学习cat吧 一.Cat的基本用法就是cat + [参数(这个参数是可以省略的)] + 文件名称. 例如:

logback 常用配置详解&lt;appender&gt;

logback 常用配置详解 <appender> <appender>: <appender>是<configuration>的子节点,是负责写日志的组件. <appender>有两个必要属性name和class.name指定appender名称,class指定appender的全限定名. 1.ConsoleAppender: 把日志添加到控制台,有以下子节点: <encoder>:对日志进行格式化.(具体参数稍后讲解 ) <

hbase shell基础和常用命令详解

HBase是Google Bigtable的开源实现,它利用Hadoop HDFS作为其文件存储系统,利用Hadoop MapReduce来处理HBase中的海量数据,利用Zookeeper作为协同服务. 1. 简介 HBase是一个分布式的.面向列的开源数据库,源于google的一篇论文<bigtable:一个结构化数据的分布式存储系统>.HBase是Google Bigtable的开源实现,它利用Hadoop HDFS作为其文件存储系统,利用Hadoop MapReduce来处理HBase