leaflet 相关问题

我有一个列表组件，显示带有手风琴元素的对象。在扩展手风琴主体时，我使用 (click)="addToArray(id)" 方法并有我有一个列表组件，显示带有手风琴元素的对象。在扩展手风琴主体时，我使用 (click)="addToArray(id)" 方法，并在手风琴主体中有 <edit-component *ngIf="idArray.includes(id)"></edit-component>。原因是在手风琴展开后加载edit-component，因为它包含一个传单地图，在手风琴最初折叠时无法正确显示。现在，edit-component 包括一些输入和处理和验证这些输入的方法，以及 map-input-component。它使用的是 Leaflet，我不得不将 .map-container 放入 edit-component 模板中，因为它在自己的组件中找不到 DOM 元素.. 我希望此地图组件在用户单击地图的位置发出，并且已阅读传单事件并希望使用 @Output 将其发出到 edit-component 父级。但是，当我尝试访问 this.mapClickEvent 时，它是未定义的。我怀疑这可能是因为组件是在运行时加载的？我唯一的选择是将地图直接包含在 edit-component 中吗？编辑.component.ts @Component({ selector: "edit-component", templateUrl: "./edit.component.html" }) export class EditComponent { @Input() myObject!: myObjectInterface; // Methods for other inputs onMapClick(event: {lat: number, lng: number}){ console.log(event) } } edit.component.html <div class="row">  <div class="col"> <div class="map-container" [attr.id]="'map-input-' + myObject.id"></div> <map-input-component [object]="myObject" (mapClickEvent)="onMapClick($event)" ></map-input-component> </div> </div> map-input.component.ts @Component({ selector: "map-input-component", template: "", standalone: true }) export class MapInputComponent { @Input() object!: myObjectInterface; @Output() mapClickEvent = new EventEmitter<{lat: number, lng: number}>(); // Leaflet map setup with L.on("click", this.onMapClick) onMapClick(e: LeafletMouseEvent) { // A console.log(e) logs the wanted data // A console.log(this.mapClickEvent) logs undefined this.mapClickEvent.emit({lat: e.latlng.lat, lng: e.latlng.lng}); } } 错误 ERROR TypeError: Cannot read properties of undefined (reading 'emit') at NewClass.onMapClick (map-input.component.ts:132:24) at NewClass.fire (leaflet-src.js:606:11) at NewClass._fireDOMEvent (leaflet-src.js:4565:17) at NewClass._handleDOMEvent (leaflet-src.js:4514:10) at HTMLDivElement.handler (leaflet-src.js:2799:15) at _ZoneDelegate.invokeTask (zone.js:398:33) at core.mjs:14556:55 at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:14556:36) at _ZoneDelegate.invokeTask (zone.js:397:38) at Object.onInvokeTask (core.mjs:14869:33) 当您将 mapClickEvent 设置为 Leafset 时，请确保将 bind 设置为组件的范围，您可以使用 .bind(this) 来完成此操作。无论函数在哪里执行，它总是具有组件的作用域。 L.on("click", this.onMapClick.bind(this)) 根据共享的代码，它应该是： const leafletMap: Map = map(mapContainer).on("click", this.onMapClick.bind(this));

angular leaflet

回答 1 投票 0

LeafLet 地图无法在模态上正确渲染

我正在从事一个大学项目，我对 JS 编码很陌生，我遇到了一个问题，我正在使用 w3 库实现我的应用程序，并且当用户 cli 时会显示一个模式窗口...

javascript leaflet

回答 2 投票 0

如何使用 React-Leaflettilelayer 的访问令牌而不将其暴露在前端？

以下是需要访问令牌的 React Leaflet TileLayer 组件的样子：这是需要访问令牌的 React Leaflet TileLayer 组件的样子： <TileLayer url='https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token=1234567890' attribution='<a href="https://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">© <b>Jawg</b>Maps</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' /> 但是即使我使用 .env 文件中的环境变量，例如 const jawgAccessToken = import.meta.env.VITE_JAWG_TOKEN <TileLayer url=`https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token=${jawgAccessToken}` attribution='<a href="https://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank">© <b>Jawg</b>Maps</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' /> 而不是硬编码它，它仍然会暴露，因为我的 React 组件位于前端。如何在不暴露我的秘密令牌的情况下访问此瓦片层？我正在考虑从前端到后端进行中继，例如将 TileLayer 组件中的 url 替换为后端的 url，其中我通过向 Jawg url 发出 GET 请求然后返回来处理 GET 请求到前端。但我怀疑这是否足够，而且这似乎是一个足够常见的问题（肯定其他人需要使用tilelayer访问令牌而不暴露它们？）我希望有人能够对此问题提供最佳实践答案。谢谢！看起来“最佳实践”答案是在创建访问令牌时添加 URL 限制

reactjs leaflet react-leaflet

回答 1 投票 0

如何检测点是否位于具有立交桥的自然区域（或其他类型）多边形内部？

我试图弄清楚如何检测纬度/经度对（-25.70078，-54.44522）是否在自然区域多边形内。有更好的解决方案吗？到目前为止我有这样的事情： https://ov...

javascript leaflet openstreetmap overpass-api

回答 1 投票 0

leaflet 相关问题

最新问题