英文:
Adding a ShpFile tilts the map
问题
Sure, here's the translated code portion you provided:
我正在使用OpenLayer与React。
我将地图显示为底图,然后在其上添加了一个GeoTiff。之后,用户还可以添加一个形状文件(zip)作为另一层,它可以正常工作,唯一的问题是添加形状文件后整个地图倾斜了。
有没有办法避免这种情况?
这里是一些屏幕截图
[![添加形状文件之前][1]][1]
[1]: https://i.stack.imgur.com/GY1HC.jpg
[![添加形状文件之后][2]][2]
[2]: https://i.stack.imgur.com/4dftb.jpg
这是我的代码
const [shape, setShape] = useState(null);
const [layer, setLayer] = useState(null);
const [showShape, setShowShape] = useState(false);
const [map, setMap] = useState(null);
async function loadShapefile(src) {
// 加载形状文件数据
const content = await shp(src);
const geoJSON = new GeoJSON();
const features = geoJSON.readFeatures(content);
const projection = geoJSON.readProjection(content);
// 创建用于显示要素的矢量图层
const vectorSource = new VectorSource({ features });
const vectorLayer = new VectorLayer({ source: vectorSource });
return [vectorLayer, vectorSource, projection];
}
const renderShp = async () => {
setShowLoader(true);
const [layer, vectorSource, projection] = await loadShapefile(shape);
map.addLayer(layer);
const extent = vectorSource.getExtent();
// 将范围从形状文件投影转换为地图投影
const viewConfig = {
projection,
center: getCenter(extent),
zoom: 2
};
map.setView(new View(viewConfig));
map.getView().fit(extent, {
padding: [50, 50, 50, 50], // 根据需要调整填充
});
setShowLoader(false);
};
useEffect(() => {
// 从地图中移除任何现有的矢量图层
if (!map) return;
map.getLayers().forEach((existingLayer) => {
if (existingLayer instanceof VectorLayer) {
map.removeLayer(existingLayer);
}
});
if (shape) renderShp();
else {
// 将视图设置回GeoTiff
map.setView(layer.getSource().getView().then(getViewConfig(map)));
}
}, [shape]);
我从这个脚本获取了shp函数```https://unpkg.com/shpjs@latest/dist/shp.js```
请注意,我已经将代码部分翻译为中文,如您所请求,不包含其他内容。
英文:
I'm using OpenLayer with react.
I'm display a map as a baselayer and then I'm adding a GeoTiff on top of it. After that the user can also add a shape file (zip) as another layer and it is working properly the only problem is that after addding the shape file it tilts the whole map.
Is there any way to avoid it?
Here are some screen shot
here's my code
const [shape, setShape] = useState(null);
const [layer, setLayer] = useState(null);
const [showShape, setShowShape] = useState(false);
const [map, setMap] = useState(null);
async function loadShapefile(src) {
// Load the shapefile data
const content = await shp(src);
const geoJSON = new GeoJSON();
const features = geoJSON.readFeatures(content);
const projection = geoJSON.readProjection(content);
// Create a vector layer to display the features
const vectorSource = new VectorSource({ features });
const vectorLayer = new VectorLayer({ source: vectorSource });
return [vectorLayer, vectorSource, projection];
}
const renderShp = async () => {
setShowLoader(true);
const [layer, vectorSource, projection] = await loadShapefile(shape);
map.addLayer(layer);
const extent = vectorSource.getExtent();
// Transform the extent from the Shapefile projection to the map projection
const viewConfig = {
projection,
center: getCenter(extent),
zoom: 2
};
map.setView(new View(viewConfig));
map.getView().fit(extent, {
padding: [50, 50, 50, 50], // Adjust the padding as desired
});
setShowLoader(false);
};
useEffect(() => {
// Remove any existing vector layers from the map
if (!map) return;
map.getLayers().forEach((existingLayer) => {
if (existingLayer instanceof VectorLayer) {
map.removeLayer(existingLayer);
}
});
if (shape) renderShp();
else {
// set view back to the geotiff
map.setView(layer.getSource().getView().then(getViewConfig(map)));
}
}, [shape]);
I'm getting shp function from this script https://unpkg.com/shpjs@latest/dist/shp.js
答案1
得分: 1
你应该将GeoJSON数据读入当前视图投影。
async function loadShapefile(src) {
// 加载shapefile数据
const content = await shp(src);
const geoJSON = new GeoJSON({ featureProjection: map.getView().getProjection() });
const features = geoJSON.readFeatures(content);
// 创建一个矢量图层来显示要素
const vectorSource = new VectorSource({ features });
const vectorLayer = new VectorLayer({ source: vectorSource });
return [vectorLayer, vectorSource];
}
const renderShp = async () => {
setShowLoader(true);
const [layer, vectorSource] = await loadShapefile(shape);
map.addLayer(layer);
const extent = vectorSource.getExtent();
map.getView().fit(extent, {
padding: [50, 50, 50, 50], // 根据需要调整填充值
});
setShowLoader(false);
};
请注意,这是JavaScript代码,其中包含有关加载GeoJSON数据并在地图上显示它们的函数。
英文:
You should read the GeoJSON data into the current view projection
async function loadShapefile(src) {
// Load the shapefile data
const content = await shp(src);
const geoJSON = new GeoJSON({featureProjection: map.getView().getProjection()});
const features = geoJSON.readFeatures(content);
// Create a vector layer to display the features
const vectorSource = new VectorSource({ features });
const vectorLayer = new VectorLayer({ source: vectorSource });
return [vectorLayer, vectorSource];
}
const renderShp = async () => {
setShowLoader(true);
const [layer, vectorSource] = await loadShapefile(shape);
map.addLayer(layer);
const extent = vectorSource.getExtent();
map.getView().fit(extent, {
padding: [50, 50, 50, 50], // Adjust the padding as desired
});
setShowLoader(false);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论