首先,我是 Geoserver 和 Openlayers 的新手。我一直在尝试使用图层预览页面在 Geoserver 端使用 Openlayer 查看器查看我的图层。我最终会将它作为 Openlayers WFS GET 请求来实现。
我想要完成的是返回不同点一定距离内的特征。(即距离学校 5 公里以内)
我正在使用 Geoserver 上的图层预览页面。我添加了“DWITHIN(GEOM, POINT(-60.2 46.1), 0.05, km)”的CQL过滤器。它限制了返回的点数,但我不确定它是否正确过滤。
我的问题如下:
我们有一个 API,它将 MS SQL 地理类型转换为众所周知的文本,并将其发送到前端,然后将 WKT 发送到 OpenLayer 地图,后者呈现画布(边界、区域等)。
我正在寻找一种方法来减少客户端的有效负载,并将多边形、multypoligons 和地图一般转换为后端的 png。
我尝试的是将画布转换为 base64,并将其另存为 PNG。效果很好,但我需要一个完整的后端解决方案。
我尝试使用 SharpMap,但它已经很旧了,它导致了我的依赖性问题,而且我没有设法让它工作。
我找到了一个测试 SHP 文件,并尝试将其渲染到 Windows 窗体中的 PictureBox 进行测试,但我得到的只是一个空的白框。
SharpMap.Map myMap = new SharpMap.Map(new Size(600, 300));
myMap.BackColor = Color.White;
var shapeFileProvider = new SharpMap.Data.Providers.ShapeFile(@"C:\Users\test\Downloads\FRA_adm\FRA_adm1.shp", true);
SharpMap.Layers.VectorLayer myLayer = new SharpMap.Layers.VectorLayer("World Countries");
myMap.Layers.Add(myLayer);
myMap.ZoomToExtents();
myLayer.DataSource = shapeFileProvider;
pictureBox1.Image = myMap.GetMap();
Run Code Online (Sandbox Code Playgroud)
关于如何解决这个问题的任何想法?
编辑:我什至尝试过geoserver,但它看起来不支持空间地理,而只支持几何。
我需要找到一种方法将边界、区域、国家/地区转换为 c# 后端中的图像。
编辑 2:您正在使用 SHP 文件进行测试,但我真正想要的是从 Sql Server Geography 类型呈现它。
有没有办法为 openlayers 4+ 的 ol.style.Text 类设置多种字体颜色?
我正在尝试做类似的事情
const label = new ol.style.Style({
text: new ol.style.Text({
text: '<color1>X</color1> other text',
textAlign: 'center',
font: '11px roboto,sans-serif',
fill: new ol.style.Fill({
color: 'white'
}),
stroke: new ol.style.Stroke({
color: 'black',
lineCap: 'butt',
width: 4
}),
offsetX: 0,
offsetY: 25.5,
})
Run Code Online (Sandbox Code Playgroud)
由于“其他文本”的长度或宽度未知且 textAlign 必须设置为居中,因此我无法添加两个 ol.style.Text 类并将它们并排放置。
提前致谢
我正在使用OpenLayers技术绘制多边形并保存坐标。这是我的代码:-
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
source: source
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later
function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
draw = new ol.interaction.Draw({
source: source,
type: /** …Run Code Online (Sandbox Code Playgroud) 使用 OpenLayers,我想设置 1 个地图的视图,使其与另一个地图相同。到目前为止,我使用了缩放和居中,效果很好,但由于某些投影在技术上不可行,我尝试在一定程度上进行操作。
我正在使用最新的 OpenLayers (4.6.3)。
理论上,以下代码应该获取我当前地图的范围,并将我的地图适合该范围,这样就不会发生任何移动。
let view = map.getView();
let extent = view.calculateExtent(map.getSize());
view.fit(extent, map.getSize());
Run Code Online (Sandbox Code Playgroud)
但实际上,如果我放大得足够大(例如,点击加号按钮 6 次),然后运行上面的代码,它每次运行时都会缩小,这不是我想要的。
我尝试过constraintResolution,但它最大限度地减少了损害,而不是完全消除它。
这是一个可以玩的小提琴:http://jsfiddle.net/t6uvybd3/1/ (我不确定那里的ol版本是什么,但它也确实在那里发生)
视频:https://www.youtube.com/watch? v=ZAV_FuZ-p7M&feature=youtu.be
我想在 OpenLayers (OL) 4 中的两个坐标之间画一条线。我一直在 Internet 上寻找文档,但其中大多数仅适用于 OL 2(example1、example2)或 3(example3)。
我从 OL 网站上拿了这个例子并添加了我自己的代码。在这种情况下,我使用的是 LineString:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.js"/>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"/>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 5
})
});
//example …Run Code Online (Sandbox Code Playgroud) 我尝试过以不同的方式来显示功能的标签,但没有成功。
我定义了一个功能:
var pointFeature = new ol.Feature(wha, {label: "Airport"});
Run Code Online (Sandbox Code Playgroud)
如何让“机场”一词显示在要素的位置(纬度/经度)处?
我是 OpenLayers 的新手,所以如果答案非常简单,我深表歉意。这是完整的代码:
<!DOCTYPE html>
<html>
<head>
<title>IGC example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.10.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.10.1/build/ol.js"></script>
</head>
<body><div class="ALL">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map">
</div>
<input id="time" type="range" value="0" steps="1" />
<div class="span4 offset4 pull-right">
<div id="info" class="alert alert-success">
</div>
</div>
</div>
</div>
</div></div>
<script>
// Geometries
var wha = new ol.geom.Circle(ol.proj.transform([-96.1543889, 29.2542778], 'EPSG:4326', 'EPSG:3857'), 400);
var circle = …Run Code Online (Sandbox Code Playgroud) 我有一个具有绘制交互功能的 openlayers 地图。当用户开始在地图上绘制线串时,绘制的线串部分看起来应该与用户接下来绘制的部分不同。
简而言之,当用户在地图上放置一个点时,直到该点的线应该是块,没有破折号或任何其他样式选项。
为了说明我在这里尝试做的事情,请使用屏幕截图 -
我们可以看到用户即将在线上添加另一个点,因此直到该点的线应该变成蓝色块。
我维护了添加到地图中的点的集合,当用户选择删除最后一个点时,它将从地图中删除,但最后一段也应该从地图中消失。找不到任何东西可以实现这一目标。
另外,我还添加了ol.style.RegularShape()显示正方形的功能,但它显示的是圆形,而不知道我做错了什么。
这是我的代码的 jsbin 链接 -绘制交互线条样式问题
我正在尝试更改鼠标悬停时多多边形功能的不透明度。我能够在鼠标悬停时获得该功能并更改样式,但无法对不透明度从 0.3 到 0.8 的过程进行动画处理。
我已经阅读了文档,但找不到任何东西......
有什么线索吗?
有没有办法让 OpenLayers 的弹出叠加层在反应中工作?我不知道如何让这个工作..
openlayers ×10
javascript ×6
openlayers-3 ×3
openlayers-5 ×2
c# ×1
geography ×1
geoserver ×1
polygons ×1
reactjs ×1
sqlgeography ×1