当我通过 d3.json 加载时,geojson 层不显示
geojson layer does not display when I load through d3.json
当我通过 d3.json 加载 geojson 作为数据对象时,geojson 图层不显示。但是,如果我将 geojson 引用为 URL,那么它会正确显示。
我正在使用 deck.gl:6.3.2,mapbox-gl:v0.52.0。我正在使用香草 javascript。
当我运行这段代码时,它不显示。我检查了 'geomdata'。没问题。
d3.json("roads.json", function(geomdata) {
deckgl = new deck.DeckGL({
container,
map: mapboxgl,
mapboxApiAccessToken:
"<myMapBoxKey>,
mapStyle: "mapbox://styles/mapbox/light-v9",
longitude: -98.58,
latitude: 39.82,
zoom: 4,
layers: [
new deck.GeoJsonLayer({
geomdata,
stroked: true,
filled: true,
lineWidthMinPixels: 2,
opacity: 0.4,
getLineColor: [255, 100, 100],
getFillColor: [200, 160, 0, 180]
})
]
});
});
然而,当我 运行 这个 geojson 是 URL 时,它显示得很好。
d3.json("roads.json", function(geomdata) {
var US_MAP_GEOJSON =
"https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/highway/roads.json";
deckgl = new deck.DeckGL({
container,
map: mapboxgl,
mapboxApiAccessToken:
"<myMapBoxAccessKey>",
mapStyle: "mapbox://styles/mapbox/light-v9",
longitude: -98.58,
latitude: 39.82,
zoom: 4,
layers: [
new deck.GeoJsonLayer({
data: US_MAP_GEOJSON ,
stroked: true,
filled: true,
lineWidthMinPixels: 2,
opacity: 0.4,
getLineColor: [255, 100, 100],
getFillColor: [200, 160, 0, 180]
})
]
});
});
有hints/ideas吗?
谢谢
看来您必须将一个对象传递到您的 GeoJsonLayer
。但是您的第一个字段不是 key: value
组合,它只是一个 value
。尝试像这样设置您的数据 data: geomdata
.
new deck.GeoJsonLayer({
data: geomdata,
stroked: true,
filled: true,
lineWidthMinPixels: 2,
opacity: 0.4,
getLineColor: [255, 100, 100],
getFillColor: [200, 160, 0, 180]
})
当我通过 d3.json 加载 geojson 作为数据对象时,geojson 图层不显示。但是,如果我将 geojson 引用为 URL,那么它会正确显示。
我正在使用 deck.gl:6.3.2,mapbox-gl:v0.52.0。我正在使用香草 javascript。 当我运行这段代码时,它不显示。我检查了 'geomdata'。没问题。
d3.json("roads.json", function(geomdata) {
deckgl = new deck.DeckGL({
container,
map: mapboxgl,
mapboxApiAccessToken:
"<myMapBoxKey>,
mapStyle: "mapbox://styles/mapbox/light-v9",
longitude: -98.58,
latitude: 39.82,
zoom: 4,
layers: [
new deck.GeoJsonLayer({
geomdata,
stroked: true,
filled: true,
lineWidthMinPixels: 2,
opacity: 0.4,
getLineColor: [255, 100, 100],
getFillColor: [200, 160, 0, 180]
})
]
});
});
然而,当我 运行 这个 geojson 是 URL 时,它显示得很好。
d3.json("roads.json", function(geomdata) {
var US_MAP_GEOJSON =
"https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/highway/roads.json";
deckgl = new deck.DeckGL({
container,
map: mapboxgl,
mapboxApiAccessToken:
"<myMapBoxAccessKey>",
mapStyle: "mapbox://styles/mapbox/light-v9",
longitude: -98.58,
latitude: 39.82,
zoom: 4,
layers: [
new deck.GeoJsonLayer({
data: US_MAP_GEOJSON ,
stroked: true,
filled: true,
lineWidthMinPixels: 2,
opacity: 0.4,
getLineColor: [255, 100, 100],
getFillColor: [200, 160, 0, 180]
})
]
});
});
有hints/ideas吗? 谢谢
看来您必须将一个对象传递到您的 GeoJsonLayer
。但是您的第一个字段不是 key: value
组合,它只是一个 value
。尝试像这样设置您的数据 data: geomdata
.
new deck.GeoJsonLayer({
data: geomdata,
stroked: true,
filled: true,
lineWidthMinPixels: 2,
opacity: 0.4,
getLineColor: [255, 100, 100],
getFillColor: [200, 160, 0, 180]
})