arcgis js api 4.x根据Graphic数组创建FeatureLayer。

        FeatureLayer在大部分情况下是使用已发布的地图服务的要素图层里的数据,如果想要展示特定的业务数据,比如数据库查询的数据点,首先想到的是GraphicsLayer,也可以使用FeatureLayer,给FeatureLayer设置数据源(Graphic数组)、字段信息、渲染器等信息。接下来分基本的四步(定义字段、创建Graphic数组、定义渲染器、创建FeatureLayer)记录这个过程。

1、定义字段

                var fields = [
                    {
                        name: "ObjectID",
                        alias: "ObjectID",
                        type: "oid"   //   每个要素必须的字段,字段值必须唯一,当做是整数类型。。。
                    },
                    {
                        name: "title",
                        alias: "title",
                        type: "string"  //字符串类型
                    },{
                        name: "size",  //可以用来渲染符号大小
                        alias: "size",
                        type: "integer"  //整数类型
                    }];     //除了上面的三种类型,还有 double、date。。。

2、创建Graphic数组

                var graphics=[];  
                var startx=118;
                var starty=38;
                var i=1;  // 用于ObjectID属性
                // 每隔 0.05经度  0.05纬度创建一个点
                for(var x=startx;x<120;x+=0.05){
                    for(var y=starty;y<40;y+=0.05){  //一共创建1600个点
                        graphics.push({
                            geometry: new Point({
                                x: x,
                                y: y  //没指定坐标系,默认是WGS84坐标系
                            }),
                            attributes: {
                                ObjectID:i,
                                title: "title",
                                size:parseInt(Math.random()*5000+5000), 
                            },
                        });
                        i++;
                    }
                }

3、创建渲染器

               var renderer = {
                    type: "simple", // 简单渲染器  new SimpleRenderer()
                    symbol: {
                        type: "point-3d", // 符号类型  new PointSymbol3D()
                        symbolLayers: [{
                            type: "object",  // “符号子类型”  new ObjectSymbol3DLayer()
                            //几何体样式 sphere(球) cylinder(圆柱) cube(立方块) cone(圆锥) inverted-cone(倒圆锥) diamond(钻石) tetrahedron(四面体)
                            resource: { primitive: "sphere" },
                            material: { color: "blue" }
                        }]
                    },
                    visualVariables: [{    //视觉变量
                        type: "size",
                        field: "size",
                        valueUnit: "feet" // 指定渲染字段的单位,还有meter。。。
                    }]
                };

4、创建FeatureLayer,创建地图,创建Scene,设置初始的地图视图位置。

                var featureLayer = new FeatureLayer({
                    source: graphics,
                    fields: fields,
                    renderer: renderer
                });
                var map = new Map({
                    basemap: "satellite",
                    ground: "world-elevation",
                    layers:[featureLayer]
                });
                var initCam = {
                    position: {
                        x: 119,
                        y: 37,
                        z: 332780,
                        spatialReference: {
                            wkid: 4326
                        }
                    },
                    heading: 358.8,
                    tilt:30
                };
                var view = new SceneView({
                    map: map,
                    container: "viewDiv",
                    camera: initCam
                });

渲染效果图:

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值