require([ "esri/Map", "esri/layers/CSVLayer", "esri/views/MapView", "esri/widgets/Legend" ], (Map, CSVLayer, MapView, Legend) => { const url = "https://earthquake.usgs.gov/fdsnws/event/1/query.csv?starttime=2020-01-01%2000:00:00&endtime=2020-12-31%2023:59:59&minlatitude=28.032&maxlatitude=41.509&minlongitude=74.18&maxlongitude=115.857&minmagnitude=2.5&orderby=time"; // Paste the url into a browser's address bar to download and view the attributes // in the CSV file. These attributes include: // * mag - magnitude // * type - earthquake or other event such as nuclear test // * place - location of the event // * time - the time of the event const template = { title: "{place}", content: "Magnitude {mag} {type} hit {place} on {time}." }; // The heatmap renderer assigns each pixel in the view with // an intensity value. The ratio of that intensity value // to the maxPixel intensity is used to assign a color // from the continuous color ramp in the colorStops property const renderer = { type: "heatmap", colorStops: [ { color: "rgba(63, 40, 102, 0)", ratio: 0 }, { color: "#472b77", ratio: 0.083 }, { color: "#4e2d87", ratio: 0.166 }, { color: "#563098", ratio: 0.249 }, { color: "#5d32a8", ratio: 0.332 }, { color: "#6735be", ratio: 0.415 }, { color: "#7139d4", ratio: 0.498 }, { color: "#7b3ce9", ratio: 0.581 }, { color: "#853fff", ratio: 0.664 }, { color: "#a46fbf", ratio: 0.747 }, { color: "#c29f80", ratio: 0.83 }, { color: "#e0cf40", ratio: 0.913 }, { color: "#ffff00", ratio: 1 } ], maxDensity: 0.01, minDensity: 0 }; const layer = new CSVLayer({ url: url, title: "Magnitude 2.5+ earthquakes from the last week", copyright: "USGS Earthquakes", popupTemplate: template, renderer: renderer, labelsVisible: true, labelingInfo: [ { symbol: { type: "text", // autocasts as new TextSymbol() color: "white", font: { family: "Noto Sans", size: 8 }, haloColor: "#472b77", haloSize: 0.75 }, labelPlacement: "center-center", labelExpressionInfo: { expression: "Text($feature.mag, '#.0')" }, where: "mag > 5" } ] }); const map = new Map({ basemap: "gray-vector", layers: [layer] }); const view = new MapView({ container: "viewDiv", center: [-138, 30], zoom: 2, map: map }); view.ui.add( new Legend({ view: view }), "bottom-left" ); }); </script>怎么把这段代码中引用的地址改成本地内存的地址
时间: 2024-04-25 07:27:55 浏览: 196
要将此代码中引用的地址改为本地内存地址,需要先下载该 CSV 文件并将其保存在本地。然后,可以使用 File 对象将文件读入内存中,并使用 URL.createObjectURL() 方法将其转换为可用于加载图层的 URL。以下是修改后的代码示例:
```javascript
require([
"esri/Map",
"esri/layers/CSVLayer",
"esri/views/MapView",
"esri/widgets/Legend"
], function(Map, CSVLayer, MapView, Legend) {
// 先将 CSV 文件下载并保存在本地
// 然后读取文件并将其转换为可用于加载图层的 URL
var file = "/path/to/your/local/file.csv";
var url = URL.createObjectURL(file);
// 弹出窗口模板设置
var template = {
title: "{place}",
content: "Magnitude {mag} {type} hit {place} on {time}."
};
// 热力图渲染器设置
var renderer = {
type: "heatmap",
colorStops: [
{ color: "rgba(63, 40, 102, 0)", ratio: 0 },
{ color: "#472b77", ratio: 0.083 },
{ color: "#4e2d87", ratio: 0.166 },
{ color: "#563098", ratio: 0.249 },
{ color: "#5d32a8", ratio: 0.332 },
{ color: "#6735be", ratio: 0.415 },
{ color: "#7139d4", ratio: 0.498 },
{ color: "#7b3ce9", ratio: 0.581 },
{ color: "#853fff", ratio: 0.664 },
{ color: "#a46fbf", ratio: 0.747 },
{ color: "#c29f80", ratio: 0.83 },
{ color: "#e0cf40", ratio: 0.913 },
{ color: "#ffff00", ratio: 1 }
],
maxDensity: 0.01,
minDensity: 0
};
// CSVLayer 设置
var layer = new CSVLayer({
url: url,
title: "Magnitude 2.5+ earthquakes from the last week",
popupTemplate: template,
renderer: renderer,
labelsVisible: true,
labelingInfo: [
{
symbol: {
type: "text",
color: "white",
font: {
family: "Noto Sans",
size: 8
},
haloColor: "#472b77",
haloSize: 0.75
},
labelPlacement: "center-center",
labelExpressionInfo: {
expression: "Text($feature.mag, '#.0')"
},
where: "mag > 5"
}
]
});
// Map 和 MapView 设置
var map = new Map({
basemap: "gray-vector",
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
center: [-138, 30],
zoom: 2,
map: map
});
// 添加图例
view.ui.add(new Legend({ view: view }), "bottom-left");
});
```
注意:上述代码中的 "file" 变量需要替换为实际的文件路径。
阅读全文