openlayers 相关问题

我正在尝试实现这个基本的子组件（ChildComp.vue）：子组件！进入 openlayers Map.vue 脚本：我正在尝试实现这个基本的子组件（ChildComp.vue）： <template> <h2>A Child Component!</h2> </template> 进入 openlayers Map.vue 脚本： <template> <div id="map"></div> </template> <script> import { SidePanel } from 'ol-side-panel'; import { Map, View } from 'ol'; import { Tile as TileLayer } from 'ol/layer'; import { OSM } from 'ol/source'; import ChildComp from './ChildComp.vue' export default { components: { ChildComp }, name: 'Map', mounted() { this.map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: [0, 0], zoom: 2 }) }) let sidePanel = new SidePanel(); this.map.addControl(sidePanel); let layersPane = sidePanel.definePane({ paneId: 'layers', name: "Layers", icon: '<i class="fg-regular-shape-pt"></i>' }); layersPane.addWidgetElement(this.ChildComp) } } </script> <style> .ol-side-panel-tabs, .ol-side-panel-tabs > button, .ol-side-panel-tabs > button.active { color: #8A1946; background-color: #f9f6ed; } .ol-side-panel-tabs > button:hover { color:#f9f6ed; background-color: #8A1946; } .ol-side-panel-content { background-color:#f9f6ed ; } .ol-side-panel-close:hover { color: #8A1946; } </style> 我不能使用 vue 函数，因为它不是 vue 模块，所以我尝试使用这一行来实现 childComponent：layersPane.addWidgetElement(this.ChildComp) 但它给了我以下错误：“未捕获的类型错误：无法在‘节点’上执行‘appendChild’ : 参数 1 不是“节点”类型。” 关于如何纠正它的任何想法？在您的代码中，您尝试使用 layersPane.addWidgetElement(this.ChildComp) 将 ChildComp 组件添加到 layersPane。然而，这是不正确的，因为 this.ChildComp 不是一个实际的元素，而是一个 Vue 组件。要将 Vue 组件添加到 DOM，可以使用 Vue.extend 方法创建该组件的新 Vue 实例，然后将其挂载到 DOM 元素。以下是如何修改代码以实现此目的的示例： import Vue from 'vue'; // import Vue // define the ChildComp as a new Vue component const ChildComp = Vue.extend({ template: '<h2>A Child Component!</h2>' }); export default { name: 'Map', mounted() { // ... layersPane.addWidgetElement(new ChildComp().$mount().$el); // create a new instance of ChildComp and mount it to a DOM element } } 在此修改后的代码中，您将使用 Vue.extend 创建一个新的 Vue 组件，然后使用 new ChildComp() 创建该组件的一个新实例。然后，您使用 $mount 将此实例安装到新创建的 DOM 元素，并将生成的 DOM 元素传递给 addWidgetElement。这应该允许您将 ChildComp 组件添加到 OpenLayers 侧边栏。

vue.js vuejs3 openlayers sidebar

回答 1 投票 0

更新 OpenLayers 地图时无法找出错误 - 未捕获的类型错误：无法读取未定义的属性（读取“0”）

我正在开发一个使用 OpenLayers 7.2 的网络应用程序，它允许用户同时加载多个地图。我正在使用一张地图和一系列带有输入框的选项卡供用户输入地址...

javascript openlayers openlayers-7

回答 0 投票 0

在用户与地图交互时实时获取 openlayers 地图数据

我正在使用 openlayers（7.2 版）创建一个网络应用程序，我正在尝试弄清楚如何实时输出当前中心、缩放和旋转。我找到了 'movestart' 和 'moveend' e...

javascript openlayers openlayers-7

回答 1 投票 0

OpenLayers：我怎样才能阻止点击导致不应该的选择？

要重现，请单击包含文本 4 的蓝色标记。因为这是一个聚类标记，并且它聚类的所有标记都在同一坐标上，所以尝试 z... 是没有意义的