arcgis for js 4.x FeatureLayer
1.renderer 常用
2.加载热力图
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>天地图加载</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 800px; width: 800px; overflow: hidden; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/css/main.css" /> <script src="https://js.arcgis.com/4.23/init.js"></script> <script> require(["esri/Map", "esri/views/MapView", "esri/layers/GraphicsLayer", "esri/Graphic", "esri/PopupTemplate", "esri/widgets/Popup", "esri/layers/MapImageLayer", "esri/widgets/Legend", "esri/layers/WebTileLayer", "esri/layers/WMTSLayer", "esri/widgets/BasemapGallery/support/LocalBasemapsSource", "esri/widgets/BasemapGallery", "esri/Basemap", "esri/layers/FeatureLayer", "esri/renderers", "esri/layers/support/Field", "esri/geometry/Extent", "esri/geometry/SpatialReference", 'esri/config', '../4326.js', '../4490.js', 'esri/layers/support/TileInfo', "../MyCustomTileLayer.js", "esri/layers/TileLayer", ], function( Map, MapView, GraphicsLayer, Graphic, PopupTemplate, Popup, MapImageLayer, Legend, WebTileLayer, WMTSLayer, LocalBasemapsSource, BasemapGallery, Basemap, FeatureLayer, renderers, Field, Extent, SpatialReference, esriConfig, epsg4326, epsg4490, TileInfo, MyCustomTileLayer, TileLayer ) { var tileInfo = epsg4326.tileInfo; var key = "天地图key" key = "6a92e00bdfafade25568c053a5ba6de4" var tiledLayer = new MyCustomTileLayer({ urlTemplate: "http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" + key, tileInfo: tileInfo, id: '影像', listMode: 'hide' //这个属性设置是为了在layerlist不显示出来 }); var tiledLayer_poi = new MyCustomTileLayer({ urlTemplate: "http://t0.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" + key, tileInfo: tileInfo, id: '影像标记', listMode: 'hide' }); var tiledLayer1 = new MyCustomTileLayer({ urlTemplate: "http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" + key, tileInfo: tileInfo, id: '矢量', visible: false, listMode: 'hide' }); var tiledLayer_poi1 = new MyCustomTileLayer({ urlTemplate: "http://t0.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" + key, tileInfo: tileInfo, id: '矢量标记', visible: false, listMode: 'hide' }); var basemap = new Basemap({ baseLayers: [tiledLayer, tiledLayer_poi, tiledLayer1, tiledLayer_poi1], }) var map = new Map({ basemap: basemap }); var view = new MapView({ container: "viewDiv", map: map, spatialReference: { wkid: 4326 }, scale: tileInfo.lods[7], //center: [113.754645, 23.198923], //113.27434372047993,22.722786885699826 linked: false, zoom: 7, constraints: { lods: tileInfo.lods, minScale: tileInfo.lods[0].scale, maxScale: tileInfo.lods[19].scale }, }); view.extent = new Extent({ xmin: 113.36595023855007, ymin: 23.671927965183833, xmax: 114.5628763484501, ymax: 22.7009907263257, spatialReference: { wkid: 4326 } }); var heatmapRenderer1 = { //设置热力渲染器 type: "heatmap", colorStops: [{ color: "rgba(0, 255, 0, 0)", ratio: 0 }, { color: "rgba(0, 255, 0, 1)", ratio: 0.4 }, { color: "rgba(255, 140, 0, 1)", ratio: 0.75 }, { color: "rgba(255, 0, 0, 1)", ratio: 0.9 }, { color: "rgba(255, 255, 0, 1)", ratio: 1, }, ], maxPixelIntensity: 10, minPixelIntensity: 0 }; var fhrenderer = { type: "unique-value", field: "类别", uniqueValueInfos: [{ value: '0', symbol: { type: "simple-marker", color: [255, 0, 255, 0.8], size: 8 } }, { value: '1', symbol: { type: "simple-marker", color: [255, 0, 0, 0.8], size: 8 } }, { value: '2', symbol: { type: "simple-marker", color: [115, 255, 0, 0.8], size: 8 } }] } var features = []; var heatData = [{ lng: 113.22, lat: 23.22 }, { lng: 113.32, lat: 23.42 }, { lng: 113.52, lat: 23.22 }, { lng: 113.52, lat: 23.23 }] for (var i = 0; i < heatData.length; i++) { var x = heatData[i].lng; var y = heatData[i].lat; features.push({ geometry: { type: "point", x: x, y: y }, attributes: { 'ObjectID': i, //重要！！！ '类别': i } }); } console.log(features) const hfields = [ new Field({ name: "ObjectID", alias: "ObjectID", type: "oid" }), new Field({ name: "dz_rank", alias: "dz_rank", type: "string" }), new Field({ name: "类别", alias: "类别", type: "string" }) ]; const layer = new FeatureLayer({ fields: hfields, source: features, //点数据集 title: "热力图", objectIdField: "ObjectID", //重要！！！ renderer: heatmapRenderer1, //热力渲染器 // renderer: fhrenderer, //类型渲染器 popupTemplate: { title: "feature", content: "{ObjectID}{类别}" }, // renderer: renderer }); map.add(layer) }); </script> </head> <body class="calcite"> <div id="viewDiv"></div> </body> </html>
