基于OL2实现百度地图ABCD marker的效果


Posted in Javascript onOctober 01, 2015

本文概述:

上文中提到了在Arcgis for JS中实现百度地图ABCD的marker效果,在本文,讲述如何在OpenLayers2中实现类似的效果。

效果图展示如下:

为直观期间,先将效果贴出来。

基于OL2实现百度地图ABCD marker的效果

基于OL2实现百度地图ABCD marker的效果

联动展示

思路:

1、列表与地图的互动

鼠标经过列表时,修改列表图标,并根据列表返回的值在地图上绘蓝色的marker;鼠标移出,修改列表图标为红色,清空地图marker图层。

关键代码:

title.on("mouseover",function(){ 
  var i = $(this).attr("i"); 
  $("#img"+i).attr("src","img/blue.png"); 
  var data = $(this).data("attr"); 
  var hpt = new OpenLayers.LonLat(data.x,data.y); 
  var hicon = new OpenLayers.Icon('img/blue.png',size,offset); 
  hMarker = new OpenLayers.Marker(hpt,hicon); 
  markerLyr.addMarker(hMarker); 
  showName(hpt,data.name,"item-label-name"); 
}); 
title.on("mouseout",function(){ 
  var i = $(this).attr("i"); 
  $("#img"+i).attr("src","img/red.png"); 
  markerLyr.removeMarker(hMarker); 
  hlabelLyr.clear(); 
}); 
title.on("click",function(){ 
  var data = $(this).data("attr"); 
  showInfowindow(data.name,data.desc); 
});

2、地图与列表的互动

鼠标经过地图红色的marker时,修改对应列表图标,并将红色 marker的图片换成蓝色的;鼠标移出,修改对应列表图标,并修改marker为红色。

关键代码:

marker.events.register("click", feature, function(e){ 
  var data = e.object.attr; 
  showInfowindow(data.name,data.desc); 
}); 
marker.events.register("mouseover", feature, function(e){ 
  map.layerContainerDiv.style.cursor = "pointer"; 
  var id= e.object.id; 
  $("#img"+id).attr("src","img/blue.png"); 
  $("#li"+id).css("background","#f2f2f2"); 
  var data = e.object.attr; 
  var hpt = new OpenLayers.LonLat(data.x, data.y); 
  showName(hpt,data.name,"item-label-name-map"); 
}); 
marker.events.register("mouseout", feature, function(e){ 
  map.layerContainerDiv.style.cursor = "url(" 
    + OpenLayers.Util.getRootPath() 
    + "img/pan.cur),default"; 
  var id= e.object.id; 
  $("#img"+id).attr("src","red.png"); 
  $("#li"+id).css("background","#ffffff"); 
  hlabelLyr.clear(); 
}); 
markerLyr.addMarker(marker); 
var label = new OpenLayers.Label(pt,i+1,"item-label"); 
labelLyr.add(label);

3、地图上的1,2,3,4...等数字是一个label图层,不参与联动;

4、数据以JSON的形式传递,在本实例中,根据地图的四至动态生成的,如下:

function getRandomXY(){ 
  var json = new Array(); 
  for(var i=0;i<8;i++){ 
    var w = bounds.getWidth(); 
    var h = bounds.getHeight(); 
    var x = Math.random() * w + bounds.left; 
    var y = Math.random() * h + bounds.bottom; 
    json.push({ 
      id:i, 
      name:"name"+i, 
      desc:"this is the name"+i, 
      x:x, 
      y:y 
    }) 
  } 
  return json; 
}

