JS API 4.x地图渲染之符号（二）(转载)

前情回顾

在ArcGIS API for JavaScript中，用来进行地图渲染的方式主要是符号（Symbol）和渲染器（Renderer）两种。

Symbol渲染方式适用于图形（Graphic）数量较少的情况，主要用来定义图形的外观，例如填充面的颜色、边框的宽度以及透明度等。

上回分享完了符号渲染中的2D点符号渲染，今天来看看2D线符号和2D面符号渲染（套路差不多，我们稍微加快些进度）。

1线符号LineSymbol（抽象类）

线符号（Line symbols）用于在一个要素图层上或者MapView中的单独的图形（Graphic）上绘制线几何对象。线符号的父类是LineSymbol，它只有一个可实例化的子类SimpleLineSymbol。

（1）SimpleLineSymbol类（抽象类LineSymbol的唯一实现类）

SimpleLineSymbol类用于在MapView中渲染2D线几何对象，也用于渲染标记符号（即：点符号marker symbols）和填充符号（即：面符号fill symbols）的轮廓线。

SimpleLineSymbol类也可以用于在SceneView中符号化2D线要素。但是，建议在SceneView中用LineSymbol3D类来创建线符号。

下面的图片描述的是一个要素图层，它的图形是通过SimpleLineSymbol来进行符号化渲染的。

下面的代码构造了一个红色，宽度是5px，样式是“short-dot”的简单线符号：

require(["esri/symbols/SimpleLineSymbol"],
  function(SimpleLineSymbol) {
    //创建一个 简单线符号
    var lineSymbol = new SimpleLineSymbol({
      color: "red",//自动转换（autocast）为Color类的实例对象
      width:"5px",

      style:"short-dot"
    });
});

效果如下：

添加一个线几何对象的流程不再叙述，详细demo请用手机打开：

http://ptm.arcgisonline.cn/demo4.xTutorials/SimpleLineSymbolDemo.html

特别对style属性，有一个对应表：

2 面符号FillSymbol（抽象类）

填充符号（Fill symbols）用于在MapView中的图形图层（GraphicsLayer）或要素图层（FeatureLayer）上绘制面几何对象。可以使用SimpleFillSymbol类或者PictureFillSymbol类来创建填充符号。

填充符号也能用于在SceneView中符号化2D面要素。但是，建议在SceneView中用PolygonSymbol3D类来创建面符号。

（1）SimpleFillSymbol类（实现类）

SimpleFillSymbol类用于在MapView或者SceneView中渲染2D面几何对象。它可以用纯色填充，也可以用特定样式填充。此外，该类有一个可选择的outline属性用来设置面的轮廓线，由SimpleLineSymbol类来定义。

下面的图片描述的是一个要素图层，它的图形是通过SimpleFillSymbol来进行符号化渲染的。

下面的代码构造了一个带绿色轮廓线的红色、透明度是0.9的简单填充符号：

require(["esri/symbols/SimpleFillSymbol"],
  function(SimpleFillSymbol) {
    //创建一个 简单填充符号
    var fillSymbol = new SimpleFillSymbol({
      color: [255,0,0,0.9],//自动转换（autocast）为Color类的实例对象
      style:"solid",
      outline:{//自动转换（autocast）为esri/symbols/SimpleLineSymbol类的实例对象
        color:"green",//自动转换（autocast）为Color类的实例对象
        width:3
      }
    });
});

效果如下：

详细demo请用手机打开：

http://ptm.arcgisonline.cn/demo4.xTutorials/SimpleFillSymbolDemo.html

特别对style属性，有一个对应表：

目前为止，聪明的你一定可以制作一份中国八大菜系的地图了：

或者甜咸两党割据图：

还是别的啥idea？

（2）PictureFillSymbol类（实现类）

PictureFillSymbol类使用一张图片来对MapView中的面要素进行渲染（注意：是repeating模式，意味着图片会充满面几何对象）。url必须指向一个有效的图片。此外，该类有一个可选择的outline属性，由SimpleLineSymbol类来定义。

PictureFillSymbol类不支持在SceneView中使用，只能在MapView中使用。

下面的图片描述的是一个图形（Graphic），它是通过PictureFillSymbol来进行符号化渲染的。

下面的代码构造了一个没有轮廓线的图片填充符号：

 

require(["esri/symbols/PictureFillSymbol"],
  function(PictureFillSymbol) {
      //创建一个 图片填充符号
      var pictureFillSymbol = new PictureFillSymbol({
          url:"http://ptm.arcgisonline.cn/file/ArcGIS.jpg",
          outline:{
              style:"none"
          },
          width:"120px",
          height:"120px"
      });
});

效果如下：

特别地，图形的叠加顺序与添加顺序有关，先add的在最下面：

 

// 将图形添加到2D地图视图中
view.then(function() {
    view.graphics.add(polygonGraphic2);//如果放在最下面add到view中的话，
       //就会把其他的几何对象覆盖上。
    view.graphics.add(polygonGraphic);
    view.graphics.add(polylineGraphic);
    view.graphics.add(pointGraphic);
});

详细demo请用电脑打开：

http://ptm.arcgisonline.cn/demo4.xTutorials/PictureFillSymbolDemo.html

你认为下面的地图有几种实现方法呢？

或者这个：

下次再见！

坐标：ArcGIS极客说

 

附上篇地址：

http://mp.weixin.qq.com/s?__biz=MzAxMDE1MzA4Mw==&mid=2651969482&idx=1&sn=d5755557bd21cdb4bc0193ad07439c42&mpshare=1&scene=1&srcid=1015Lzpdcb8QFlZQRZhPTp5O#wechat_redirect

 

更多资讯请继续关注我们的ArcGIS极客说！

 

转载于:https://www.cnblogs.com/khfang/p/6051356.html