标签: openlayers

如何在 Openlayers 中以编程方式添加带有半径、长和纬度的圆?

我试图在单击按钮时用latitudelongitude和(以米或公里为单位)添加圆圈。radius

我可以在单击的按钮上添加一个圆圈,但它的半径为 1-25 之间的数字。我需要给出以米为单位的半径

注意:当我用手指画一个圆圈时,我可以使用此代码获取其半径(以米为单位)

var radius = geometry.getRadius();
Run Code Online (Sandbox Code Playgroud)

我用手指手势功能绘图:

function addInteraction() {
  draw = new ol.interaction.Draw({
    source: source,
    type: shapetype,
    freehand: true
  });
  map.addInteraction(draw);
Run Code Online (Sandbox Code Playgroud)

geometry dictionary interaction draw openlayers

0
推荐指数
1
解决办法
6392
查看次数

OpenLayers 中图标的奇怪问题(svg 图标不显示,而类似图标却显示)

我对以下代码有一个奇怪的问题

<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet"> 
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
      view: new ol.View({center: ol.proj.transform([16.9278, 52.4044], 'EPSG:4326', 'EPSG:3857'), zoom:11}),
      layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
      target:'map'
  });

  var tree_coordinates = [[16.9071388, 52.4901917],[16.964607, 52.483672],[16.924611, 52.422056],[16.9207344, 52.4116696],[16.931853, 52.407052],
  [16.9175298, 52.4045977],[16.9001992, 52.4026734],[16.9022317, 52.4062569],[17.021935, 52.400591],[16.82640,52.46133],[17.0587858,52.4159424],[17.022485,52.415796],
  [17.020697,52.399145],[16.916187,52.390276],[17.029799,52.395083],[16.828552,52.464013]];
  var forest_coordinates = [[16.901194,52.488556],[16.847889,52.460917],[16.841861,52.448778],[16.891983,52.452014],[16.878281,52.432017],
  [16.894575,52.425061],[16.922955,52.414592],[16.923432,52.413709],[16.888663,52.4091499],[16.8480334,52.3875927],[16.9269882,52.3785911],[16.986917,52.305361]];
  var stone_coordinates = [[16.897222,52.488056],[16.942774,52.463806],[16.881964,52.419917]];

  var tree = [];
  var forest = [];
  var …
Run Code Online (Sandbox Code Playgroud)

javascript openlayers openlayers-5

0
推荐指数
1
解决办法
2781
查看次数

Openlayers ol.interaction.Draw 描边样式

我有这个jsfiddle,它能够在完美运行的地图上绘制多边形。我想不通的是如何设置 .Draw 交互的样式。

目前,我有一条虚线用于用户已经绘制的多边形部分,另一条虚线将第一个绘制的点连接到最后一个绘制的点。

当我写样式时,它似乎会影响这两行。

我需要的是一条黑色虚线连接用户已经绘制的点,并且没有线(完全透明)用于将最后绘制的点连接回第一个绘制点的线。

这是我当前的样式对象:

style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 0, 0.5)',
      lineDash: [10, 10],
      width: 3
    }),
    image: new ol.style.Circle({
      fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] }),
      stroke: new ol.style.Stroke({
        color: [0, 0, 0, 0.5],
        width: 1
      }),
      radius: 4
    })
  })
Run Code Online (Sandbox Code Playgroud)

我曾尝试添加颜色和样式数组,但似乎无法正常工作。

有没有人遇到过这个问题并找到了解决方法?

openlayers reactjs

0
推荐指数
1
解决办法
645
查看次数

如何从用户内存上传并在地图上显示kml文件

我有一个代码显示地图并使用 openlayers 库进行地理编码。您还可以通过在地图上拖动来显​​示 kml 文件。现在我希望用户从设备内存中选择这个文件并将其插入到地图中。例如,使用搜索按钮并选择文件来执行此操作。可以使用openlayers库吗?我找不到任何东西。我该怎么做?请指导我。谢谢 这是我的代码:

<!DOCTYPE html>
<html>
  <head>
    <title>KML</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/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/v4.6.5/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info">&nbsp;</div>
    <script>


      var raster = new ol.layer.Tile({
        source: new ol.source.BingMaps({
          imagerySet: 'Aerial',
          key: 'Ar3HbeAWJ2BNWw49Jnce_gbrbyqiPSBFuci9N4942gLNyBZgfzFPYn0d4QvpH06G'
        })
      });

      var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: 'Data/earth.kml',
          format: new ol.format.KML()
        })
      });

      var map = new ol.Map({
        layers: [raster, …
Run Code Online (Sandbox Code Playgroud)

html javascript kml openlayers

0
推荐指数
1
解决办法
1140
查看次数

如何缓存样式但仍设置单个文本?

我对以下情况感到迷失。

我在 Android 应用程序中使用 OpenLayers 6。我有大约 4000 个 geoJson 功能要显示。它只是一个包含 4000 个特征的矢量图层。

对于其中的 3000 个,我必须设置一个单独的文本(所有这些文本在属性中都有一个唯一的 ID)

当我为每个功能创建一个样式而不缓存它们时,我的应用程序会崩溃,因为内存使用量增加到超过 2GB。当我创建样式并按功能 ID 缓存它们时,我仍然需要创建 3000 个样式,并且我的应用程序也会崩溃。

现在,当我按颜色缓存样式时,我得到 2 个样式。该应用程序运行良好,但现在我无法设置单独的文本,因为文本位于样式对象中,而我只有其中两个。

如果每个功能都有单独的样式(没有缓存或按 ID 缓存),这将是我的解决方案。

map.once('postrender', function(event) {
    addStyle();
});


function addStyle() {
    var vectorLayer;
    var layersObject = map.getLayers();
    for (var i = 0; i < layersObject.array_.length; i++) {
        vectorLayer = layersObject.array_[i];
        break;
    }

    var arrFeatures = vectorLayer.getSource().getFeatures();
    var i = 0;
    for (i; i <= arrFeatures.length - 1; i++) {
        var feat = arrFeatures[i];
        var myId …
Run Code Online (Sandbox Code Playgroud)

gis openlayers openlayers-6

0
推荐指数
1
解决办法
932
查看次数

如何访问vue3中openlayers地图的方法

我使用vue3-openlyers创建如下地图:

<ol-map ref="map">
...
</ol-map>
Run Code Online (Sandbox Code Playgroud)

在Vue的composition api中,我尝试访问getSize()map的方法:

import { ref, defineComponent, onMounted } from "vue";

export default defineComponent({
    setup() {
        //works with views
        const map = ref<any>(null);

        const getSize = () => {
            // does not work
            console.log(map.value.getSize());
            console.log(map.getSize());
        };

        onMounted(getSize());
    
        return { map, getSize }
});
Run Code Online (Sandbox Code Playgroud)

我收到以下错误: TypeError: map.value is null

我怀疑地图变量没有更新。我该如何解决这个错误?

openlayers openlayers-3 vue.js vuejs3 vue3-openlayers

0
推荐指数
1
解决办法
1083
查看次数

使用OpenLayers 5示例,错误:无法解析模块说明符“ rbush”

我正在尝试在本地环境中制作一个简单的示例。我想在自己的网站上做一张地图,但是一旦下载了必要的文件,我就会遇到奇怪的问题。首先,我必须为示例脚本链接添加'type =“ module”'代码,这已经让我发疯了。没有人测试这些应用程序,还是我的环境如此特别?如果它们无法像魅力一样在最常用的浏览器中运行,为什么他们甚至还要使用import标签?在扩展示例代码并将导入链接更改为适合我的环境(将ol / Map.js更改为/ol/Map.js)之后,现在出现了此错误,您可以在标题中阅读。无法解析模块说明符“ rbush”。我能做什么?我不知道。我必须错过一个要点。该示例(https://openlayers.org/en/latest/examples/simple。)在openlayers.org上可以正常在线运行,但是如果我按照说明进行操作,那不是我的目的。为什么?

dictionary openlayers

-1
推荐指数
1
解决办法
1370
查看次数

我可以将 google map/api 与 openlayers 集成吗?

我有与 bing 地图集成的 openlayers。我也想用谷歌地图而不是 bing 地图转换这个当前系统。我已经将 bing 地图用于旅程规划、绘制形状、搜索位置、添加注释、添加图层等。

我也可以用谷歌地图做上述功能吗?

google-maps openlayers bing-maps

-1
推荐指数
1
解决办法
3055
查看次数

如何在不使用叠加层的情况下标记 openlayers 中的要素

我知道在 openlayers 中添加叠加层并将它们用作传递一些信息的工具提示,但我们必须管理这些事情才能完成。另一方面,Leaflet 提供bindLabel()了在地图视口中显示工具提示的功能。我的问题是可以在没有叠加层的情况下在 openlayers 中完成,因为随着叠加层数量的增加,地图渲染开始变慢。Overlays只能在一个世界中显示。如果我们想在地图的其他世界中显示它怎么办。

参考标签和覆盖:

功能的传单标签

openlayers 中的叠加

javascript label openlayers leaflet openlayers-5

-1
推荐指数
1
解决办法
1176
查看次数

openlayers 5.1.3:快速启动示例中的“损坏”缩小按钮?

我尝试从谷歌地图切换到 osm 并尝试了 OpenLayers(快速入门示例)。如果我使用托管构建,一切看起来都不错。但是,如果我下载 5.1.3 软件包并将其托管在我们的网络服务器上,则缩小按钮的标题会损坏。URL:http : //www.canalcup-cam.de/maps.php
看起来好像使用了非 ASCII“-”...我试图找到设置按钮标题的代码,但没有成功。网站的编码与此有关吗?我试过 utf-8 和 Windows-1250。

问候, hjt

openlayers

-3
推荐指数
1
解决办法
1068
查看次数

在 OpenLayers 地图上以良好的性能显示 1000 多个特征足迹向量可能吗?

当将许多特征足迹向量加载到地图上时,openlayers 地图和 Web 应用程序变得无响应。有什么方法可以提高具有许多向量的 openlayers 地图的性能吗?

我们希望能够一次在地图上支持至少 1000 个向量。

我们正在使用 openlayers 4。

据我所知,OpenLayers 3+ 使用 HTML5 画布来渲染图像和矢量。我见过画布被用来制作视频游戏和其他高性能图形应用程序。我不明白为什么它会导致 OpenLayers 出现这种无响应的问题。

编辑:当我说“向量”时,我的意思是方形多边形。此应用程序将在具有平均计算能力的桌面上运行。

javascript gis geospatial openlayers openlayers-3

-4
推荐指数
1
解决办法
2034
查看次数