完整代码如下:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>openlayers map</title> 
  <link rel="stylesheet" type="text/css" href="http://localhost/olapi/theme/default/style.css"/> 
  <style> 
    html, body, #map{ 
      padding:0; 
      margin:0; 
      height:100%; 
      width:100%; 
      overflow: hidden; 
      font-size: 12.5px; 
      font-family:"宋体" 
    } 
    .item-list{ 
      position: absolute; 
      top:100px; 
      left: 20px; 
      z-index: 999; 
      border: 1px solid #ccc; 
      width: 200px; 
      background: #fff; 
    } 
    .list-close{ 
      background: url("img/panel_tools.png"); 
      width: 16px; 
      height: 16px; 
      float: right; 
      margin: 3px 3px; 
      background-position: -16px 0px; 
    } 
    .list-close:hover{ 
      cursor: pointer; 
    } 
    .list-title{ 
      background: #009dda; 
      color: #fff; 
      padding: 5px 8px; 
      font-weight: bold; 
    } 
    ul{ 
      list-style: none; 
      margin: -0px 0; 
    } 
    ul li{ 
      border-bottom: 1px dotted #eee; 
      margin-left: -40px; 
      margin-top: 5px; 
      position: relative; 
    } 
    ul li:hover{ 
      background: #f2f2f2; 
    } 
    .item{ 
      padding: 2px 5px; 
    } 
    .item:hover{ 
      cursor: pointer; 
    } 
    .item-num{ 
      position: absolute; 
      top: 4px; 
      left: 12px; 
      color:#fff; 
      font-size: 15px; 
      font-weight: bold; 
    } 
    .item-title{ 
      float: right; 
      font-weight: bold; 
      margin-right: 10px; 
    } 
    .item-content{ 
      padding: 3px 5px; 
    } 
    .item-detail{ 
      margin: 3px 5px; 
      float: right; 
    } 
    .item-detail:hover{ 
      text-decoration: underline; 
      color: #01A4F8; 
      cursor: pointer; 
    } 
    .item-label{ 
      color:#fff; 
      font-size: 15px; 
      font-weight: bold; 
      margin-top: 2px; 
      margin-left: 7px; 
    } 
    .item-label-name,.item-label-name-map{ 
      border:1px solid #a6c9e2; 
      background: #fff; 
      padding: 3px 5px; 
      font-size: 12px; 
      margin-top: 23px; 
      margin-left: 15px; 
      border-radius: 5px; 
    } 
    .item-label-name-map{ 
      margin-left: 25px; 
    } 
  </style> 
  <!--引入jquery 库 --> 
  <script type="text/javascript" src="http://localhost/olapi/OpenLayers.js"></script> 
  <script type="text/javascript" src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script> 
  <script src="http://localhost/jquery/jquery-1.8.3.js"></script> 
  <script src="extend/LabelLayer.js"></script> 
  <script> 
    var map; 
    var tiled; 
    $(window).load(function() { 
      var bounds = new OpenLayers.Bounds( 
          87.57582859314434, 19.969920291221204, 
          126.56713756740385, 45.693810203800794 
      ); 
      var options = { 
        controls: [], 
        maxExtent: bounds, 
        maxResolution: 0.1523098006807012, 
        projection: "EPSG:4326", 
        units: 'degrees' 
      }; 
      map = new OpenLayers.Map('map', options); 
      map.addControl(new OpenLayers.Control.Zoom()); 
      map.addControl(new OpenLayers.Control.Navigation()); 
      map.addControl( new OpenLayers.Control.MousePosition()); 
      var tiled = new OpenLayers.Layer.WMS( 
          "province", "http://localhost:8088/geoserver/lzugis/wms", 
          { 
            "LAYERS": 'province', 
            "STYLES": '', 
            format: 'image/png' 
          }, 
          { 
            buffer: 0, 
            displayOutsideMaxExtent: true, 
            isBaseLayer: true, 
            yx : {'EPSG:4326' : true} 
          } 
      ); 
      var markerLyr = new OpenLayers.Layer.Markers("marker"); 
      var labelLyr = new OpenLayers.Layer.Labels("label"); 
      var hlabelLyr = new OpenLayers.Layer.Labels("hlabelLyr"); 
      map.addLayers([tiled,markerLyr,labelLyr,hlabelLyr]); 
      map.zoomToExtent(bounds); 
 
      var data = getRandomXY(); 
      console.log(data); 
      var ul = $("#items"); 
      var size = new OpenLayers.Size(24,26); 
      var offset = new OpenLayers.Pixel(0, 0); 
      var hMarker=null; 
      for(var i=0;i<data.length;i++) { 
        /** 
         * 地图内容 
         */ 
        var pt = new OpenLayers.LonLat(data[i].x, data[i].y); 
        var icon = new OpenLayers.Icon('img/red.png',size,offset); 
        var feature = new OpenLayers.Feature(markerLyr, 
            pt, 
            {'icon': icon,'attr':data[i]}); 
        var marker = feature.createMarker(); 
        marker.attr = data[i]; 
        marker.id = i; 
        marker.events.register("click", feature, function(e){ 
          var data = e.object.attr; 
          showInfowindow(data.name,data.desc); 
        }); 
        marker.events.register("mouseover", feature, function(e){ 
          map.layerContainerDiv.style.cursor = "pointer"; 
          var id= e.object.id; 
          $("#img"+id).attr("src","img/blue.png"); 
          $("#li"+id).css("background","#f2f2f2"); 
          var data = e.object.attr; 
          var hpt = new OpenLayers.LonLat(data.x, data.y); 
          showName(hpt,data.name,"item-label-name-map"); 
        }); 
        marker.events.register("mouseout", feature, function(e){ 
          map.layerContainerDiv.style.cursor = "url(" 
            + OpenLayers.Util.getRootPath() 
            + "img/pan.cur),default"; 
          var id= e.object.id; 
          $("#img"+id).attr("src","red.png"); 
          $("#li"+id).css("background","#ffffff"); 
          hlabelLyr.clear(); 
        }); 
        markerLyr.addMarker(marker); 
        var label = new OpenLayers.Label(pt,i+1,"item-label"); 
        labelLyr.add(label); 
        /** 
         * 列表内容 
         */ 
        var li = $("<li />").attr("id","li"+i).appendTo(ul); 
        var title = $("<div />").addClass("item").attr("i",i).data("attr",data[i]); 
        var img = $("<img />").attr("id","img"+i).attr("src", "img/red.png")/*.attr("width", "16").attr("height", "18")*/; 
        var num = $("<a />").addClass("item-num").html(i+1); 
        var name = $("<div />").addClass("item-title").html(data[i].name); 
        title.append(img).append(num).append(name); 
        var content = $("<a />").addClass("item-content").html(data[i].desc); 
        var detail = $("<a />").addClass("item-detail").html("详细>>"); 
        li.append(title).append(content).append(detail); 
        title.on("mouseover",function(){ 
          var i = $(this).attr("i"); 
          $("#img"+i).attr("src","img/blue.png"); 
          var data = $(this).data("attr"); 
          var hpt = new OpenLayers.LonLat(data.x,data.y); 
          var hicon = new OpenLayers.Icon('img/blue.png',size,offset); 
          hMarker = new OpenLayers.Marker(hpt,hicon); 
          markerLyr.addMarker(hMarker); 
          showName(hpt,data.name,"item-label-name"); 
        }); 
        title.on("mouseout",function(){ 
          var i = $(this).attr("i"); 
          $("#img"+i).attr("src","img/red.png"); 
          markerLyr.removeMarker(hMarker); 
          hlabelLyr.clear(); 
        }); 
        title.on("click",function(){ 
          var data = $(this).data("attr"); 
          showInfowindow(data.name,data.desc); 
        }); 
      } 
 
      $(".item-list").draggable({ 
        handle:'.list-title' 
      }); 
      $("#close").on("click",function(){ 
        $(".item-list").hide(); 
      }); 
 
      function showName(pt,name,classname){ 
        var label = new OpenLayers.Label(pt,name,classname); 
        hlabelLyr.add(label); 
      } 
      function showInfowindow(title,content){ 
        $("<div />").window({ 
          width:200, 
          height:80, 
          modal:true, 
          maximizable:false, 
          minimizable:false, 
          collapsible:false, 
          closable:true, 
          title:title, 
          content:content 
        }); 
      } 
 
      function getRandomXY(){ 
        var json = new Array(); 
        for(var i=0;i<8;i++){ 
          var w = bounds.getWidth(); 
          var h = bounds.getHeight(); 
          var x = Math.random() * w + bounds.left; 
          var y = Math.random() * h + bounds.bottom; 
          json.push({ 
            id:i, 
            name:"name"+i, 
            desc:"this is the name"+i, 
            x:x, 
            y:y 
          }) 
        } 
        return json; 
      } 
    }); 
  </script> 
