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

下载地址

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

CSS中背景图片定位方法

上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。

51610
来自专栏前端知识分享

第103天:CSS3中Flex布局(伸缩布局)详解

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

10510
来自专栏猛牛哥的博客

HTMLayout 界面贴图技术

35840
来自专栏知道一点点

CSS3 基础知识[转载minsong的博客]

CSS3 基础知识 1.边框     1.1 圆角  border-radius:5px 0 0 5px;     1.2 阴影  box-shadow:2px...

27960
来自专栏一“技”之长

Android开发之LinearLayout布局详解

        LinaerLayout又被称为线性布局,是Android界面开发中常用的一种容器视图控件。可以使用XML布局文件配置和代码动态创建两种方式来使...

12730
来自专栏腾讯社交用户体验设计

浏览器亚像素渲染与小数位的取舍

15120
来自专栏我分享我快乐

web前端设计基础单词表

A align 对齐 active 激活 absolute 绝对 alpha 图像通道 animate 动画 animation 动画片 alert 提醒 ad...

42680
来自专栏非典型技术宅

OC绘制基本图形1. UIKit中封装了一些最常用的绘图方法2. 贝塞尔路径常用方法列表(BezierPath)3. 保存屏幕截图,并存储至相册

14740
来自专栏姬小光

姬小光前端小讲堂【第003期】

在上一期的代码中,我们用到 h1,p,a 等标签,这些标签确定了我们想在网页中展示一个标题,一个段落,和一个链接。

8610
来自专栏黑泽君的专栏

4道html笔试小题

17150

扫码关注云+社区

领取腾讯云代金券