arcgis for js 4.x GeoJSONLayer 加载
方式一:url直接加载
require(["esri/layers/GeoJSONLayer"], function(GeoJSONLayer){
// points to the states layer in a service storing U.S. census data
const geojsonlayer = new GeoJSONLayer({
url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson", // url:"./data/bj.json"
copyright: "USGS Earthquakes"
});
map.add(geojsonlayer); // adds the layer to the map
});
方式二:geojson数据加载
// create a geojson layer from geojson feature collection
const geojson = {
type: "FeatureCollection",
features: [
{
type: "Feature",
id: 1,
geometry: {
type: "Polygon",
coordinates: [
[
[100.0, 0.0],
[101.0, 0.0],
[101.0, 1.0],
[100.0, 1.0],
[100.0, 0.0]
]
]
},
properties: {
prop0: "value0",
}
}
]
};
// create a new blob from geojson featurecollection
const blob = new Blob([JSON.stringify(geojson)], {
type: "application/json"
});
// URL reference to the blob
const url = URL.createObjectURL(blob);
// create new geojson layer using the blob url
const layer = new GeoJSONLayer({
url
});
render
// 分级渲染
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: '震感级别'
}
};
layer.renderer = renderer