</head> 
<body> 
<div id="map"></div> 
  <div class="item-list"> 
    <div id="close" class="list-close"></div> 
    <div class="list-title">结果列表</div> 
    <ul id="items"> 
    </ul> 
  </div> 
</body> 
</html>

在本实例中,扩展了OpenLayers的图层Labels和对象Label。

以上就是本文全部叙述,希望大家喜欢。

Javascript 相关文章推荐
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
Node.js Buffer用法解读
May 18 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
jQuery实现计算器功能
Oct 19 jQuery
JS处理json日期格式化问题
Oct 01 #Javascript
JS日期格式化之javascript Date format
Oct 01 #Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 #Javascript
RequireJS入门一之实现第一个例子
Sep 30 #Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 #Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 #Javascript
浅谈Javascript中substr和substring的区别
Sep 30 #Javascript
You might like
用header 发送cookie的php代码
2007/03/16 PHP
php简单判断文本编码的方法
2015/07/30 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
jQuery使用手册之一
2007/03/24 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
django celery redis使用具体实践
2019/04/08 Python
Django框架验证码用法实例分析
2019/05/10 Python
python网络应用开发知识点浅析
2019/05/28 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
Python如何定义接口和抽象类
2020/07/28 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
Python的两道面试题
2013/06/29 面试题
客户代表实习人员自我鉴定
2013/09/27 职场文书
企业法人代表证明书
2015/06/18 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
JavaScript函数柯里化
2021/11/07 Javascript
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python