Openlayers入门经典例子

最新推荐文章于 2024-06-04 09:45:18 发布

ZeekerLin

最新推荐文章于 2024-06-04 09:45:18 发布

阅读量5.9w

点赞数 16

分类专栏： GIS 学习笔记文章标签： openlayers 入门例子本地图片 webgis

本文链接：https://blog.csdn.net/linlzk/article/details/17263669

版权

所有例子是基于OpenLayers-2.13，不多说直接上代码了，都是js代码，拷贝过去直接可以用了，路径放在OpenLayers-2.13\examples目录下即可。

本例子地图服务是本地图片发布的，只需修改38行 'data/lzk_gis.gif', 图片名即可。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<style>
		html,body {
			height: 99%;
			width: 99%;
		}
		#map {
			width: 698px;
            height: 330px;
			border: 1px solid black;
		}	
		            /* General settings */
            body {
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: small;
            }
            /* Toolbar styles */
            #toolbar {
                position: relative;
                padding-bottom: 0.5em; 
               
            }
	</style>
	<script src="../lib/OpenLayers.js"></script>
	<script type="text/javascript">
			var map, measureControls;
			var markers;
        function init(){
            map = new OpenLayers.Map('map');
			
			/**********************加载图层 开始*******************************/
			var graphic1 = new OpenLayers.Layer.Image(
                'BinJiang City',
                'data/lzk_gis.gif',
				//坐标范围
                new OpenLayers.Bounds(-180, -90, 180, 90),
				//图片大小
                new OpenLayers.Size(1024, 768),
                {numZoomLevels: 3}
            );
			var graphic2 = new OpenLayers.Layer.Image(
                'BinJiang City1',
                'data/4_m_citylights_lg.gif',
				//坐标范围
                new OpenLayers.Bounds(-180, -90, 180, 90),
				//图片大小
                new OpenLayers.Size(1024, 768),
                {numZoomLevels: 3}
            );
			//graphic2.setVisibility(false); //设置为不显示

            map.addLayers([graphic1,graphic2]);

			//map.setCenter(new OpenLayers.LonLat(90, 10), 0);

			// 注册map点击事件
			map.events.register("click", map, onMapClick);
			// 注册map点击事件
			map.events.register("zoomend", map, onMapZoom);

			// 放大到全屏
            map.zoomToMaxExtent();
			
			//map.addControl(new OpenLayers.Control.LayerSwitcher());
            //map.addControl(new OpenLayers.Control.MousePosition());
			/********************END 加载图层*********************************/


			/************************加载一般的基础控件********************************/   
                map.addControl(new OpenLayers.Control.PanZoomBar({  //添加平移缩放工具条
                    position: new OpenLayers.Pixel(2, 6)
                }));
                //map.addControl(new OpenLayers.Control.Navigation());  //双击放大,平移
                //map.addControl(new OpenLayers.Control.Scale($('scale')));  //获取地图比例尺
               // map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));  //获取鼠标的经纬度
				//map.setCenter(new OpenLayers.LonLat(100.254, 35.25), 1);  //添加平移缩放工具条
				//map.addControl(new OpenLayers.Control.O