ArcGIS API for JavaScript开发之FeatureLayer添加点图层

流氓也是种气质 _Cookie

已于 2022-04-12 15:26:01 修改

阅读量1.6k

点赞数

于 2022-04-07 22:55:05 首次发布

本文链接：https://blog.csdn.net/qq_37550440/article/details/124028258

版权

ArcGIS API for JavaScript 3.x 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

需求：构建点位要素服务图层FeatureLayer

分析：由于没有发布要素服务图层，故需自定义方式构建

new FeatureLayer(featureCollectionObject, options?)

1.选择构建FeatureLayer的方法及思路

1.选择构建的方式new FeatureLayer(featureCollectionObject, options?)

2.查看（featureCollectionObject, options? ）对应的值

2.版本一实现代码：

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Test Map</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.24/"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #addbtn {
      position: absolute;
      z-index: 999;
      top: 20px;
      left: 100px;
    }
  </style>
  <script>



    require([
      "esri/map",
      "esri/SpatialReference",
      "esri/layers/FeatureLayer",
      "esri/geometry/Point",
      "esri/tasks/FeatureSet",
      "esri/graphic",
      "dojo/domReady!",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/Color",
    ],
      function (Map, SpatialReference, FeatureLayer, Point, FeatureSet, Graphic, Color, SimpleMarkerSymbol) {
        var map = new Map("map", {
          basemap: "osm",
          center: [116.943089, 36.643737],
          zoom: 18
        });

        var spatialReference = new SpatialReference(4326);
        var pointArr = [
          new Point(116.94431351934418, 36.642791191513744, spatialReference),
          new Point(116.94313181636085, 36.644263733181496, spatialReference),
          new Point(116.94323946773243, 36.644333923319806, spatialReference),
          new Point(116.94214699103674, 36.64316768441554, spatialReference),
          new Point(116.94173145496477, 36.643359669286696, spatialReference),
          new Point(116.94251530866333, 36.644235392555245, spatialReference),
        ];

        var features = [];
        let pointSymbol = new SimpleMarkerSymbol({
          "color": [255, 255, 255, 64],
          "size": 12,
          "angle": -30, // 标记物相对于屏幕的角度，单位为角度。
          "xoffset": 0,
          "yoffset": 0,
          "type": "esriSMS",
          "style": "esriSMSCircle", // 圆
          "outline": { //标记符号的轮廓。
            "color": '#ff0000',
            "width": 10,
            "type": "esriSLS",
            "style": "esriSLSSolid" // 实线
          }
        });
        for (var i = 0; i < pointArr.length; i++) {
          var graphics = new Graphic(pointArr[i], pointSymbol, { "OBJECTID": i, "LON": pointArr[i].x, "LAT": pointArr[i].y });
          features.push(graphics);
        }

        var fields = [
          { name: "OBJECTID", type: "esriFieldTypeOID", alias: "OBJECTID" },
          { name: "LON", type: "esriFieldTypeDouble", alias: "LON" },
          { name: "LAT", type: "esriFieldTypeDouble", alias: "LAT" }
        ];

        var featureSetJson = {
          displayFieldName: "",
          geometryType: "esriGeometryPoint",
          fieldAliases: {
            OBJECTID: "OBJECTID",
            LON: "LON",
            LAT: "LAT"
          },
          fields: fields,
          spatialReference: spatialReference,
          features: features
        };
        var featuresSet = new FeatureSet(featureSetJson);

        var layerDefinition = {
          "geometryType": "esriGeometryPoint",
          "fields": fields
        };
        var featureCollection = {
          layerDefinition: layerDefinition,
          featureSet: featuresSet
        };
        // 地图加载完成后执行函数
        map.on('load', () => {
          var featureLayer = new FeatureLayer(featureCollection,{
            infoTemplate: { // 点击弹框配置
                title: '123',
                content: 'OBJECTID值为: ${OBJECTID}<br>LON值为:${LON}<br>LAT值为:${LAT}'
            },
          });
          map.addLayer(featureLayer);
        })
      })

  </script>
</head>

<body>
  <div id="map">
    <button id="addbtn">PictureGeometry</button>
  </div>
</body>

</html>

版本一效果图：

