// 构建map容器

var view = new MapView({

    container: 'mapId',

    map: map

});

/********************

       * 添加底图

********************/

var imageLayer = new MapImageLayer({

    url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',

     id: 'basicLayer'

});

map.add(imageLayer)

var geojsonLayer = new GeoJSONLayer({

   id: 'beijing',

   url: './data/beijing.json'

});

map.add(geojsonLayer)

// 查询北京范围内的geometry并进行坐标转换

map.findLayerById('beijing').queryFeatures().then((res) => {

   let tempArr = []

   res.features[0].geometry.rings[0].forEach((item, index) => {

       tempArr.push(_getLngLat(item))

    })

    res.features[0].geometry.rings[0] = tempArr

    geometryBeiJing = res.features[0].geometry

    view.goTo(geometryBeiJing)

})

/**

   * 墨卡托转经纬度

   * @param poi 墨卡托

   * @returns {{}}

   * @private

*/

function _getLngLat(poi){

   var lnglat = [];

   lnglat[0] = poi[0]/20037508.34*180;

    var mmy = poi[1]/20037508.34*180;

    lnglat[1] = 180/Math.PI*(2*Math.atan(Math.exp(mmy*Math.PI/180))-Math.PI/2);

        return lnglat;

}

// 渲染点图层

function getFeatures (list) {

   //原始数据点集合

   var gras = [];

   for (var i = 0; i < list.length; i++) {

      gras.push(new Graphic({

          geometry: new Point({

              longitude: list[i].lon,

              latitude: list[i].lat

         }),

         attributes: {

              id: list[i].id,

              dz_rank: list[i].dz_rank,

              lon: list[i].lon,

              lat: list[i].lat,

        }

      }))

   }

   // 过滤北京内数据

   var mapArr = [];

   gras.forEach((item, index) => {

      if (geometryEngine.contains(geometryBeiJing, item.geometry))

      {

            mapArr.push(new Graphic({

              geometry: item.geometry,

              attributes: item.attributes

            }))

       }

    })

    //字段定义

   var fields = []

    for (var col in gras[0]['attributes']) {

       let type = 'string'

       if (col === 'lon' || col === 'lat') {

          type = 'double'

       } else {

          type = 'integer'

       }

       fields.push({

          name: col,

          alias: col,

          type: type

       })

   }

   // 分级渲染

   const less25 = {

      type: 'picture-marker', // autocasts as new SimpleFillSymbol()

      url: png1,

      height: 12,

      width: 10

   };

   const less50 = {

      type: 'picture-marker', // autocasts as new SimpleFillSymbol()

      url: png2,

      height: 12,

      width: 10

   };

   const less75 = {

      type: 'picture-marker', // autocasts as new SimpleFillSymbol()

      url: png3,

      height: 12,

      width: 10

   };

   const less100 = {

      type: 'picture-marker', // autocasts as new SimpleFillSymbol()

      url: png4,

      height: 12,

      width: 10

   };

   const renderer = {

       type: 'class-breaks', // autocasts as new ClassBreaksRenderer()

       field: 'dz_rank',

       classBreakInfos: [

            {

              minValue: 0,

              maxValue: 0.25,

              symbol: less25,

              label: '无震感'

            },

            {

              minValue: 0.25,

              maxValue: 0.5,

              symbol: less100,

              label: '轻微震感'

            },

            {

              minValue: 0.5,

              maxValue: 0.75,

              symbol: less75,

              label: '明显震感'

            },

            {

              minValue: 0.75,

              maxValue: 1.0,

              symbol: less50,

              label: '强烈震感'

            }

       ],

       legendOptions: {

            title: '震感级别'

       }

    };

    // 弹窗

    let template = {

       title: '{id}',

       content: [

            {

              // Autocasts as new TextContent()

              type: 'text',

              text: '经度：{lon}'

            },

            {

              // Autocasts as new TextContent()

              type: 'text',

              text: '纬度：{lat}'

            },

            {

              // Autocasts as new TextContent()

              type: 'text',

              text: '震感级别：{dz_rank}'

            },

            {

              // Autocasts as new TextContent()

              type: 'text',

              text: '描述：文字描述'

            }

          ],

        }

        //定义图层

        var layer = new FeatureLayer({

          id: 'newLayer',

          source: mapArr,

          renderer: renderer,

          geometryType: 'point',

          fields: fields,

          objectIdField: 'id',

          popupTemplate: template

        })

        map.add(layer)

        // 添加图例

        const legend = new Legend({

          view: view,

          layerInfos: [{

            layer: layer

          }]

        });

        view.ui.add(legend, 'bottom-right');

      }