javascript - 在 OpenLayers 地图中显示多边形
问题描述
我要绘制的(经度,纬度)点中有一个多边形:
var maxPoint = [36.283, -114.368];
var geoSquare = [ minPoint, [minPoint[0], maxPoint[1]], maxPoint, [maxPoint[0], minPoint[1]]];
var polygonFeature = new Feature(
new Polygon(geoSquare));
我正在通过以下方式绘制地图:
var map = new Map({
interactions: defaultInteractions().extend([new Drag()]),
layers: [
new TileLayer({
source: new TileJSON({
url: 'https://maps.siemens.com/styles/osm-bright.json'
})
}),
new VectorLayer({
source: new VectorSource({
features: [polygonFeature]
}),
style: new Style({
stroke: new Stroke({
width: 3,
color: [255, 0, 0, 1]
}),
fill: new Fill({
color: [0, 0, 255, 0.6]
})
})
})
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});
这个多边形在南加州附近,但我在地图上根本看不到这个正方形。怎么了??
编辑
这是一个jsfiddle
解决方案
要素坐标必须采用 LonLat 格式,并且必须转换为视图投影。多边形环必须在同一点开始和结束,并且多边形需要额外的一对,[]
因为它们可以具有额外的内部环(孔)。或者,您可以从范围创建多边形。这些中的任何一个都可以。
var minPoint = [-121.091, 32.92];
var maxPoint = [-114.368, 36.283];
var geoSquare = [[minPoint, [minPoint[0], maxPoint[1]], maxPoint, [maxPoint[0], minPoint[1]], minPoint]];
var polygonFeature = new Feature(
new Polygon(geoSquare).transform('EPSG:4326','EPSG:3857'));
var minPoint = [-121.091, 32.92];
var maxPoint = [-114.368, 36.283];
var polygonFeature = new Feature(
Polygon.fromExtent(minPoint.concat(maxPoint)).transform('EPSG:4326','EPSG:3857'));
var minPoint = fromLonLat([-121.091, 32.92]);
var maxPoint = fromLonLat([-114.368, 36.283]);
var geoSquare = [[minPoint, [minPoint[0], maxPoint[1]], maxPoint, [maxPoint[0], minPoint[1]], minPoint]];
var polygonFeature = new Feature(
new Polygon(geoSquare));
var minPoint = fromLonLat([-121.091, 32.92]);
var maxPoint = fromLonLat([-114.368, 36.283]);
var polygonFeature = new Feature(
Polygon.fromExtent(minPoint.concat(maxPoint)));
推荐阅读
- system.reactive - 执行 ReactiveCommand 后 UI 控件的延迟显示
- mysql - 检索其元记录包含的所有记录,作者 ID 具有最新日期
- string - 如何传递修改后的字符串参数?
- html - 无法将计算机屏幕的 CSS div 中心居中
- java - GAE UnknownHostException adwords.google.com
- angular - 如何使 ng e2e 在可用端口上运行?
- java - 如何在数组中获取动态微调器选定的项目 ID?
- python - 给定一条几何车道,我如何告诉汽车遵循的路径?
- maven - 多 Maven 项目:第一个和最后一个模块在安装时显示版本
- java - 使用java检测表单中的边界框