3.版本二实现代码思路更清晰：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.24/"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
 
        #addbtn {
            position: absolute;
            z-index: 999;
            top: 20px;
            left: 100px;
        }
    </style>
    <script>
        require([
            "esri/map",
            "esri/SpatialReference",
            "esri/graphic",
            "esri/geometry/Point",
            "esri/symbols/PictureMarkerSymbol",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/geometry/Polygon",
            "esri/symbols/PictureFillSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/Color",
            "dojo/domReady!",
            "esri/layers/FeatureLayer",
            "esri/SpatialReference",
        ], function (Map,SpatialReference, Graphic, Point,PictureMarkerSymbol,SimpleMarkerSymbol,
            Polygon, PictureFillSymbol, SimpleFillSymbol,FeatureLayer,SpatialReference,
            SimpleLineSymbol,Color,) {
            var map = new Map("map", {
                // 底图格式
                basemap: "osm",
                // 视觉中心点
                center: [106.897222, 39.858333],
                // 缩放等级
                zoom: 17,

            });
            // 地图加载完成后执行函数
            map.on('load',()=>{
                addFeatureLayer_Point()
            })
 
            function addGeometry() {
                // "wkid": 4326  102100的不同 位置也会不同
                var geometry = new Point({ "x": 13216981.21329723, "y": 3772852.221308317, "spatialReference": { "wkid": 102100 } });
                var symbol = new PictureMarkerSymbol("1.png",40,40);
                // 前面二行可以参考官方 这句整合需要经验（你看到了类似的例子/或者记住这样的写法）
                map.graphics.add(new Graphic(geometry, symbol));
            }
        function addFeatureLayer_Point() {// 添加点要素图层
            var layerDefinition = {//图层信息
            "geometryType": "esriGeometryPoint",//几何类型，此处为点
            "objectIdField": "ObjectID",//要素id字段  一定是和点位的字段一一对应
            "drawingInfo": {//显示信息
                "renderer": {//渲染
                    "type": "simple",//渲染类型
                    "symbol": {//符号
                        "color": [0, 48, 161, 255],//符号颜色
                        "size": 120,//符号大小
                        "type": "esriSMS",//符号类型
                        "style": "esriSMSCircle"//符号样式
                    }
                }
            },
            "fields": [//字段
                {
                    "name": "ObjectID",//名称   一定是和点位的字段一一对应
                    "alias": "ObjectID",//别名 一定是和点位的字段一一对应
                    "type": "esriFieldTypeOID"//类型唯一值不能重复 一定是和点位的字段一一对应
                }, 
                {
                    "name": "val",//名称
                    "alias": "val",//别名
                    "type": "esriFieldTypeDouble"//浮点类型
                }, {
                    "name": "pscode",//名称
                    "alias": "pscode",//别名
                    "type": "esriFieldTypeString"//字符串类型
                }, {
                    "name": "pollutantcode",//名称
                    "alias": "pollutantcode",//别名
                    "type": "esriFieldTypeString"//类型
                }
                ]
        };
        var spatialReference = new SpatialReference(4326);
        var featuresJson = [//要素json
            {
                "attributes": {//属性信息字段需要和fields中对应
                    "pscode": "150300000020",
                    "ObjectID": 0,
                    "pollutantcode": "A21026"
                },
                "geometry": {//几何信息
                    "y": 39.858333,//要素的y坐标
                    "spatialReference": {
                        "wkid": spatialReference
                    },//要素空间参照坐标系的wkid
                    "x": 106.897222//要素的x坐标
                }
            },
            {
                "attributes": {
                    "val": 54471,
                    "pscode": "150600000082",
                    "ObjectID": 1,
                    "pollutantcode": "A21026"
                },
                "geometry": {
                    "y": 39.607433,
                    "spatialReference": {
                        "wkid": 4326
                    },
                    "x": 109.831328
                }
            },
            {
                "attributes": {
                    "val": 3399,
                    "pscode": "150300000016",
                    "ObjectID": 2,
                    "pollutantcode": "A21026"
                },
                "geometry": {
                    "y": 39.466667,
                    "spatialReference": {
                        "wkid": 4326
                    },
                    "x": 106.700556
                }
            },
            {
                "attributes": {
                    "val": 41,
                    "pscode": "150300000021",
                    "ObjectID": 3,
                    "pollutantcode": "A21026"
                },
                "geometry": {
                    "y": 39.8325,
                    "spatialReference": {
                        "wkid": 4326
                    },
                    "x": 106.851667
                }
            },
            {
                "attributes": {
                    "val": 144497,
                    "pscode": "150600000005",
                    "ObjectID": 4,
                    "pollutantcode": "A21026"
                },
                "geometry": {
                    "y": 40.066667,
                    "spatialReference": {
                        "wkid": 4326
                    },
                    "x": 110.266667
                }
            },
            {
                "attributes": {
                    "val": 288,
                    "pscode": "150600000046",
                    "ObjectID": 5,
                    "pollutantcode": "A21026"
                },
                "geometry": {
                    "y": 40.048611,
                    "spatialReference": {
                        "wkid": 4326
                    },
                    "x": 111.2425
                }
            },
            {
                "attributes": {
                    "val": 169,
                    "pscode": "150600000119",
                    "ObjectID": 6,
                    "pollutantcode": "A21026"
                },
                "geometry": {
                    "y": 42.500833,
                    "spatialReference": {
                        "wkid": 4326
                    },
                    "x": 109.835556
                }
            }
            ];
        var featureCollection = {//图层信息
            "layerDefinition": layerDefinition,//图层定义
            "featureSet": {//要素集
                "features": featuresJson,//要素
                "geometryType": "esriGeometryPoint"//几何类型，此处为点
            }
        };
        let featureLayer = new FeatureLayer(featureCollection, {
            id: "featureLayer_point",
            })
        map.addLayer(featureLayer);
    }
 
        });
    </script>
</head>
<body>
    <div id="map">
        
</body>
</html>

流氓也是种气质 _Cookie

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS API for JavaScript开发之FeatureLayer添加点图层

需求：构建点位要素服务图层FeatureLayer分析：由于没有发布要素服务图层，故需自定义方式构建new FeatureLayer(featureCollectionObject, options?)1.选择构建FeatureLayer的方法及思路1.选择构建的方式new FeatureLayer(featureCollectionObject, options?)2.查看（featureCollectionObject, options? ）对应的值2.版本一...
复制链接

扫一扫