首页 / OpenLayers / 使用示例
自定义地图元素
把地图封装成自定义元素 ol-map-view,元素挂载时创建地图、卸载时释放 target,页面里只留一个标签。
源码与运行效果
说明
自定义元素把「创建地图」这件事变成标签行为:connectedCallback 在元素进入
文档时调用,里面新建一个铺满元素的容器并构造 ol.Map;
disconnectedCallback 在元素被移除时调用,setTarget(null)
断开地图与 DOM 的联系,避免事件监听与渲染循环残留。
样式放在元素自身:display:block 加 position:relative,
子容器用 inset:0 撑满。这样地图尺寸只由元素尺寸决定,
与页面其它布局解耦。
| 操作 | 结果 |
|---|---|
| 查看页面结构 | 只有一个自定义标签,没有额外的容器 div |
| 缩放或拖动 | 地图正常工作,事件绑定在元素内部 |
| 调整窗口大小 | 元素尺寸变化,地图自动重算画布 |
自定义元素名必须带连字符,ol-map-view 合法,olmapview 不合法。