openlayer2 加载本地图片经典例子
原文:http://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"?>
- >
- <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.OverviewMap()); //添加鹰眼图
- //map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); //图层切换工具
- // map.addControl(new OpenLayers.Control.Permalink('xxxx')); //添加永久链接
- //map.addControl(new OpenLayers.Control.MouseToolbar());
- //map.zoomToMaxExtent();
- //var zb=new OpenLayers.Control.ZoomBox({out:true});
- //var panel = new OpenLayers.Control.Panel({defaultControl: zb});
- //map.addControl(panel);
- /************END************加载一般的基础控件********************************/
- /*****************************测距、面积Start***************************/
- // style the sketch fancy
- var sketchSymbolizers = {
- "Point": {
- pointRadius: 4,
- graphicName: "square",
- fillColor: "white",
- fillOpacity: 1,
- strokeWidth: 1,
- strokeOpacity: 1,
- strokeColor: "#333333"
- },
- "Line": {
- strokeWidth: 3,
- strokeOpacity: 1,
- strokeColor: "#ffffff",
- strokeDashstyle: "dash"
- },
- "Polygon": {
- strokeWidth: 2,
- strokeOpacity: 1,
- strokeColor: "#ffffff",
- fillColor: "white",
- fillOpacity: 0.3
- }
- };
- var style = new OpenLayers.Style();
- style.addRules([
- new OpenLayers.Rule({symbolizer: sketchSymbolizers})
- ]);
- var styleMap = new OpenLayers.StyleMap({"default": style});
- // allow testing of specific renderers via "?renderer=Canvas", etc
- var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
- renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
- measureControls = {
- line: new OpenLayers.Control.Measure(
- OpenLayers.Handler.Path, {
- persist: true,
- handlerOptions: {
- layerOptions: {
- renderers: renderer,
- styleMap: styleMap
- }
- }
- }
- ),
- polygon: new OpenLayers.Control.Measure(
- OpenLayers.Handler.Polygon, {
- persist: true,
- handlerOptions: {
- layerOptions: {
- renderers: renderer,
- styleMap: styleMap
- }
- }
- }
- )
- };
- var control;
- for(var key in measureControls) {
- control = measureControls[key];
- control.events.on({
- "measure": handleMeasurements,
- "measurepartial": handleMeasurements
- });
- map.addControl(control);
- }
- //map.setCenter(new OpenLayers.LonLat(0, 0), 3);
- /**************************测距、面积End***************************/
- /**************************添加图片标注Start***************************/
- markers = new OpenLayers.Layer.Markers( "Markers" );
- map.addLayer(markers);
- var size = new OpenLayers.Size(21,25);
- var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
- var icon = new OpenLayers.Icon('./img/mobile-loc.png',size,offset);
- markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(88,46),icon));
- var halfIcon = icon.clone();
- markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(46,45),halfIcon));
- halfIcon.setOpacity(0.5);
- marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone());
- marker.setOpacity(0.2);
- //鼠标点击事件
- marker.events.register('mousedown', marker, function(evt) { alert(this.icon.url); OpenLayers.Event.stop(evt); });
- markers.addMarker(marker);
- //map.addControl(new OpenLayers.Control.LayerSwitcher());
- //map.zoomToMaxExtent();
- //鼠标悬浮到图标上的事件
- var companyname="白马湖",renshu=502;
- marker.events.register("mouseover", marker, function(evt){
- var html=" "+companyname+"<br> 当前人数："+renshu+"人b>";
- popup1=new OpenLayers.Popup("popup1",
- new OpenLayers.LonLat(90,10),
- new OpenLayers.Size(200,50),
- html,
- false);
- popup1.setBackgroundColor("#ffffff");
- popup1.setOpacity(12);
- popup1.setBorder("1px solid #d91f12");
- map.addPopup(popup1);
- });
- //鼠标移开事件
- marker.events.register("mouseout", marker, function(evt){
- popup1.hide();
- });
- /**************************添加图片标注End***************************/
- //createPoint();
- //不同级别显示不同图层
- function onMapZoom(e){
- //alert('zoom level:'+map.getZoom());
- //alert('sclse:'+map.getScale());
- if(map.getZoom() == 1){
- //show some layers....
- graphic1.setVisibility(true);
- graphic2.setVisibility(false);
- }else if(map.getZoom() == 2){
- //hide some lyers...
- graphic1.setVisibility(false);
- graphic2.setVisibility(true);
- }else{
- graphic1.setVisibility(true);
- graphic2.setVisibility(false);
- }
- }
- }
- //测距、面积
- function handleMeasurements(event) {
- var geometry = event.geometry;
- var units = event.units;
- var order = event.order;
- var measure = event.measure;
- var element = document.getElementById('output');
- var out = "";
- if(order == 1) {
- out += "measure: " + measure.toFixed(3) + " " + units;
- } else {
- out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2" + "sup>";
- }
- element.innerHTML = out;
- }
- function toggleControl(_value) {
- for(key in measureControls) {
- var control = measureControls[key];
- if(_value == key ) {
- control.activate();
- } else {
- control.deactivate();
- }
- }
- }
- function onMapClick(e){
- //alert('click');
- // 显示地图屏幕坐标
- var str = "[Screen]:" + e.xy.x + "," + e.xy.y;
- document.getElementById("screen_xy").innerHTML = str;
- // 屏幕坐标向地图坐标的转换
- var lonlat = map.getLonLatFromViewPortPx(e.xy);
- str = "[Map]:" + lonlat.lon + "," + lonlat.lat;
- document.getElementById("location").innerHTML = str;
- //生成点图层
- }
- function createPoint(){
- /******************************生成点图层Start***********************************/
- // Create 50 random features, and give them a "type" attribute that
- // will be used for the label text.
- var features = new Array(50);
- for (var i=0; i<features.length; i++) {
- features[i] = new OpenLayers.Feature.Vector(
- new OpenLayers.Geometry.Point(
- (360 * Math.random()) - 180, (180 * Math.random()) - 90
- ), {
- type: 5 + parseInt(5 * Math.random())
- }
- );
- }
- /**
- * Create a style instance that is a collection of rules with symbolizers.
- * Use a default symbolizer to extend symoblizers for all rules.
- */
- var style = new OpenLayers.Style({
- fillColor: "#ffcc66",
- strokeColor: "#ff9933",
- strokeWidth: 2,
- label: "${type}",
- fontColor: "#333333",
- fontFamily: "sans-serif",
- fontWeight: "bold"
- }, {
- rules: [
- new OpenLayers.Rule({
- minScaleDenominator: 200000000,
- symbolizer: {
- pointRadius: 7,
- fontSize: "9px"
- }
- }),
- new OpenLayers.Rule({
- maxScaleDenominator: 200000000,
- minScaleDenominator: 100000000,
- symbolizer: {
- pointRadius: 10,
- fontSize: "12px"
- }
- }),
- new OpenLayers.Rule({
- maxScaleDenominator: 100000000,
- symbolizer: {
- pointRadius: 13,
- fontSize: "15px"
- }
- })
- ]
- });
- // Create a vector layer and give it your style map.
- var points = new OpenLayers.Layer.Vector("Points", {
- styleMap: new OpenLayers.StyleMap(style)
- });
- points.addFeatures(features);
- //map.removeLayer(points);
- map.addLayer(points);
- /******************************生成点图层End***********************************/
- }
- //缩小
- function zoomOut(){
- map.zoomOut();
- }
- //放大
- function zoomIn(){
- map.zoomIn();
- }
- //获取地图数据
- function getSize(){
- alert(map.getSize()+",高度为="+map.getSize().h);
- }
- //显示标注
- var marker1;
- function addMarker(){
- var url = './img/small.jpg';
- var sz = new OpenLayers.Size(20, 20); //尺寸大小
- var calculateOffset = function(size) {
- return new OpenLayers.Pixel(-(size.w/2), -size.h);
- };
- var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
- marker1 = new OpenLayers.Marker(new OpenLayers.LonLat(48,31), icon);
- markers.addMarker(marker1);
- // marker = new OpenLayers.Marker(madrid, icon.clone());
- // markers.addMarker(marker);
- }
- function removeMarker() {
- markers.removeMarker(marker1);
- }
- /*******************多边形获取经纬度坐标系*************************/
- function test(){
- var getpolygonxy = new OpenLayers.Control();
- OpenLayers.Util.extend(getpolygonxy, {
- draw: function() {
- this.polygon= new OpenLayers.Handler.Polygon(getpolygonxy ,
- { "done": this.notice },{ "persist": true},
- { keyMask: OpenLayers.Handler.MOD_SHIFT });
- this.polygon.activate();
- },
- notice: function(bounds) {
- alert(bounds);//坐标信息
- }
- });
- map.addControl(getpolygonxy);
- }
- script>
- head>
- <body onload="init()">
- <div id="toolbar" style="display:">
- <input type="button" value="放大" onclick="zoomIn()"/>
- <input type="button" value="缩小" onclick="zoomOut()"/>
- <input type="button" value="获取地图大小" onclick="getSize()"/>
- <input type="button" value="平移" onclick="toggleControl('none')"/>
- <input type="button" value="线路测量" onclick="toggleControl('line')"/>
- <input type="button" value="测量面积" onclick="toggleControl('polygon')"/>
- <input type="button" value="显示标注" onclick="addMarker()"/>
- <input type="button" value="移除标注" onclick="removeMarker()"/>
- <input type="button" value="画多边形获取经纬度坐标" onclick="test()"/>
- div>
- <div id='map'>div>
- <div id="wrapper">
- <div id="screen_xy">div>
- <div id="location">经纬度坐标
- div>
- <div id="scale">
- div>
- <div id="output">
- div>
- div>
- <div id="xystr">div>
- <div id="nodelist">
- <em>Click on the map to get feature infoem>
- div>
- body>
- html>
界面如下：
