`
hua04104
  • 浏览: 248683 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

openlayer简单例子

 
阅读更多
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>&nbsp;&nbsp;"+data.level+"<br>&nbsp;&nbsp;当前值:"+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

    在这个"OpenLayer 简单实例7"中,我们将探讨如何利用OpenLayers库来添加标记(Mark)和文本,以及如何处理地图上的多个标记,并为它们设置事件监听器。这个实例将帮助我们理解如何在地图上动态展示数据并与用户进行...

    Openlayer 简单实例10

    在这个“Openlayer简单实例10”中,我们着重关注如何将不同的图层,如WMS(Web Map Service)和WFS(Web Feature Service)图层叠加到Google Maps上,并理解相关的核心概念。 首先,`options`对象是用来初始化...

    Openlayer 简单实例11

    ### Openlayer 简单实例11:添加Vector图层及测量功能 #### 一、OpenLayers简介 OpenLayers是一款开源的JavaScript库,用于显示基于矢量数据的地图和其他类型的地理信息。它支持多种数据源,如WMS(Web Map ...

    Openlayer 简单实例9

    在"OpenLayer简单实例9"中,我们将深入理解如何使用OpenLayers与Google Maps API结合,创建一个基本的地图展示,并进行一些交互操作。 首先,要使用Google Maps,你需要获取API密钥。Google Maps API现在需要通过...

    Openlayer 简单实例3

    本文将详细讲解如何在OpenLayers中实现自定义按钮图标,并结合样式引用,来创建一个简单的实例。 首先,理解OpenLayers中的控件(Controls)概念。控件是地图上的交互元素,如缩放、平移等工具。我们可以根据需求...

    Openlayer 简单实例8

    ### OpenLayers简单实例8:矢量图层添加标记与阴影 #### 一、概述 本章节将通过一个具体的示例来介绍如何使用OpenLayers库在Web地图应用中添加矢量图层,并为这些矢量图层上的元素添加标记以及阴影效果。通过这种...

    openlayer 实例教程

    ### OpenLayers 实例教程知识点详解 #### 一、OpenLayers简介 OpenLayers是一款开源的JavaScript库,用于在网页上展示交互式的地图。它支持多种地图图层格式,并且能够跨浏览器运行,使得开发者可以轻松地创建高...

    Openlayer地图叠加瓦片

    OpenLayers 是一个强大的开源JavaScript库,用于在网页上创建交互式的...在实际项目中,可以根据标签中的"瓦片 Openlayer"关键词,结合提供的"瓦片叠加测试"文件,进行具体的代码实践和调试,以达到理想的叠加效果。

    openlayer包以及列子

    在"openlayer包以及代码例子"中,我们可以深入探讨以下几个核心知识点: 1. **地图显示**: OpenLayers 可以通过调用`ol.Map`对象来创建地图。你需要提供一个DOM元素作为地图容器,并设置至少一个图层(layer)。...

    baiduMap_openlayer(openlayer加载百度地图例子)

    【标题】:“baiduMap_openlayer(openlayer加载百度地图例子)” 在GIS(地理信息系统)领域,集成不同的地图服务是常见的需求。本示例重点展示了如何利用OpenLayers库加载百度地图,让开发者能够在一个Web应用中...

    openlayer3入门教程

    - **创建基本地图**:以下是一个简单的示例,演示如何使用 OL3 创建一个地图并显示 OpenStreetMap 数据。 ```html &lt;!doctype html&gt; #map { height: 256px; width: 512px; } &lt;title&gt;OpenLayers3 ...

    openlayer加载

    下面通过一个简单的例子来展示如何使用OpenLayer加载地图数据: 1. **下载OpenLayer包**:首先需要从官方网站或其他可信源下载OpenLayer的最新版本,并将其解压到项目的某个子目录下。例如,可以创建一个名为`...

    基于Openlayer3的动态标绘.7z

    这个"基于Openlayer3的动态标绘"压缩包显然包含了使用OpenLayers 3进行地图动态标绘的相关教程或示例代码。动态标绘是指在地图上实时绘制、更新和移动各种图形元素,如点、线、面以及更复杂的几何对象,这在地理信息...

    openlayer叠加山东省地图数据和样式

    本项目“openlayer叠加山东省地图数据和样式”旨在利用OpenLayers的功能,将山东省的地图数据进行叠加展示,并对地图元素进行个性化样式设置。 首先,`index_v4.html`是项目的主入口文件,它包含了HTML结构以及引入...

    openlayer 4.2.0 的js 和 css ,支持arcgisserver

    6. **样式(Style)**:OpenLayers 支持使用SLD(Styled Layer Descriptor)或简单的函数来定制图层和要素的样式。这对于地图的视觉呈现至关重要。 7. **事件处理**:OpenLayers 提供了丰富的事件机制,如地图点击...

    Openlayer 4.2.0所有例子 js css

    这个压缩包“Openlayer 4.2.0所有例子 js css”包含了OpenLayers 4.2.0版本的所有示例代码,以及相关的JavaScript和CSS文件,这对于学习和理解OpenLayers的功能和用法非常有帮助。 OpenLayers 4.2.0的更新可能包括...

    openlayer3.13.0

    在使用"openlayer3.13.0"资源包时,你需要解压文件,找到包含的JavaScript库文件,如`ol.js`或`ol.min.js`,将其链接到HTML页面中,然后按照API文档编写JavaScript代码来创建地图实例、添加图层、设置视图等。...

    Openlayer项目分析

    例如,创建一个包含WMS和GML图层的简单地图: ```html &lt;script src="path/to/OpenLayers.js"&gt;&lt;/script&gt; var lon = 5; // x轴坐标 var lat = 40; // y轴坐标 var zoom = 5; // 缩放级别 var map, layer; //...

    openLayer-图层高亮

    在Vue3项目中集成OpenLayers时,你需要确保正确安装和导入OpenLayers库,并在Vue组件中管理地图实例和相关交互。以下是一个简单的Vue3组件示例,展示了如何创建地图、添加图层以及使用Select Interaction进行高亮: ...

    openlayer所有资料

    4. **详细入门案例**:这些案例通常包含简单的地图初始化、图层添加、标记、控制、事件监听等功能的实现,是初学者快速上手的宝贵资源。通过模仿和修改这些例子,你可以快速掌握OpenLayers的基本用法,并逐渐进阶到...

Global site tag (gtag.js) - Google Analytics