1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="css/ol.css" type="text/css">
  7.     <script src="js/jquery-1.11.3.js"></script>
  8.     <script src="js/ol.js"></script>
  9.     <style>
  10.         #map{
  11.             width:100%;
  12.             height:100%;
  13.         }
  14.         .label,.title{
  15.             background: #000;
  16.             color:#fff;
  17.             padding:3px;
  18.         }
  19.         .popup-content{
  20.         background: #fff;
  21.         padding:3px;
  22.         }
  23.         .ol-popup-closer {
  24.             position: absolute;
  25.             top: 2px;
  26.             right: 8px;
  27.         }
  28.         .ol-popup-closer:after {
  29.             content: "x";
  30.             color: #fff;
  31.         }
  32.     </style>
  33.  
  34. </head>
  35. <body>
  36. <div id="map"></div>
  37. <script>
  38.     $(document).ready(function(){
  39.         var map = new ol.Map({
  40.             controls: ol.control.defaults().extend([
  41.                 new ol.control.ScaleLine({})
  42.             ]),
  43.             target: 'map',
  44.             layers: [
  45.                 new ol.layer.Tile({
  46.                     source: new ol.source.OSM()
  47.                 })
  48.             ],
  49.             view: new ol.View({
  50.                 center: ol.proj.transform([106.20, 37.30], 'EPSG:4326', 'EPSG:3857'),
  51.                 maxZoom: 19,
  52.                 zoom: 5
  53.             }),
  54.             logo: false
  55.         });//地图初始化
  56.         initMenuAndAllCar()
  57.         var carPositionLayer = new ol.layer.Vector({
  58.             style: function (feature, resolution) {
  59.                 var online = feature.get("online");
  60.                 var status;
  61.                 switch(online){
  62.                     case "0":
  63.                         status= '离线';
  64.                         break;
  65.                     case "1":
  66.                         status= '在线';
  67.                         break;
  68.                     case "无法获取状态":
  69.                         status= online;
  70.                         break;
  71.                 }
  72.                 var opacity = (online !== "1") ? 0.4 : 1;
  73.                 var icon_url = "image/" + feature.get("image");
  74.                 var style = new ol.style.Style({
  75.                     image: new ol.style.Icon({
  76.                         opacity: opacity,
  77.                         scale: 1.2,
  78.                         src: icon_url
  79.                     })
  80.                 });
  81.                 feature.setStyle(style);
  82.                 var label_element = document.createElement('div');
  83.                 label_element.className = 'label';
  84.                 label_element.innerHTML = status;
  85.                 var label = new ol.Overlay({
  86.                     element: label_element,
  87.                     offset: [20, 6],
  88.                     stopEvent: false
  89.                 });
  90.                 var coordinate = feature.getGeometry().getCoordinates();
  91.                 label.setPosition(coordinate);
  92.                 map.addOverlay(label);
  93.             }
  94.         });// 车辆位置图层
  95.         map.addLayer(carPositionLayer);
  96.         var map_click = map.on('click', function (evt) {
  97.             var pixel = map.getEventPixel(evt.originalEvent);
  98.             var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
  99.                 return feature;
  100.             });//判断当前单击处是否有要素，捕获到要素时弹出popup
  101.             var coordinate = evt.coordinate;
  102.             if (feature !== undefined) {
  103.                 removeAllOverlay(map);
  104.                 var popup_element = document.createElement('div');
  105.                 popup_element.className = 'ol-popup';
  106.                 var closer = document.createElement('a');
  107.                 closer.href = '#';
  108.                 closer.className = 'ol-popup-closer';
  109.                 var title = document.createElement('div');
  110.                 title.className = 'title';
  111.                 var content = document.createElement('div');
  112.                 content.className = 'popup-content';
  113.                 $(popup_element).append(closer);
  114.                 $(popup_element).append(title);
  115.                 $(popup_element).append(content);
  116.                 var info_popup = new ol.Overlay(({
  117.                     element: popup_element,
  118.                     autoPan: true,
  119.                     autoPanAnimation: {
  120.                         duration: 250   //当Popup超出地图边界时，地图移动的速度
  121.                     }
  122.                 }));
  123.                 map.addOverlay(info_popup);
  124.                 $(closer).on('click', function (event) {
  125.                     event.preventDefault();
  126.                     info_popup.setPosition(undefined);
  127.                 });// 点击关闭的按钮
  128.                 var name = feature.get("name");
  129.                 var user_contact = feature.get("user_contact");
  130.                 var time = feature.get("time");
  131.                 var speed = parseFloat(feature.get("speed")).toFixed(2);
  132.                 title.innerHTML ='<div><strong></strong>'+name+'</div></div>';
  133.                 content.innerHTML = '<div><div>联系方式:'+user_contact+'</div><div>时 刻:'+time+'</div><div>速 度'+speed+'</div></div>';
  134.                 info_popup.setPosition(coordinate);
  135.             }
  136.         });//为map添加点击事件监听，弹出popup
  137.         function initMenuAndAllCar(){
  138.                 $.ajax({
  139.                     url:"json/allAllPosition.json",
  140.                     success:function(results){
  141.                         var features = (new ol.format.GeoJSON()).readFeatures(results, {featureProjection: 'EPSG:3857'});
  142.                         var carSource = new ol.source.Vector({
  143.                             features: features
  144.                         });
  145.                         carPositionLayer.setSource(carSource);
  146.                         var extent = carSource.getExtent();
  147.                         map.getView().fit(extent, map.getSize(),{padding: [10,10,10,10]});
  148.                     }
  149.                 });
  150.         }//初始化所有车的位置
  151.         function removeAllOverlay(map){
  152.             map.getOverlays().getArray().slice(0).forEach(function(overlay) {
  153.                 map.removeOverlay(overlay);
  154.             });
  155.         }//清除所有车
  156.     });
  157. </script>
  158. </body>
  159. </html>

