我的过程
我能够上传不同的.shp文件,并能够获取json功能数据。
我有2个不同的.shp文件[layer-ind.shp,layer-administration.shp]
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
75.89355468749999,
18.521283325496277
],
[
80.6396484375,
19.68397023588844
]
]
}
}
]
}
{
"type": "FeatureCollection",
"features": [
{
"type":"Feature",
"geometry":{
"type":"LineString",
"coordinates":[
[-349771.1875,445307.8125],
[-349789.6875,445314.375],
[-349796.5625,445321.5625],
[-349792.78119999915,445341.4375],
[-349786.53119999915,445351.71880000085],
[-349771.1875,445307.8125]]},
"properties":{
"TYPE":"ISLAND","RuleID":3,
"Shape_Leng":544.475438955
}
}
]
}
在地图上预览这两个图层(功能)时进行预览 1. layer-ind.json文件会给出正确的结果,并且能够在正确的位置看到地图上的图层 2. layer-us.json文件在地图(0,0)上显示的位置错误
const vectorSource = new VectorSource({
features: (new GeoJSON()).readFeatures(geojson, {
featureProjection: 'EPSG:4326'
});
});
请对此提供帮助
保存我的日子
答案 0 :(得分:0)
您将需要指定数据投影以及特征投影。 featurePprojection
是您的地图视图的投影。 dataProjection
是json中坐标的投影。我可以看到layer-ind的dataProjection是'EPSG:4326',layer-us的dataProjection似乎使用了局部投影的坐标。您知道哪个投影或该岛在哪里吗?
const vectorSource = new VectorSource({
features: (new GeoJSON()).readFeatures(geojson, {
dataProjection: 'xxxx',
featureProjection: 'yyyy'
})
});
基于投影定义,您现在已经给出了一个工作示例(要在此处运行,它使用完整的构建语法)
proj4.defs('NAD_1983_California_Teale_Albers', 'PROJCS["NAD_1983_California_Teale_Albers",GEOGCS["GCS_North_American_1983",DATUM["D_North_American_1983",SPHEROID["GRS_1980",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Albers"],PARAMETER["False_Easting",0.0],PARAMETER["False_Northing",-4000000.0],PARAMETER["Central_Meridian",-120.0],PARAMETER["Standard_Parallel_1",34.0],PARAMETER["Standard_Parallel_2",40.5],PARAMETER["Latitude_Of_Origin",0.0],UNIT["Meter",1.0]]');
ol.proj.proj4.register(proj4);
geojson = {
"type": "FeatureCollection",
"features": [
{
"type":"Feature",
"geometry":{
"type":"LineString",
"coordinates":[
[-349771.1875,445307.8125],
[-349789.6875,445314.375],
[-349796.5625,445321.5625],
[-349792.78119999915,445341.4375],
[-349786.53119999915,445351.71880000085],
[-349771.1875,445307.8125]]},
"properties":{
"TYPE":"ISLAND","RuleID":3,
"Shape_Leng":544.475438955
}
}
]
}
var map = new ol.Map({
layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ],
target: 'map',
view: new ol.View()
});
const vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojson, {
dataProjection: 'NAD_1983_California_Teale_Albers',
featureProjection: map.getView().getProjection()
})
});
map.addLayer(new ol.layer.Vector({source: vectorSource}));
map.getView().fit(vectorSource.getExtent());
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<div id="map" class="map"></div>