标签: openlayers

Geoserver - 使用 DWITHIN 过滤点

首先,我是 Geoserver 和 Openlayers 的新手。我一直在尝试使用图层预览页面在 Geoserver 端使用 Openlayer 查看器查看我的图层。我最终会将它作为 Openlayers WFS GET 请求来实现。

我想要完成的是返回不同点一定距离内的特征。(即距离学校 5 公里以内)

我正在使用 Geoserver 上的图层预览页面。我添加了“DWITHIN(GEOM, POINT(-60.2 46.1), 0.05, km)”的CQL过滤器。它限制了返回的点数,但我不确定它是否正确过滤。

我的问题如下:

  1. 根据我的理解,由于这个错误http://jira.codehaus.org/browse/GEOS-937我必须为我的单位使用度数。如何在客户端使用 javascript/openlayers 3 将 5km 转换为度数值?
  2. 我可以添加多个 DWITHIN 过滤器来判断一个点是否在一个点的 5 公里内和另一个点的 10 公里内?
  3. 我可以根据特征类型进行过滤吗?即返回点距离学校 5 公里和医院 10 公里以内

javascript geoserver openlayers openlayers-3

2
推荐指数
1
解决办法
3447
查看次数

将 SQL Server Geography 转换为 PNG 图像

我们有一个 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 类型呈现它。

c# geography polygons openlayers sqlgeography

2
推荐指数
1
解决办法
1095
查看次数

Openlayers ol.style.Text 具有多种颜色

有没有办法为 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 angular-openlayers

2
推荐指数
1
解决办法
4224
查看次数

如何将 OpenLayers 多边形坐标转换为经纬度?

我正在使用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)

javascript openlayers

2
推荐指数
1
解决办法
2772
查看次数

OpenLayers - 适合当前范围正在缩小

使用 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

javascript openlayers openlayers-3

2
推荐指数
1
解决办法
6508
查看次数

在 OpenLayers 4 中的两个坐标之间画一条线

我想在 OpenLayers (OL) 4 中的两个坐标之间画一条线。我一直在 Internet 上寻找文档,但其中大多数仅适用于 OL 2(example1example2)或 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)

javascript openlayers

2
推荐指数
1
解决办法
3852
查看次数

OpenLayers - 如何显示特征的标签?

我尝试过以不同的方式来显示功能的标签,但没有成功。

我定义了一个功能:

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">
        &nbsp;
      </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

2
推荐指数
1
解决办法
8208
查看次数

Openlayers 如何设置与要绘制的线串不同的样式

我有一个具有绘制交互功能的 openlayers 地图。当用户开始在地图上绘制线串时,绘制的线串部分看起来应该与用户接下来绘制的部分不同。

简而言之,当用户在地图上放置一个点时,直到该点的线应该是块,没有破折号或任何其他样式选项。

为了说明我在这里尝试做的事情,请使用屏幕截图 -

预期产出

我们可以看到用户即将在线上添加另一个点,因此直到该点的线应该变成蓝色块。

我维护了添加到地图中的点的集合,当用户选择删除最后一个点时,它将从地图中删除,但最后一段也应该从地图中消失。找不到任何东西可以实现这一目标。

另外,我还添加了ol.style.RegularShape()显示正方形的功能,但它显示的是圆形,而不知道我做错了什么。

这是我的代码的 jsbin 链接 -绘制交互线条样式问题

javascript openlayers openlayers-3 openlayers-5

2
推荐指数
1
解决办法
3359
查看次数

打开图层功能悬停更改样式

我正在尝试更改鼠标悬停时多多边形功能的不透明度。我能够在鼠标悬停时获得该功能并更改样式,但无法对不透明度从 0.3 到 0.8 的过程进行动画处理。

我已经阅读了文档,但找不到任何东西......

有什么线索吗?

javascript openlayers openlayers-5

2
推荐指数
1
解决办法
3858
查看次数

React 中的 Openlayers 弹出窗口 | 如何?

有没有办法让 OpenLayers 的弹出叠加层在反应中工作?我不知道如何让这个工作..

openlayers reactjs

2
推荐指数
1
解决办法
1875
查看次数