Openlayer 3 的点击弹出框的更多相关文章

  1. 点击datagrid弹出ldhdialog，点击弹出框的按钮，关闭且刷新datagrid

    datagrid里的js这么写 //点击添加按钮触发 function superadd(title,addurl,gname,width,height) { gridname=gname; crea ...

  2. Openlayer 3 最简单的弹出框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jq实现点击弹出框代码

    废话不多说,先贴代码吧 <script> function showBg() { //定义 showBg 函数 var bh = $("body").height(); ...

  4. form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法

    针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设 ...

  5. 经验总结：WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法

    经验总结:WebBrowser自动点击弹出提示框alert.弹出对话框confirm.屏蔽弹出框.屏蔽弹出脚本错误的解决办法 网上有好多解决方法,可是不一定好使,本人经过多次试验,针对WebBrows ...

  6. 【代码笔记】iOS-轮询弹出框

    一,效果图. 二,工程图. 三,代码. RootViewController.m #import "RootViewController.h" //加入弹出框的头文件 #impor ...

  7. 利用BootStrap Table插件实现自己的弹出框分页。

    参考链接1:    官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/        开始使用:http://bootstrap-table. ...

  8. ALV屏幕捕捉回车及下拉框事件&ALV弹出框回车及下拉框事件

    示例展示: 屏幕依据输入的物料编码或下拉框物料编码拍回车自动带出物料描述: 点击弹出框,输入物料编码拍回车带出物料描述,点击确认,更新ALV: 1.创建屏幕9000,用于处理ALV弹出框: 2.针对屏 ...

  9. echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件

    1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...

随机推荐

  1. IOS开发的内存管理

    关于IOS开发的内存管理的文章已经很多了,因此系统的知识点就不写了,这里我写点平时工作遇到的疑问以及解答做个总结吧,相信也会有人遇到相同的疑问呢,欢迎学习IOS的朋友请加ios技术交流群:190956 ...

  2. strut2读源码记录

    首先你得准备一个很简单的struts2的程序,可以发一次请求后能返回一个正确的响应,当然,struts2的源码也要有,我这里用的myeclipse调试的,本来是想用eclipse,因为本人习惯于用ec ...

  3. 2440开发板linux系统移植3G拨号上网收发短信（三）

    一.用text查看模式 下面的“发”是指我敲的命令,“收”是指回车后显示的信息包括其他接收的信息. ~ >: microcom -s 115200 /dev/ttyUSB1 发:at 收:OK ...

  4. UIColor RGB颜色对照表

     色 彩 RGB  值 对 照 表   color red green blue Hexadecimal triplet example Aliceblue 240 248 255 f0f8ff   ...

  5. 写一些脚本的心得总结系列第4篇-------从数据库同步到redis

    5.从数据库同步到redis的. redis把数据放内存里,读取都非常方便,也提供了远超memcache的丰富数据结构.下面我举2个例子,比如1)把数据从数据库写入到redis: <?php $ ...

  6. java BigInteger源码学习

    转载自http://www.hollischuang.com/archives/176 在java中,有很多基本数据类型我们可以直接使用,比如用于表示浮点型的float.double,用于表示字符型的 ...

  7. 浅析CDN存在的必要性

    CDN行业从出现至今,已经有近20年的历史.但是直到近些年互联网进入超高速发展阶段,CDN才得以得到更广泛的应用和发展.最开始,CDN的主要任务只是简单的内容分发,对于静态内容的加速没有问题.但是随着 ...

  8. Oracle 列操作(增加列,修改列,删除列)

    1.增加一列: Alter table 表名 add 列名 varchar2(10); 2.修改一列: Alter table 表名 modify 列名 varchar2(20); 3.删除一列: A ...

  9. 六、spark常见问题总结（转载）

    问题导读 1.当前集群的可用资源不能满足应用程序的需求,怎么解决? 2.内存里堆的东西太多了,有什么好办法吗?         1.WARN TaskSchedulerImpl: Initial jo ...

  10. C#调用winhttp组件 POST登录迅雷

    下面是封装好的winhttp类 using System; using System.Collections.Generic; using System.Linq; using System.Text ...