openlayers - 使用 Openlayer 6 进行 GIS 地图渲染
问题描述
我们正在使用 Mapnik、Mapproxy 和 Openlyer6 来开发基于 GIS 的 Web 解决方案。来自 Postgis 的 GIS 数据启用了 postgresql DB。我们正在使用 EPSG: 32643 Projection 并获得地图输出,但是当我们尝试在地图上添加一个未显示的点时。代码发布在这里...我在地图区域内添加了 2 个点,但没有显示任何内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://openlayers.org/en/v6.4.3/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v6.4.3/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js"></script>
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 99%;
height: 99%;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
proj4.defs("EPSG:32643","+proj=utm +zone=43 +datum=WGS84 +units=m +no_defs");
ol.proj.proj4.register(proj4);
const iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([614971.473,1218630.894])),
projection: "EPSG:32643",
name: 'Somewhere near Nottingham',
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://192.168.3.32:8081/tms/1.0.0/district/distgrid" + "/{z}/{x}/{-y}.png",
projection: "EPSG:32643",
}),
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://192.168.3.32:8081/tms/1.0.0/road/roadgrid" + "/{z}/{x}/{-y}.png" ,
projection: "EPSG:32643",
}),
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://192.168.3.32:8081/tms/1.0.0/Landmark/landmarkgrid" + "/{z}/{x}/{-y}.png" ,
projection: "EPSG:32643",
}),
}),
new ol.layer.Vector({
source: new ol.source.Vector({
features: [iconFeature],
projection: "EPSG:32643",
}),
renderBuffer: 200,
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: 'https://openlayers.org/en/latest/examples/data/icon.png'
})
})
}),
],
view: new ol.View({
projection: "EPSG:32643",
units:"m",
//extent: [485266.3703,917118.208000001,764929.9067,1414398.9922],
zoom:1,
maxZoom:15,
minZoom:1,
center:[0,0],
})
});
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([584658.379776645,1246789.46624421])),
projection: "EPSG:32643",
})
]
})
});
map.addLayer(layer);
map.getView().setZoom(map.getView().getZoom() - 6);
</script>
</body>
</html>
需要知道代码是否正确。
解决方案
推荐阅读
- r - 对于 R Lavaan 用户:您如何克服不正常的变量?
- python-3.x - 如何使用 Python 模块 Subprocess 发送密码?
- vba - VBA 刷新表单
- ajax - 使用 primefaces 数据表和 ajax 在 SelectOneMenu 中动态添加项目
- javascript - 使用 Fetch API 登录尝试失败
- php - PHP在MySql的结果中返回符号而不是scandics - 尽管我使用的是setcharset“latin1”
- python - 将熊猫数据框的水平值转换为垂直值
- html - 向下滚动时如何修复表格中的两个行标题?
- batch-file - 批处理文件:在特定操作系统上运行特定部分
- kendo-ui - 为 kendo-angular-editor 设置默认字体系列