OpenLayers 动态添加标记（Marker）和信息窗（Popup）

最新推荐文章于 2024-07-02 11:10:33 发布

san.hang

最新推荐文章于 2024-07-02 11:10:33 发布

阅读量3.5k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/boonya/archive/2012/03/18/2404731.html

版权

本文介绍了两种在OpenLayers中动态添加标记（Marker）和信息窗（Popup）的方法。第一种方法涉及创建标记图层，然后动态添加Marker和Popup，需要通过事件激活Click方法。第二种方法是利用Feature的特性直接在矢量层上注册事件，这种方式能确保Popup样式与整体一致。建议使用第二种方式。

摘要由CSDN通过智能技术生成

方式一：使用marker方式

1、在地图上添加标记图层

var markers =newOpenLayers.Layer.Markers("Markers");
map.addLayer(markers);//地图初始化添加

2、动态添加标记和Popup方法：

//add map initial method

 map.events.register('click', this, function(e) {

    var LonLat=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

san.hang

关注关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

105：vue+openlayers 引用组件来添加marker （示例代码）

大剑师兰特的GIS世界

08-30

664

本示例的目的是介绍演示如何在vue+openlayers中调用ol-marker-feature控件，来添加marker。

Openlayers 教程 10 - 自定义气泡框（弹出框）以及定位到气泡框

linzi19900517的博客

06-30

2876

Openlayers 气泡框功能，主要用来展示地图要素的属性信息，也被称为气泡、卡片、弹出框等等。本文主要介绍，气泡框的初始化、气泡框展示信息、气泡框样式、气泡框定位。

参与评论您还未登录，请先登录后发表或查看评论

openlayers custom marker and popup 动态标注提示信息

penghuangit的专栏

05-03

3875

困惑的很久的openlayers 动态标注提示信息问题，现已解决。其实很简单1. 创建图层layerfunctionenableMarkerLayer() {//创建图层 markers =new OpenLayers.Layer.Markers("图层名称"); map.addLayer(markers);

openlayer 添加marker弹出窗口

starting

05-12

996

var markers,marker,popup; var markArr=new Array(); function addMarker(){ /* var url = 'http://www.openlayers.org/dev/img/marker.png'; var sz = new OpenLayers.Size(20, 2...

高德离线地图OpenLayers实现添加标记点及标记点事件

最新发布

chenchuang0128的博客

07-02

688

要在使用高德离线地图数据的OpenLayers应用中添加标记点（通常称为"特征"或"要素"）以及为这些标记点添加事件，你需要首先确保你的离线地图数据是以OpenLayers能够理解的格式提供的（如PNG瓦片用于底图，GeoJSON或其他矢量格式用于叠加层）。然而，由于高德地图主要提供的是在线服务，直接使用其离线数据格式（如.dat或.db文件）与OpenLayers集成可能比较复杂。

OpenLayers-添加Marker

a18826265589的博客

12-22

887

在OpenLayers Map添加Marker。 1.创建Marker图层 Maker由Marker图层进行管理 var marker_layer = new OpenLayers.Layer.Markers("markers"); 2.创建Marker对象 1 //创建Marker 位置 2 var pos = new new OpenLayers.L...

layer添加元素 openlayer_OpenLayer学习之聚合标注和信息框弹出

weixin_31693025的博客

01-12

293

首先感觉我做的这个Demo是真的烂，查资料都没有多少，自己摸索着做出来，虽然比较烂，但是毕竟是一种思路一、聚合图层的组成1、Vector的source，这里面主要放feature，这个source不是直接加载到Vector图层中的sourcefor (var i = 0; i < dataSource.length; i++) {var coordinate = ol.proj.transf...

openlayers6【十六】vue overlay类实现gif动态图标效果详解

@必意玲

07-17

4571

前提： openlayer 里面支持 gif 图标上图的只有 overlay类可以实现。 openlayers 不支持 svga 动画图文章目录1. 效果图2. 【核心】创建overlay类，循环点位根据坐标创建div点位3. css设置gif图标4. 完整代码 1. 效果图 2. 【核心】创建overlay类，循环点位根据坐标创建div点位 // 使用Overlay添加GIF动态图标点位信息 addGif() { let _that = this; let mainBox =.

利用OpenLayers3在地图上显示标记并点击标记后显示弹出框

热门推荐

mgsky1的博客

05-04

2万+

前言在上一篇《利用全能电子地图下载器+GeoWebCache发布Arcgis Server缓存瓦片过程全记录》中，我们利用GeoWebCache作为瓦片地图服务器发布了瓦片地图。虽然在其中可以直接浏览，但是在GeoWebCache1.10.0中，官方内置的是OpenLayers2的版本，这个版本比较老旧，不能很好的适应诸如触屏设备等应用环境。所以，我想利用OpenLayers2的升级版Open...

OpenLayers地图标记物添加及事件交互

- 提供丰富的地图交互操作，如缩放、平移、标记物添加等。 - 具有良好的跨平台性，能够在不同设备和浏览器上运行。 - 提供丰富的地图样式和控件定制选项，满足个性化需求。 1.3 OpenLayers在地图开发中的应用领域 ...

openlayers示例教程284+【目录】

大剑师兰特的GIS世界

09-05

1万+

vue+openlayers系列教程旨在为开发者提供简单快捷的示例。在每一个示例中，解释相应的API知识点。

openlayer实现浮标与悬浮框以及扩散闪烁效果

cxb_96的博客

08-28

1329

openalyer基于vue实现浮标与自定义闪烁效果以及悬浮框

openlayers在地图上添加maker

冰雪为融的博客

08-07

984

如下图所示，点击地图的时候，显示一个小红点初始化一个图层 function initMaker() { makerLayer = new ol.layer.Vector({ source: null, style: null, zIndex: 11 }) map.addLayer(makerLayer) } 点击地图的时候添加 map.on('click', function(e) { /...

openlayers中利用vector实现marker的方式

kill1047的专栏

09-04

272

项目需要一个小型的gis。openlayers，geoserver，postgres组合是比较好的选择。 openlayers的marker层好像不支持拖动操作。通过研究api发现，可以利用vector层达到这个目的，作出标注的效果。可以定位，搜索，拖动等效果，选中的时候可以通过修改style达到动画效果。基本做法如下： 1：定义marker显示的样式 2：扩展vector层，利...

Openlayers Overlay加载gif图片

weixin_38170255的博客

09-05

1342

说明：项目中使用vector图层做图片撒点功能，发现加载gif没有效果。网上查找资料发现，openlayers不支持gif图片样式。后面采用overlay的方式，gif图片赋值给DOM元素解决方案： 1、单个点先在地图容器里新增一个id为marks的<div>标签 /*加载gif图片格式*/ function addGifMarks(...

openlayers 2实现vector图层文字标注

OpenGIS OpenMind

06-25

7467

openlayers 图层绑定要素属性实现文字标注（注记）；

openlayers

DingYiFan

09-03

961

var zoom = 5; var pageMap, select; var proj = null; var url = "readFile!readTrajCsv.action"; var layerType = 0; function init() { pageMap = new OpenLayers.Map({ div : "map", projection : new Open

openlayers：实现动态集群 (附完整源码）

希望我的博客，能帮上你解决学习中工作中所遇到的问题

01-28

openlayers：实现动态集群 (附完整源码）