openlayers 相关问题

我的组件：公社选择：我的组件： <div> <label>Sélectionnez une commune : </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，但如果我硬编码它，它会吗？

angular typescript openlayers

回答 0 投票 0

openlayers 相关问题

最新问题