首页 > 其他分享 >【OpenLayers笔记】地图上显示html的覆盖物 - Overlay

【OpenLayers笔记】地图上显示html的覆盖物 - Overlay

时间:2022-09-27 12:33:27浏览次数:59  
标签:map center Overlay html OpenLayers event

添加一个html覆盖层标签:

 

 核心代码:

map.on("click", function (event) {
      map.addOverlay(
        new Overlay({
          //设定html元素的基准位置(默认左上角)
          positioning: "center-center",
          //鼠标放置在标签元素上,地图是否能停止事件交互
          stopEvent:false,
          element: document.getElementById("marker"),
          position: event.coordinate,
        })
      );
    });

效果:

 

标签:map,center,Overlay,html,OpenLayers,event
From: https://www.cnblogs.com/mesmerize/p/16734161.html

相关文章

  • 【OpenLayers笔记】Feature选中交互
    map.addInteraction(newSelect({style:function(feature){feature.setStyle(newStyle({//选......
  • HTML 和 XHTML
    HTML和XHTMLXHTML是用XML编写的HTML。什么是XHTML?XHTML代表可扩展超文本标记语言XHTML几乎与HTML相同XHTML比HTML更严格XHTML是定义为XML应用程序......
  • HTML id 属性
    HTMLid属性使用id属性id属性为HTML元素指定一个唯一的id(该值在HTML文档中必须是唯一的)。CSS和JavaScript可以使用id值对具有特定id值的元素执行某些任......
  • JavaWeb--HTML & CSS--2022年9月27日
    第一节  HTML--w3school网站可学习1、快速入门A、总结HTML文件以.htm或者.html为扩展名HTML结构标签  ......
  • 界面组件DevExpress WinForms v22.1 - 全新升级的HTML CSS 模板
    DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office......
  • 【OpenLayers笔记】绘制描边线
    letlayer=newVectorLayer();//新建一个绘线层letfeature=newFeature({geometry:newLineString([fromLonLat([114,24]),//线的点坐标......
  • 第三章3.1HTML技术与CSS技术
    web中的html以及css: html(超文本标记语言:HyperTextMarkupLanguage):用于描述网页的一种语言;通常其根标签使用html标签;使用尖括号表示:<html>,其也是由开始标签和结束标......
  • Cannot find module 'html-webpack-plugin'
    Cannotfindmodule'html-webpack-plugin'执行npmrunbuild的时候发现Cannotfindmodule'html-webpack-plugin'原因-S表示添加到生产环境中,npmI-D表示开发环......
  • html5超大文件上传和断点续传的实现
    ​一、功能性需求与非功能性需求要求操作便利,一次选择多个文件和文件夹进行上传;支持PC端全平台操作系统,Windows,Linux,Mac支持文件和文件夹的批量下载,断点续传。刷新......
  • 基于BS4的遍历方法及BS4库的HTML格式化和编码
    一、基于BS4的遍历方法1.html基本格式2.便签树的遍历方法(1)标签树的下行遍历属性说明.contents子节点的列表,将所有儿子节点存入列表.children子节点的迭代类......