添加一个ShpFile使地图倾斜

huangapple go评论55阅读模式
英文:

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

添加一个ShpFile使地图倾斜

添加一个ShpFile使地图倾斜

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);
  };

huangapple
  • 本文由 发表于 2023年5月10日 17:42:31
  • 转载请务必保留本文链接:https://go.coder-hub.com/76216962.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定