openlayers 相关问题

OpenLayers：地图中每个 GeoJson 功能都有自己的颜色？

有任何关于要素样式类型等的示例，但这只是针对简单地图的一个想法，而不是针对与数据库中不断变化的信息相结合的大量数据。 这是我的

图层组未显示在我的 Web 应用程序中。仅显示一层并且单击事件不起作用

我已成功在 GeoServer 中将三个 shapefile 作为图层组发布。但是，在我的 Web 应用程序中，我目前面临一个问题，即图层组中仅显示一个图层，...

如何从 GeoJSON 属性在 OpenLayers 中添加线串

我有一个带有简单 GeoJSON 文件层（几个城镇）的地图，每个城镇都有一个“bbox”属性。它是一个点或一条线串。 GeoJSON 文件如下所示： {“类型”：“

使用开放图层图时如何指定形状的显示顺序

我创建了一张由不同形状（例如 2 个圆圈和一条线）组成的地图。该线连接 2 个圆的中心。即使我先添加了线条，然后添加了圆圈，线条总是出现...

如果我使用硬编码 id，Openlayers 就会开始加载，但如果我使用 [id]，则不会加载

我的组件： 公社选择： 我的组件： <div> <label>Sélectionnez une commune :&nbsp;</label> <app-communes anneeCOG="2023"></app-communes> </div> <div *ngFor="let region of regions;"> <app-carte [id] = "environment[region + '_id']" [nom]="environment[region + '_nom']" [url_couche] = "environment[region + '_couche_url']" [layer_couche] = "environment[region + '_couche_layer']" [longitude] = "environment[region + '_longitude_initale']" [latitude] = "environment[region + '_latitude_initale']" [zoom] = "environment[region + '_zoom']" [projection] = "environment[region + '_projection']"> </app-carte> </div> 依赖于environment.ts文件： // Métropole metropole_id: 'carte_metropole', // Identifiant de la carte (placé dans la balise) metropole_nom: 'Métropole', // Nom de cette partie de carte metropole_couche_layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2', // Plan IGN V2 metropole_couche_url: 'https://wxs.ign.fr/decouverte/geoportail/wmts', // Plan IGN V2, tuilé metropole_projection: 'EPSG:3857', // Web Mercator projection metropole_latitude_initale: 46.53333333, // Centroïde de la France, d'après IGN en 1993 (Commune de Vesdun dans le Cher) metropole_longitude_initale: 2.41666667, metropole_zoom: 6, // Guadeloupe guadeloupe_id: 'carte_guadeloupe', guadeloupe_nom: 'Guadeloupe', guadeloupe_couche_layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2', guadeloupe_couche_url: 'https://wxs.ign.fr/decouverte/geoportail/wmts', guadeloupe_projection: 'EPSG:3857', guadeloupe_latitude_initale: 16.265, guadeloupe_longitude_initale: -61.551, guadeloupe_zoom: 9, // Martinique martinique_id: 'carte_martinique', martinique_nom: 'Martinique', martinique_couche_layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2', martinique_couche_url: 'https://wxs.ign.fr/decouverte/geoportail/wmts', martinique_projection: 'EPSG:3857', martinique_latitude_initale: 14.641528, martinique_longitude_initale: -61.024174, martinique_zoom: 9, // Guyane guyane_id: 'carte_guyane', guyane_nom: 'Guyane', guyane_couche_layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2', guyane_couche_url: 'https://wxs.ign.fr/decouverte/geoportail/wmts', guyane_projection: 'EPSG:3857', guyane_latitude_initale: 3.933889, guyane_longitude_initale: -53.125782, guyane_zoom: 8, // La Réunion la_reunion_id: 'carte_la_reunion', la_reunion_nom: 'La Réunion', la_reunion_couche_layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2', la_reunion_couche_url: 'https://wxs.ign.fr/decouverte/geoportail/wmts', la_reunion_projection: 'EPSG:3857', la_reunion_latitude_initale: -21.115141, la_reunion_longitude_initale: 55.536384, la_reunion_zoom: 9, // Mayotte mayotte_id: 'carte_mayotte', mayotte_nom: 'Mayotte', mayotte_couche_layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2', mayotte_couche_url: 'https://wxs.ign.fr/decouverte/geoportail/wmts', mayotte_projection: 'EPSG:3857', mayotte_latitude_initale: -12.827500, mayotte_longitude_initale: 45.166244, mayotte_zoom: 9 并由以下人员实施： export class CarteFranceComponent { protected readonly environment= environment; protected regions: string[] = ['metropole', 'guadeloupe', 'martinique', 'guyane', 'la_reunion', 'mayotte'] } 它使用 app-carte 标签，其 html 仅限于： <div class="{{id}}" id="{{id}}"></div> 它的实现就是这样开始的，因为它的初始加载部分给我带来了麻烦： export class CarteComponent implements OnInit { /** Identifiant de la carte (placé dans sa balise) */ @Input() id!: string; /* Nom de cette carte */ @Input() nom!: string; /* Longitude. */ @Input() longitude!: number; /* Latitude. */ @Input() latitude!: number; /** Niveau de zoom initial. */ @Input() zoom!: number; /** Projection */ @Input() projection!: string; /** URL de la couche à afficher initialement. */ @Input() url_couche!: string; /** Layer de la couche à afficher initialement. */ @Input() layer_couche!: string; /** Couche géographique à afficher */ private couche_geographique: TileLayer<WMTS>; /** Map Openlayer */ private coucheOpenLayer: Map; /** * Initialiser le composant carte */ ngOnInit(): void { // Déclarer la couche, si elle n'est pas encore connue if (this.couche_geographique == null) { console.log(`Chargement initial de la carte '${this.nom}' avec la couche géographique '${this.layer_couche}' depuis l'URL ${this.url_couche}. Id de destination: '${this.id}'`) this.couche_geographique = this.declare_couche(this.url_couche, this.layer_couche, this.projection, 'image/png'); } // Placer la couche demandée, aux coordonnées et zoom initiaux demandées console.log(`Initialisation de la carte '${this.nom}' (id: '${this.id}')`) this.coucheOpenLayer = new Map({ layers: [ this.couche_geographique ], target: this.id, view: new View({ center: fromLonLat([this.longitude, this.latitude]), zoom: this.zoom, projection: this.projection }) }); this.coucheOpenLayer.on('loadstart', function() { console.log(`Début du chargement de la carte`) }) this.coucheOpenLayer.on('loadend', function() { console.log(`Fin du chargement de la carte`) }) this.coucheOpenLayer.on('error', function() { console.log(`Erreur de chargement de la carte`) }) } [...] 运行时，控制台显示： Démarrage environnement dev spark: http://localhost:9090 backend: http://localhost:9091 app.component.ts:14:12 Chargement initial de la carte 'Métropole' avec la couche géographique 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' depuis l'URL https://wxs.ign.fr/decouverte/geoportail/wmts. Id de destination: 'carte_metropole' carte.component.ts:58:14 Initialisation de la carte 'Métropole' (id: 'carte_metropole') carte.component.ts:63:12 Chargement initial de la carte 'Guadeloupe' avec la couche géographique 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' depuis l'URL https://wxs.ign.fr/decouverte/geoportail/wmts. Id de destination: 'carte_guadeloupe' carte.component.ts:58:14 Initialisation de la carte 'Guadeloupe' (id: 'carte_guadeloupe') carte.component.ts:63:12 Chargement initial de la carte 'Martinique' avec la couche géographique 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' depuis l'URL https://wxs.ign.fr/decouverte/geoportail/wmts. Id de destination: 'carte_martinique' carte.component.ts:58:14 Initialisation de la carte 'Martinique' (id: 'carte_martinique') carte.component.ts:63:12 Chargement initial de la carte 'Guyane' avec la couche géographique 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' depuis l'URL https://wxs.ign.fr/decouverte/geoportail/wmts. Id de destination: 'carte_guyane' carte.component.ts:58:14 Initialisation de la carte 'Guyane' (id: 'carte_guyane') carte.component.ts:63:12 Chargement initial de la carte 'La Réunion' avec la couche géographique 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' depuis l'URL https://wxs.ign.fr/decouverte/geoportail/wmts. Id de destination: 'carte_la_reunion' carte.component.ts:58:14 Initialisation de la carte 'La Réunion' (id: 'carte_la_reunion') carte.component.ts:63:12 Chargement initial de la carte 'Mayotte' avec la couche géographique 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' depuis l'URL https://wxs.ign.fr/decouverte/geoportail/wmts. Id de destination: 'carte_mayotte' carte.component.ts:58:14 Initialisation de la carte 'Mayotte' (id: 'carte_mayotte') 区域循环点处的断点（即：在“Martinique”上，id：“carte_martinique”）显示正确的值： 进行 HTML 检查，我发现： 根本没有 openlayers 加载。 但是，如果我在 this.id = 'carte_martinique' 中强加 ngOnInit()： ngOnInit(): void { // Déclarer la couche, si elle n'est pas encore connue if (this.couche_geographique == null) { console.log(`Chargement initial de la carte '${this.nom}' avec la couche géographique '${this.layer_couche}' depuis l'URL ${this.url_couche}. Id de destination: '${this.id}'`) this.couche_geographique = this.declare_couche(this.url_couche, this.layer_couche, this.projection, 'image/png'); } this.id = "carte_martinique"; // Placer la couche demandée, aux coordonnées et zoom initiaux demandées console.log(`Initialisation de la carte '${this.nom}' (id: '${this.id}')`) this.coucheOpenLayer = new Map({ layers: [ this.couche_geographique ], target: this.id, view: new View({ center: fromLonLat([this.longitude, this.latitude]), zoom: this.zoom, projection: this.projection }) }); openlayers 加载正在开始。 Chargement initial de la carte 'Métropole' avec la couche géographique 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' depuis l'URL https://wxs.ign.fr/decouverte/geoportail/wmts. Id de destination: 'carte_metropole' carte.component.ts:58:14 Initialisation de la carte 'Métropole' (id: 'carte_martinique') carte.component.ts:65:12 Chargement initial de la carte 'Guadeloupe' avec la couche géographique 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' depuis l'URL https://wxs.ign.fr/decouverte/geoportail/wmts. Id de destination: 'carte_guadeloupe' carte.component.ts:58:14 Initialisation de la carte 'Guadeloupe' (id: 'carte_martinique') carte.component.ts:65:12 Chargement initial de la carte 'Martinique' avec la couche géographique 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' depuis l'URL https://wxs.ign.fr/decouverte/geoportail/wmts. Id de destination: 'carte_martinique' carte.component.ts:58:14 Initialisation de la carte 'Martinique' (id: 'carte_martinique') carte.component.ts:65:12 Chargement initial de la carte 'Guyane' avec la couche géographique 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' depuis l'URL https://wxs.ign.fr/decouverte/geoportail/wmts. Id de destination: 'carte_guyane' carte.component.ts:58:14 Initialisation de la carte 'Guyane' (id: 'carte_martinique') carte.component.ts:65:12 Chargement initial de la carte 'La Réunion' avec la couche géographique 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' depuis l'URL https://wxs.ign.fr/decouverte/geoportail/wmts. Id de destination: 'carte_la_reunion' carte.component.ts:58:14 Initialisation de la carte 'La Réunion' (id: 'carte_martinique') carte.component.ts:65:12 Chargement initial de la carte 'Mayotte' avec la couche géographique 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2' depuis l'URL https://wxs.ign.fr/decouverte/geoportail/wmts. Id de destination: 'carte_mayotte' carte.component.ts:58:14 Initialisation de la carte 'Mayotte' (id: 'carte_martinique') carte.component.ts:65:12 Angular is running in development mode. Call enableProdMode() to enable production mode. core.mjs:25520:16 Début du chargement de la carte Fin du chargement de la carte 我可以看到 ol-viewport div 聚集在第一个 div 下，并且有 id carte_martinique（他们现在都有）： 为什么，当我在循环内使用 this.id 时，openlayers 不会考虑 id carte_martinique， 但如果我硬编码它，它会吗？

map.foreachfeatureatpixel() 在角度打字稿开放层 7 中不起作用

代码在正常的Javascript中运行良好，但在typescript（角度）中它抛出一个错误，this.map.foreachfeatuatpixel()，this.map未定义，无法读取未定义的属性 T...

useState 布尔值

在useEffect内部，useState布尔值不会改变。请帮我。 我试图在 openlayers 地图中单击标记时弹出一个模式窗口。由于 openlayers 地图是 ex...

Openlayers - 选择交互 - 不要使用 ol.style.Icon 和 ol.style.FontSymbol 查询点几何

我试图在选择具有 ol.style.Style 样式的点几何时不查询，其中在某些情况下配置 ol.style.Icon，在其他情况下配置 ol.style.FontSymbol ol.style.Icon 前...

OpenLayers：无法渲染几乎相同的两个 tiff 文件

我创建了这个 codesandbox 示例，在其中我没有任何样式地渲染了一个 tiff： https://codesandbox.io/s/cog-test-aspect-kriw38?file=/main.js tiff 来源是这个 https://andy-aws.s3.eu-no...

如何使用 OpenLayers 和 GeoServer 生成动态图例？

我正在使用 OpenLayers 3 和 GeoServer 创建具有多个图层的地图。我能够使用 GetLegendGraphic 从 GeoServer 为每一层生成图例，并使用以下内容显示它们： &...

在 Openlayers 中如何从 WMTS 渲染多波段 geotiff 磁贴？

我使用带有 ol.source.WMTS 的 Openlayers 加载了多波段 geotiff， 我想用一些乐队的价值来呈现定制的风格。 我知道我可以使用 geotiff.js 和 canvas 来实现，但是......

渲染的 GeoTiff 位置不一致

我正在使用 React With OpenLayers 在地图（mapbox 卫星）上渲染 GeoTiff 叠加层。 我面临的问题是，有时这些 geoTiff 文件与原始文件有点不同

在 Openlayers 中，我们如何以 pdf 格式打印框架区域，而不是所有画布区域，以及如何将多个框架打印为 pdf 页面？

在 Openlayers 中，我们如何打印 pdf 中的框架区域？而不是所有画布区域，以及如何将多个页面/框架打印为 pdf 页面？ 我尝试了选项， 这个.workspaceFacade.map ...

如何将不同的参数传递给 lambda 函数

我想知道如何将一些参数传递给 labmda 函数 this.func？ 我希望能够传递包括事件在内的三个参数，并使用 console.log 显示其内容

如何使用 setActive(false) 激活双击缩放

我想以这样的方式修改下面的代码，请它只停用双击事件的缩放。 我尝试了下面发布的代码，但它禁用了所有交互，包括 ...

Openlayers，从 FeatureLike 推断特征类型

修改功能会发出以下事件。 从“ol/interaction/Modify”导入{ModifyEvent}； 输入 DrawToolEvent { 类型：字符串 我：修改事件 图层：VectorLayer...

bootstrap 按钮工具栏样式未应用

我创建了一个“AddCustomElement”类来创建按钮工具栏、按钮组和按钮，如下所示： 导入“@fortawesome/fontawesome-free/css/all.css”； 导入“bootstrap/dist/css/bootstrap.css”； 小鬼...

如何在 OpenLayers 7 中更改我的 SVG 标记的颜色

我什至不确定这是否可行，但我正在尝试更改开放图层 7 地图上标记的颜色。使用以下代码行从 svg 文件添加标记： 常数

无法使用扩展类设置旋转

我想实现一个子类来修改地图方向。 我有一个导出“MainMap”的 main.js 文件： 导入'./style.css'； 导入“ol-ext/dist/ol-ext.min.css”； 从 'o... 导入 {Map, View}

创建一个具有半径和投影的圆 - 打开图层

目前，每当我放大/缩小我的圆圈时，该区域就会丢失或半径不正确，我想我的半径需要投影到地图上。这是我的代码 ... var circle = new ol.layer....