Question

我密切关注示例at this link at Mapbox documentation，以向多边形添加图案。我只是简单地获取了他们的代码，并使用onClick事件将其添加到了我的地图中。这是非常简单和基本的。不过，我无法弄清楚如何使用自己的数据。他们使用手动输入的坐标。我希望使用自己的本地JSON文件。我该怎么做呢？这是我的有效代码：（从字面上是从Mapbox教程复制/粘贴的，但这是我的实际代码在起作用）

function test() {


// Add GeoJSON data
map.addSource('source', {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [[
[-30, -25],
[-30, 35],
[30, 35],
[30, -25],
[-30, -25]
]]
}
}
});

// Load an image to use as the pattern
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/64px-Cat_silhouette.svg.png', function(err, image) {
// Throw an error if something went wrong
if (err) throw err;

// Declare the image
map.addImage('pattern', image);

// Use it
map.addLayer({
"id": "pattern-layer",
"type": "fill",
"source": "source",
"paint": {
"fill-pattern": "pattern"
}
});
});

}

那么，我该如何使用自己的数据？我在下面尝试了以下内容以及许多（10个以上）变体，但我无法使用它。以下只是我要尝试做的一个示例。

map.addSource('source', {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"data": "folder/sample.json"
 },

}
}
});

Answer 1

map.addSource（'源'，{ “ type”：“ geojson”， “数据”：“ folder / sample.json” }）;

请参见https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources-geojson

Mapbox GL-JS：向多边形添加图案

1 个答案: