我试图在单击按钮时用latitude、longitude和(以米或公里为单位)添加圆圈。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) 我对以下代码有一个奇怪的问题
<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) 我有这个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 库进行地理编码。您还可以通过在地图上拖动来显示 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"> </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) 我对以下情况感到迷失。
我在 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) 我使用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
我怀疑地图变量没有更新。我该如何解决这个错误?
我正在尝试在本地环境中制作一个简单的示例。我想在自己的网站上做一张地图,但是一旦下载了必要的文件,我就会遇到奇怪的问题。首先,我必须为示例脚本链接添加'type =“ module”'代码,这已经让我发疯了。没有人测试这些应用程序,还是我的环境如此特别?如果它们无法像魅力一样在最常用的浏览器中运行,为什么他们甚至还要使用import标签?在扩展示例代码并将导入链接更改为适合我的环境(将ol / Map.js更改为/ol/Map.js)之后,现在出现了此错误,您可以在标题中阅读。无法解析模块说明符“ rbush”。我能做什么?我不知道。我必须错过一个要点。该示例(https://openlayers.org/en/latest/examples/simple。)在openlayers.org上可以正常在线运行,但是如果我按照说明进行操作,那不是我的目的。为什么?
我有与 bing 地图集成的 openlayers。我也想用谷歌地图而不是 bing 地图转换这个当前系统。我已经将 bing 地图用于旅程规划、绘制形状、搜索位置、添加注释、添加图层等。
我也可以用谷歌地图做上述功能吗?
我知道在 openlayers 中添加叠加层并将它们用作传递一些信息的工具提示,但我们必须管理这些事情才能完成。另一方面,Leaflet 提供bindLabel()了在地图视口中显示工具提示的功能。我的问题是可以在没有叠加层的情况下在 openlayers 中完成,因为随着叠加层数量的增加,地图渲染开始变慢。Overlays只能在一个世界中显示。如果我们想在地图的其他世界中显示它怎么办。
参考标签和覆盖:
我尝试从谷歌地图切换到 osm 并尝试了 OpenLayers(快速入门示例)。如果我使用托管构建,一切看起来都不错。但是,如果我下载 5.1.3 软件包并将其托管在我们的网络服务器上,则缩小按钮的标题会损坏。URL:http : //www.canalcup-cam.de/maps.php
看起来好像使用了非 ASCII“-”...我试图找到设置按钮标题的代码,但没有成功。网站的编码与此有关吗?我试过 utf-8 和 Windows-1250。
问候, hjt
当将许多特征足迹向量加载到地图上时,openlayers 地图和 Web 应用程序变得无响应。有什么方法可以提高具有许多向量的 openlayers 地图的性能吗?
我们希望能够一次在地图上支持至少 1000 个向量。
我们正在使用 openlayers 4。
据我所知,OpenLayers 3+ 使用 HTML5 画布来渲染图像和矢量。我见过画布被用来制作视频游戏和其他高性能图形应用程序。我不明白为什么它会导致 OpenLayers 出现这种无响应的问题。
编辑:当我说“向量”时,我的意思是方形多边形。此应用程序将在具有平均计算能力的桌面上运行。
openlayers ×11
javascript ×4
dictionary ×2
gis ×2
openlayers-3 ×2
openlayers-5 ×2
bing-maps ×1
draw ×1
geometry ×1
geospatial ×1
google-maps ×1
html ×1
interaction ×1
kml ×1
label ×1
leaflet ×1
openlayers-6 ×1
reactjs ×1
vue.js ×1
vuejs3 ×1