geojson 作为 url 源 + turf.js + 特征属性子集的操作
geojson as url source + turf.js + manipulation of subset of features' properties
mapbox-gl-js 版本: >=0.27.0 <=0.38.0
(1) 我有一个 Feature
geojson 类型的单个多边形从 url 来源添加到我的地图。
(2) 我也有一个 FeatureCollection
geojson 类型的 ~4k 多边形添加到地图也来自 url 来源。
我在 (1) 和 (2) 之间使用 turf.intersect 来 select (2) 的相交多边形。
然后我将相交的多边形 [(2) 的一个子集] 存储到一个数组中。
然后我操纵那些相交多边形的某些属性的值
用简单的数学。
我现在想用数组的结果值更新 (2)。
我很想使用 setData
之类的东西来更新 (2),但这对于也不是 (a) geojson 数据对象或 (b) url 到 docs.
中指定的一个
希望我已经充分解释了这一点。如果是这样,在这种情况下建议的工作流程是什么?
如果让Mapbox加载GeoJSON,它不擅长分享; see https://github.com/mapbox/mapbox-gl-js/issues/1762 如果你想自己操作数据,你应该自己加载它,然后将它传递给 Mapbox。例如:
// load your data via ajax however you want
const promises = {
polygon: $.get('.../geojson.json'),
collection: $.get('.../feature-collection.json'),
};
// setup your map
const map = new mapboxgl.Map({...});
map.on('load', () => {
RSVP.hash(promises).then((data) => {
map.addSource('my-data', {
type: 'geojson',
// transform does intersection and updates,
// then outputs a GeoJSON formatted object
data: transform(data.polygon, data.collection),
});
});
});
mapbox-gl-js 版本: >=0.27.0 <=0.38.0
(1) 我有一个 Feature
geojson 类型的单个多边形从 url 来源添加到我的地图。
(2) 我也有一个 FeatureCollection
geojson 类型的 ~4k 多边形添加到地图也来自 url 来源。
我在 (1) 和 (2) 之间使用 turf.intersect 来 select (2) 的相交多边形。
然后我将相交的多边形 [(2) 的一个子集] 存储到一个数组中。
然后我操纵那些相交多边形的某些属性的值 用简单的数学。
我现在想用数组的结果值更新 (2)。
我很想使用 setData
之类的东西来更新 (2),但这对于也不是 (a) geojson 数据对象或 (b) url 到 docs.
希望我已经充分解释了这一点。如果是这样,在这种情况下建议的工作流程是什么?
如果让Mapbox加载GeoJSON,它不擅长分享; see https://github.com/mapbox/mapbox-gl-js/issues/1762 如果你想自己操作数据,你应该自己加载它,然后将它传递给 Mapbox。例如:
// load your data via ajax however you want
const promises = {
polygon: $.get('.../geojson.json'),
collection: $.get('.../feature-collection.json'),
};
// setup your map
const map = new mapboxgl.Map({...});
map.on('load', () => {
RSVP.hash(promises).then((data) => {
map.addSource('my-data', {
type: 'geojson',
// transform does intersection and updates,
// then outputs a GeoJSON formatted object
data: transform(data.polygon, data.collection),
});
});
});