var vectorLayer = new OpenLayers.Layer.Vector("points");
map.addLayer(vectorLayer);
var markers = new OpenLayers.Layer.Markers( "Markers" );
var imageUrl = 'http://www.openlayers.org/dev/img/marker.png';
var jz = new OpenLayers.Icon(imageUrl,size,offset);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
for(var i=0;i<datas.length;i++) {
var point = new OpenLayers.Geometry.Point(Number(datas[i].lon), Number(datas[i].lat));
//图片样式
/*var style_point = {
graphicWidth : 21,
graphicHeight: 25,
externalGraphic:imageUrl,
graphicTitle:datas[i].value
};*/
//标注样式
var style_point = {
strokeColor: '#000000',
strokeWidth: 1,
strokeDashstyle: "solid",
pointRadius: 1,
strokeOpacity: 0.8,
fillOpacity: 0.8,
label:datas[i].value,
fontSize:'12px',
fontFamily:'宋体',
labelXOffset:0,
labelYOffset:-15,
labelAlign:'m',
//fillColor: '#000000'
};
var pointFeature = new OpenLayers.Feature.Vector(point, null, style_point);
vectorLayer.addFeatures([pointFeature]);
//图片显示
var marker = new OpenLayers.Marker(new OpenLayers.LonLat(datas[i].lon,datas[i].lat),jz.clone());
markers.addMarker(marker);
map.addLayer(markers);
createPopup(marker, datas[i]);
}
//鼠标移开事件
/*marker.events.register("mouseout", marker, function(evt){
popup1.hide();
});*/
if(!map.getCenter()){
map.zoomToMaxExtent();
}
}
//弹窗
function createPopup(marker, data) {
//鼠标悬浮到图标上的事件
marker.events.register("click", marker, function(evt){
var html="<b> "+data.level+"<br> 当前值:"+data.value+"人</b>";
var popup1=new OpenLayers.Popup("popup1",
new OpenLayers.LonLat(data.lon,data.lat),
new OpenLayers.Size(200,50),
html,
true);
popup1.setBackgroundColor("#ffffff");
popup1.setOpacity(12);
popup1.setBorder("1px solid #d91f12");
map.addPopup(popup1);
});
}
分享到:
相关推荐
在这个"OpenLayer 简单实例7"中,我们将探讨如何利用OpenLayers库来添加标记(Mark)和文本,以及如何处理地图上的多个标记,并为它们设置事件监听器。这个实例将帮助我们理解如何在地图上动态展示数据并与用户进行...
在这个“Openlayer简单实例10”中,我们着重关注如何将不同的图层,如WMS(Web Map Service)和WFS(Web Feature Service)图层叠加到Google Maps上,并理解相关的核心概念。 首先,`options`对象是用来初始化...
### Openlayer 简单实例11:添加Vector图层及测量功能 #### 一、OpenLayers简介 OpenLayers是一款开源的JavaScript库,用于显示基于矢量数据的地图和其他类型的地理信息。它支持多种数据源,如WMS(Web Map ...
在"OpenLayer简单实例9"中,我们将深入理解如何使用OpenLayers与Google Maps API结合,创建一个基本的地图展示,并进行一些交互操作。 首先,要使用Google Maps,你需要获取API密钥。Google Maps API现在需要通过...
本文将详细讲解如何在OpenLayers中实现自定义按钮图标,并结合样式引用,来创建一个简单的实例。 首先,理解OpenLayers中的控件(Controls)概念。控件是地图上的交互元素,如缩放、平移等工具。我们可以根据需求...
### OpenLayers简单实例8:矢量图层添加标记与阴影 #### 一、概述 本章节将通过一个具体的示例来介绍如何使用OpenLayers库在Web地图应用中添加矢量图层,并为这些矢量图层上的元素添加标记以及阴影效果。通过这种...
### OpenLayers 实例教程知识点详解 #### 一、OpenLayers简介 OpenLayers是一款开源的JavaScript库,用于在网页上展示交互式的地图。它支持多种地图图层格式,并且能够跨浏览器运行,使得开发者可以轻松地创建高...
OpenLayers 是一个强大的开源JavaScript库,用于在网页上创建交互式的...在实际项目中,可以根据标签中的"瓦片 Openlayer"关键词,结合提供的"瓦片叠加测试"文件,进行具体的代码实践和调试,以达到理想的叠加效果。
在"openlayer包以及代码例子"中,我们可以深入探讨以下几个核心知识点: 1. **地图显示**: OpenLayers 可以通过调用`ol.Map`对象来创建地图。你需要提供一个DOM元素作为地图容器,并设置至少一个图层(layer)。...
【标题】:“baiduMap_openlayer(openlayer加载百度地图例子)” 在GIS(地理信息系统)领域,集成不同的地图服务是常见的需求。本示例重点展示了如何利用OpenLayers库加载百度地图,让开发者能够在一个Web应用中...
- **创建基本地图**:以下是一个简单的示例,演示如何使用 OL3 创建一个地图并显示 OpenStreetMap 数据。 ```html <!doctype html> #map { height: 256px; width: 512px; } <title>OpenLayers3 ...
下面通过一个简单的例子来展示如何使用OpenLayer加载地图数据: 1. **下载OpenLayer包**:首先需要从官方网站或其他可信源下载OpenLayer的最新版本,并将其解压到项目的某个子目录下。例如,可以创建一个名为`...
这个"基于Openlayer3的动态标绘"压缩包显然包含了使用OpenLayers 3进行地图动态标绘的相关教程或示例代码。动态标绘是指在地图上实时绘制、更新和移动各种图形元素,如点、线、面以及更复杂的几何对象,这在地理信息...
本项目“openlayer叠加山东省地图数据和样式”旨在利用OpenLayers的功能,将山东省的地图数据进行叠加展示,并对地图元素进行个性化样式设置。 首先,`index_v4.html`是项目的主入口文件,它包含了HTML结构以及引入...
6. **样式(Style)**:OpenLayers 支持使用SLD(Styled Layer Descriptor)或简单的函数来定制图层和要素的样式。这对于地图的视觉呈现至关重要。 7. **事件处理**:OpenLayers 提供了丰富的事件机制,如地图点击...
这个压缩包“Openlayer 4.2.0所有例子 js css”包含了OpenLayers 4.2.0版本的所有示例代码,以及相关的JavaScript和CSS文件,这对于学习和理解OpenLayers的功能和用法非常有帮助。 OpenLayers 4.2.0的更新可能包括...
在使用"openlayer3.13.0"资源包时,你需要解压文件,找到包含的JavaScript库文件,如`ol.js`或`ol.min.js`,将其链接到HTML页面中,然后按照API文档编写JavaScript代码来创建地图实例、添加图层、设置视图等。...
例如,创建一个包含WMS和GML图层的简单地图: ```html <script src="path/to/OpenLayers.js"></script> var lon = 5; // x轴坐标 var lat = 40; // y轴坐标 var zoom = 5; // 缩放级别 var map, layer; //...
在Vue3项目中集成OpenLayers时,你需要确保正确安装和导入OpenLayers库,并在Vue组件中管理地图实例和相关交互。以下是一个简单的Vue3组件示例,展示了如何创建地图、添加图层以及使用Select Interaction进行高亮: ...
4. **详细入门案例**:这些案例通常包含简单的地图初始化、图层添加、标记、控制、事件监听等功能的实现,是初学者快速上手的宝贵资源。通过模仿和修改这些例子,你可以快速掌握OpenLayers的基本用法,并逐渐进阶到...