openLayer3地图的使用心得

时间:2023-02-01 14:04:35

准备运行环境:

1)Portable Basemap Server(PBS)用于创建地图服务

官网网址:http://geopbs.codeplex.com/   

如何创建底图服务?操作步骤如下:

openLayer3地图的使用心得

如果启动的时候端口冲突的话,打开PortableBasemapServer.exe.config配置端口号。

openLayer3地图的使用心得

打开PortableBasemapServer.exe【以管理员身份运行】

openLayer3地图的使用心得

 

下载底图:(mbtiles格式的)

openLayer3地图的使用心得

选择区域进行下载即可:

openLayer3地图的使用心得

配置启动地图服务:点击Browse选中lanzhou.mbtiles地图文件   : Map.zip 

openLayer3地图的使用心得

至此,本地地图服务创建成功!

 

获取底图服务的方法:

openLayer3地图的使用心得 复制:http://192.168.168.100:7080/PBS/rest/services/lanzhou/MapServer/WMTS到浏览器中,如果报找不到路径,那么使用http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS,可以出现如下图:

openLayer3地图的使用心得

http://192.168.168.100:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png

openLayer3地图的使用心得

default028mm /  nativeTileMatrixSet / GoogleMapsCompatible任选一个。

在页面引用地图服务:

http://192.168.168.100:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png

        为什么是{z}/{y}/{x}.png,由于学习地图是半路出家,研究了好久也没有结果,暂先搁置,有大神知道的可以指导一下,哈哈!

2)openlayer框架包

官网网址:http://openlayers.org/

选择"Examples"菜单,然后随便选择一个例子

openLayer3地图的使用心得

openLayer3地图的使用心得

复制路径:https://openlayers.org/en/v3.20.1/css/ol.css

https://openlayers.org/en/v3.20.1/build/ol.jsopenLayer3地图的使用心得

openLayer3地图的使用心得

既可以下载相应的openlayer支持包。

1、初始化地图

 
  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>01初始化地图</title>
  6. <meta http-equiv="X-UA-Compatible" content="chrome=1">
  7. <link href="css/ol.css" rel="stylesheet" type="text/css" />
  8. <script type="text/javascript" src="js/common/ol.js"></script>
  9. <script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
  10. </head>
  11.  
  12. <script>
  13. var map_source = "wmts"; //地图的服务类型
  14. var map_projection = "EPSG:3857"; //地图坐标系(3857:墨卡托, 4326:经纬度)
  15. //map_url此处使用的是【Portable Basemap Server】作为地图服务
  16. var map_url = "http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
  17. //var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
  18. var map_zoom = 15; //初始化地图缩放级别
  19. var map_minZoom = 14; //地图最小缩放级别
  20. var map_maxZoom = 20; //地图最大缩放级别
  21. var map_x = 11557761.4071486; //地图x坐标(此处以兰州地图作为中心点)
  22. var map_y = 4307993.90607275; //地图y坐标(此处以兰州地图作为中心点)
  23.  
  24. $(document).ready(function() {
  25. var baseLayer = new ol.layer.Tile({
  26. opacity: 1.0,
  27. source: new ol.source.XYZ({
  28. url: map_url
  29. })
  30. });
  31. if(baseLayer) {
  32. // 初始地图对象
  33. var map = new ol.Map({
  34. layers: [baseLayer],
  35. loadTilesWhileAnimating: true,
  36. target: document.getElementById("map"),
  37. controls: ol.control.defaults({
  38. attributionOptions: ({
  39. collapsible: false
  40. })
  41. }),
  42. view: new ol.View({
  43. center: [map_x, map_y],
  44. zoom: map_zoom,
  45. minZoom: map_minZoom,
  46. maxZoom: map_maxZoom
  47. }),
  48. interactions: ol.interaction.defaults({
  49. doubleClickZoom: false
  50. })
  51. });
  52. }
  53. });
  54. </script>
  55.  
  56. <body>
  57. <div id="map"></div>
  58. </body>
  59.  
  60. </html> 

2、标绘(画笔)

02标绘.html

 

 
  
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>02标绘</title>
  7. <meta http-equiv="X-UA-Compatible" content="chrome=1">
  8. <link href="css/common/ol.css" rel="stylesheet" type="text/css" />
  9. <link href="css/draw/draw.css" rel="stylesheet" type="text/css" />
  10. <script type="text/javascript" src="js/common/ol.js"></script>
  11. <script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
  12. <script type="text/javascript" src="js/draw/util.js" ></script>
  13. <script type="text/javascript" src="js/draw/baseMap.js"></script>
  14. <script type="text/javascript" src="js/draw/drawMap.js"></script>
  15. <script type="text/javascript" src="js/draw/plot.js"></script>
  16. </head>
  17.  
  18. <body>
  19. <div id="map"></div>
  20.  
  21. <!-- 标绘菜单开始 -->
  22. <button id="plotBtn" title="标绘"></button>
  23. <!-- 标绘菜单结束 -->
  24.  
  25. <!-- 清空按钮 -->
  26. <div id="clearDIV">
  27. <button id="clear" class="cirButton58 pngButton print_btn" onclick="clearLayer();">
  28. <span class="text">清空</span>
  29. </button>
  30. </div>
  31.  
  32. <!-- 标绘div -->
  33. <div id='DrawBoxDiv' class='drawBox' style='display:none;'></div>
  34. <div id='plotMarker'></div>
  35. </body>
  36.  
  37. </html>

 

util.js

 

 
  
  1. /**
  2.  * JS公共工具类
  3.  */
  4. var Util = {
  5. randomString:function(len) {//随机生成字符串
  6. len = len || 32;
  7. var $chars = 'ABC1DEFGH2IJK3LMNOQP4RSTU5VWXYZab6cdef8ghij7kmlnopq9rest0uvwxyz';
  8. var maxPos = $chars.length;
  9. var pwd = '';
  10. for (= 0; i < len; i++) {
  11. pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  12. }
  13. return pwd;
  14. }
  15. }
  16.  
  17. function Map() {
  18. this.elements = new Array();
  19. //获取Map元素个数
  20. this.size = function() {
  21. return this.elements.length;
  22. },
  23.  
  24. //判断Map是否为空
  25. this.isEmpty = function() {
  26. return (this.elements.length < 1);
  27. },
  28.  
  29. //删除Map所有元素
  30. this.clear = function() {
  31. this.elements = new Array();
  32. },
  33.  
  34. //向Map中增加元素(key, value) 
  35. this.put = function(_key, _value) {
  36. if (this.containsKey(_key) == true) {
  37. if (this.containsValue(_value)) {
  38. if (this.remove(_key) == true) {
  39. this.elements.push({
  40. key : _key,
  41. value : _value
  42. });
  43. }
  44. } else {
  45. this.elements.push({
  46. key : _key,
  47. value : _value
  48. });
  49. }
  50. } else {
  51. this.elements.push({
  52. key : _key,
  53. value : _value
  54. });
  55. }
  56. },
  57.  
  58. //删除指定key的元素,成功返回true,失败返回false
  59. this.remove = function(_key) {
  60. var bln = false;
  61. try {
  62. for (= 0; i < this.elements.length; i++) {
  63. if (this.elements[i].key == _key) {
  64. this.elements.splice(i, 1);
  65. return true;
  66. }
  67. }
  68. } catch (e) {
  69. bln = false;
  70. }
  71. return bln;
  72. },
  73.  
  74. //获取指定key的元素值value,失败返回null
  75. this.get = function(_key) {
  76. try {
  77. for (= 0; i < this.elements.length; i++) {
  78. if (this.elements[i].key == _key) {
  79. return this.elements[i].value;
  80. }
  81. }
  82. } catch (e) {
  83. return null;
  84. }
  85. },
  86.  
  87. //获取指定索引的元素(使用element.key,element.value获取key和value),失败返回null
  88. this.element = function(_index) {
  89. if (_index < 0 || _index >= this.elements.length) {
  90. return null;
  91. }
  92. return this.elements[_index];
  93. },
  94.  
  95. //判断Map中是否含有指定key的元素
  96. this.containsKey = function(_key) {
  97. var bln = false;
  98. try {
  99. for (= 0; i < this.elements.length; i++) {
  100. if (this.elements[i].key == _key) {
  101. bln = true;
  102. }
  103. }
  104. } catch (e) {
  105. bln = false;
  106. }
  107. return bln;
  108. },
  109.  
  110. //判断Map中是否含有指定value的元素
  111. this.containsValue = function(_value) {
  112. var bln = false;
  113. try {
  114. for (= 0; i < this.elements.length; i++) {
  115. if (this.elements[i].value == _value) {
  116. bln = true;
  117. }
  118. }
  119. } catch (e) {
  120. bln = false;
  121. }
  122. return bln;
  123. },
  124.  
  125. //获取Map中所有key的数组(array)
  126. this.keys = function() {
  127. var arr = new Array();
  128. for (= 0; i < this.elements.length; i++) {
  129. arr.push(this.elements[i].key);
  130. }
  131. return arr;
  132. },
  133.  
  134. //获取Map中所有value的数组(array)
  135. this.values = function() {
  136. var arr = new Array();
  137. for (= 0; i < this.elements.length; i++) {
  138. arr.push(this.elements[i].value);
  139. }
  140. return arr;
  141. };
  142. }

 

baseMap.js

 
  
  1. /**
  2.  * 地图的底图服务模块
  3.  */
  4. var map_source = "wmts"; //地图的服务类型
  5. var map_projection = "EPSG:3857"; //地图坐标系(3857:墨卡托, 4326:经纬度)
  6. //map_url此处使用的是【Portable Basemap Server】作为地图服务
  7. var map_url = "http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
  8. //var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
  9. var map_zoom = 15; //初始化地图缩放级别
  10. var map_minZoom = 14; //地图最小缩放级别
  11. var map_maxZoom = 20; //地图最大缩放级别
  12. var map_x = 11557761.4071486; //地图x坐标(此处以兰州地图作为中心点)
  13. var map_y = 4307993.90607275; //地图y坐标(此处以兰州地图作为中心点)
  14.  
  15. $(document).ready(function() {
  16. var baseLayer = new ol.layer.Tile({
  17. opacity: 1.0,
  18. source: new ol.source.XYZ({
  19. url: map_url
  20. })
  21. });
  22. if(baseLayer) {
  23. var config = {
  24. center: [map_x, map_y],
  25. zoom: map_zoom,
  26. maxZoom: map_maxZoom,
  27. minZoom: map_minZoom
  28. };
  29. //实例化标绘地图
  30. DRAWMAP.init(baseLayer, config);
  31. }
  32. //标绘
  33. $("#plotBtn").click(function(){
  34. PLOT.showHideDrawBox();
  35. });
  36. });
  37.  
  38. /**
  39.  * 清除全部图层
  40.  */
  41. function clearLayer(){
  42. if(confirm("要清除所有图层吗?")){
  43. //清空标绘图层
  44. for(var i = 0;< PLOT.plotImgMap.size();i++){
  45. var id = PLOT.plotImgMap.elements[i].key;
  46. var layer = PLOT.plotImgMap.get(id);
  47. var source = layer.getSource();
  48. source.clear();
  49. }
  50. PLOT.plotImgMap.clear();//清空标绘数组
  51. $("#plotMarker").hide();//隐藏按钮
  52. }
  53. } 

drawMap.js

 

 
  
  1. /**
  2.  * 标绘模块的地图(实例化)
  3.  */
  4. var DRAWMAP = {
  5. map : null, // 地图对象
  6. draw : null,
  7. vectorSource : new ol.source.Vector({
  8. wrapX : false
  9. }),
  10. vectorLayer : null,
  11. init : function(_layer, _config) {
  12. DRAWMAP.vectorLayer = new ol.layer.Vector({
  13. source : DRAWMAP.vectorSource,
  14. zIndex : 1000
  15. });
  16. // 初始地图对象
  17. DRAWMAP.map = new ol.Map({
  18. layers : [ _layer ],
  19. loadTilesWhileAnimating : true,
  20. target : document.getElementById("map"),
  21. controls : ol.control.defaults({
  22. attributionOptions : ({
  23. collapsible : false
  24. })
  25. }),
  26. view : new ol.View({
  27. center : _config.center,
  28. zoom : _config.zoom,
  29. maxZoom : _config.maxZoom,
  30. minZoom : _config.minZoom,
  31. }),
  32. interactions : ol.interaction.defaults({
  33. doubleClickZoom : false
  34. })
  35. });
  36. DRAWMAP.map.addLayer(DRAWMAP.vectorLayer);
  37. }
  38. };

 

plot.js

 

 
  
  1. /**
  2.  * 标绘功能的事件处理模块
  3.  */
  4. var PLOT = {
  5. plotImgMap:new Map(),//存放标绘在地图上的图片
  6. draw:null,
  7. source: new ol.source.Vector(),
  8. plotPic:null,
  9. gBHPicGroup:"",//标绘图标组名
  10. gCurDrawPicture:"",//图标路径
  11. showHideDrawBox:function(){//显示隐藏标绘界面
  12. $("#DrawBoxDiv").html("");
  13. PLOT.createDrawBox("","");
  14.     if($("#DrawBoxDiv").css("display")!="none"){
  15.      $("#DrawBoxDiv").css("display","none");
  16. $("#SaveDrawDiv").css("display","none");
  17. }else{
  18. $("#DrawBoxDiv").css("display","block");
  19. $("#SaveDrawDiv").css("display","block");
  20. }
  21. },
  22. createDrawBoxHTML:function(){
  23. var ix='<table class="title" >';
  24. ix+='<tr><td valign="center">';
  25. ix+='<strong> 基础绘图工具</strong>';    
  26. ix+='</td><td align="right">';
  27. ix+='<img class="close" src="images/button/close.gif" title="关闭" onclick="$(\'#DrawBoxDiv\').css(\'display\',\'none\');"></img> </td></tr>';
  28. ix+='</table>';
  29. ix+='<table class="content" border="0" cellSpacing="0" cellPadding="0">';
  30. ix+='<tr><td><div id="drawBrushDiv" class="drawBrush">';
  31. ix+='<table><tr><td style="height:30px;"></td></tr>';
  32. ix+='<tr><td><img id="bhObj_0" src="images/tool/RedMark.png" title="标点" class="drawPicStyle3"/></td></tr>';
  33. ix+='<tr><td><img id="bhObj_1" src="images/tool/FGreen.png" title="小旗帜" class="drawPicStyle3"/></td></tr>';
  34. ix+='<tr><td><img id="bhObj_2" src="images/tool/circle.gif" title="画圆形" class="drawPicStyle3"/></td></tr>';
  35. ix+='<tr><td><img id="bhObj_3" src="images/tool/polyline.gif" title="画折线" class="drawPicStyle3"/></td></tr>';
  36. ix+='</table></div></td>';
  37. ix+='<td><div class="selBH"> 选择图标组: '+
  38. '<select id="selBHGroup" class="DefineTopicTextCtl" onchange="PLOT.showSelGroupPic()"></select></div>' +
  39. '<div id="drawPicDiv" class="drawPic"></div>' +
  40. '</td>';
  41.     ix+='<tr></table>';
  42. return ix;
  43. },
  44. createDrawBox:function(){//创建标绘内容
  45.   var html = PLOT.createDrawBoxHTML();
  46. $("#DrawBoxDiv").append(html);
  47.     var OptionResults = "<option value='01常用'>01常用</option>";
  48.     var FileNames = "<span title='A100箭头1' class='drawPicStyle' id='bht_0'><img picWidth='39' picHeight='29' src='images/plot/A100箭头1.gif' class='drawPicStyle2'></img><br>箭头1</span>";
  49.     FileNames += "<span title='A106矩形' class='drawPicStyle' id='bht_1'><img picWidth='156' picHeight='156'  src='images/plot/A106矩形.png' class='drawPicStyle2'></img><br>矩形</span>";
  50.     FileNames += "<span title='A108圆形' class='drawPicStyle' id='bht_2'><img picWidth='156' picHeight='156'  src='images/plot/A108圆形.png' class='drawPicStyle2'></img><br>圆形</span>";
  51. $("#selBHGroup").append(OptionResults); 
  52. $("#drawPicDiv").append(FileNames); 
  53. //图标组的鼠标点击事件
  54. $(".drawPicStyle").mousedown(function(event){
  55. $(".drawPicStyle").removeClass("drawPicSelected");
  56. $(this).addClass("drawPicSelected");
  57. gBHisDeleteObj=false;
  58. var $spanId = $(this).attr("id");
  59. var picObj = $("#"+$spanId+" img")[0];
  60. PLOT.addPlot(PLOT.getImgInfo(picObj));
  61. });
  62. //画笔图标的悬浮事件样式控制
  63. $(".drawPicStyle3").hover(function(){
  64. $(this).addClass("drawPicOver");
  65. },function(){
  66. $(this).removeClass("drawPicOver");
  67. });
  68. //画笔图标的鼠标点击事件
  69. $(".drawPicStyle3").mousedown(function(event){
  70. $(".drawPicStyle3").removeClass("drawPicSelected");
  71. $(this).addClass("drawPicSelected");
  72. switch($(this).attr("id")){
  73. case "bhObj_0"://标一个点图标
  74. PLOT.addPlot(PLOT.getImgInfo(this));
  75. break;
  76. case "bhObj_1"://标一个小旗帜
  77. PLOT.addPlot(PLOT.getImgInfo(this));
  78. break;
  79. case "bhObj_2"://画圆形
  80. PLOT.drawPlot(2);
  81. break;
  82. case "bhObj_3"://画折线
  83. PLOT.drawPlot(3);
  84. break;
  85. default:
  86. break;
  87. }
  88. });
  89. },
  90. addPlot:function(imgurl){//标绘操作
  91.      PLOT.plotPic = imgurl;
  92.      DRAWMAP.map.on("singleclick",function(event){ 
  93.      if(PLOT.plotPic){
  94.      var coordinate = event.coordinate;//获取当前鼠标移动后的坐标信息
  95.      PLOT.addIcon(PLOT.plotPic,coordinate);//在地图中加入图片
  96.      PLOT.plotPic = null;
  97.      }
  98. });
  99. },
  100. getImgInfo:function(picObj){//获取图片信息(宽高、路径)
  101. var src = $(picObj).attr("src");
  102. var width="80",height="80";
  103.     var imgObj = new Image();
  104.     imgObj.src = src;
  105.     if(imgObj.width != 0 && imgObj.height != 0){
  106.     width = imgObj.width;
  107.     height = imgObj.height;
  108.     }
  109. return [width,height,src];
  110. },
  111. addIcon:function(imgurl,lonLat){//在地图中加入图片
  112.      var lng = parseFloat(lonLat[0]);
  113.      var lat = parseFloat(lonLat[1]);
  114.      var point = new ol.geom.Point([lng, lat]);//转换点坐标对象
  115.      var featureId  = Util.randomString(10);
  116. var feature= new ol.Feature({
  117. geometry: point,
  118. labelPoint: point,
  119. name: "plot"
  120. });
  121. feature.setId(featureId);
  122. var featureSource =  new ol.source.Vector();
  123. featureSource.addFeature(feature);
  124.      var style = new ol.style.Style({
  125. fill: new ol.style.Fill({
  126. color: 'rgba(255, 255, 255, 0.2)'
  127.     }),
  128.     stroke: new ol.style.Stroke({
  129.      color: '#ffcc33',
  130.      width: 2
  131.     }),
  132.     image:new ol.style.Icon({
  133.         offset: [0, 0],
  134.         opacity: 1.0,
  135.         rotateWithView: true,
  136.         rotation: 0.0,
  137.         scale: 1.0,
  138.         size: [imgurl[0], imgurl[1]],
  139.         src: imgurl[2]
  140.       })
  141. });
  142.      var getLayer= new ol.layer.Vector({
  143.      source: featureSource,
  144.      style: style
  145.      });
  146.      if(DRAWMAP.map){
  147. DRAWMAP.map.addLayer(getLayer);
  148. PLOT.plotImgMap.put(featureId,getLayer);
  149. }
  150. },
  151. drawPlot:function(flag){//画笔操作,比如画圆、画矩形
  152. if(PLOT.draw){
  153. DRAWMAP.map.removeInteraction(PLOT.draw);
  154. PLOT.draw = null;
  155. }
  156.     var value = "";
  157.         switch(parseInt(flag)){
  158.         case 2://画圆形
  159.         value = "Circle";
  160.         break;
  161.         case 3://画折线
  162.         value = "LineString";
  163.         break;
  164.         }
  165.         var sourceId  = Util.randomString(10);
  166.   PLOT.source.set("id",sourceId);
  167.   PLOT.source.set("name","plot");
  168.         PLOT.draw = new ol.interaction.Draw({ 
  169.            source: PLOT.source,
  170.            type:(value),
  171.            geometryFunction: null,
  172.            maxPoints: null
  173.          });
  174.          if(DRAWMAP.map){
  175.           DRAWMAP.map.addInteraction(PLOT.draw);
  176.           PLOT.plotImgMap.put(sourceId,PLOT.plotLayer());
  177.          }
  178.          //画笔绘图结束
  179.          PLOT.draw.on("drawend", function(evt) {
  180.        DRAWMAP.map.removeInteraction(PLOT.draw);
  181.        DRAWMAP.map.addLayer(PLOT.plotLayer());//添加动态画图的图层
  182.     }, this);
  183. },
  184.  plotLayer: function(){//返回layer图层
  185. return new ol.layer.Vector({
  186. source: PLOT.source,
  187. style: new ol.style.Style({
  188. fill: new ol.style.Fill({
  189. color: 'rgba(255, 255, 255, 0.2)'
  190.     }),
  191.     stroke: new ol.style.Stroke({
  192.      color: '#ffcc33',
  193.      width: 2
  194.     }),
  195.     image: new ol.style.Circle({
  196.      radius: 7,
  197.      fill: new ol.style.Fill({
  198.      color: '#ffcc33'
  199.      })
  200.     })
  201. })
  202. });
  203. }
  204. }

 

3、增加图层和弹出框

03增加图层和弹出框.html

 
  
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>03增加图层和弹出框</title>
  7. <meta http-equiv="X-UA-Compatible" content="chrome=1">
  8. <link href="css/common/ol.css" rel="stylesheet" type="text/css" />
  9. <script type="text/javascript" src="js/common/ol.js"></script>
  10. <script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
  11. <script type="text/javascript" src="js/03增加图层和弹出框/MYMap.js"></script>
  12. </head>
  13.  
  14. <style>
  15. .ol-popup {
  16. position: absolute;
  17. background-color: white;
  18. padding-top: 5px;
  19. padding-left: 10px;
  20. padding-right: 10px;
  21. padding-bottom: 10px;
  22. border-radius: 2px;
  23. border: 1px solid #cccccc;
  24. bottom: 12px;
  25. left: -50px;
  26. }
  27. .ol-popup:after,
  28. .ol-popup:before {
  29. top: 100%;
  30. border: solid transparent;
  31. content: " ";
  32. position: absolute;
  33. }
  34. /*border-top-color:用于制作三角形*/
  35. .ol-popup:after {
  36. border-top-color: white;
  37. border-width: 10px;
  38. left: 48px;
  39. margin-left: -10px;
  40. }
  41. .ol-popup:before {
  42. border-top-color: #cccccc;
  43. border-width: 11px;
  44. left: 48px;
  45. margin-left: -11px;
  46. }
  47. .ol-popup-title {
  48. border-bottom: 1px solid #cccccc;
  49. padding-bottom: 3px;
  50. }
  51. .ol-popup-content {
  52. margin-top: 8px;
  53. width:260px;
  54. }
  55. .ol-popup-closer {
  56. text-decoration: none;
  57. position: absolute;
  58. top: 5px;
  59. right: 10px;
  60. }
  61. .ol-popup-closer:after {
  62. content: "✖";
  63. }
  64. #moveTaxi{
  65. position: absolute;
  66.     top: 5%;
  67.     left: 5%;
  68.     background-color: rgba(0, 60, 136, .5);
  69.     color: white;
  70. }
  71. #moveTaxi:hover{
  72. cursor: pointer;
  73. }
  74. </style>
  75.  
  76. <script>
  77. /**
  78.  * 地图的底图服务模块
  79.  */
  80. var map_source = "wmts"; //地图的服务类型
  81. var map_projection = "EPSG:3857"; //地图坐标系(3857:墨卡托, 4326:经纬度)
  82. //map_url此处使用的是【Portable Basemap Server】作为地图服务
  83. var map_url = "http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
  84. //var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
  85. var map_zoom = 15; //初始化地图缩放级别
  86. var map_minZoom = 14; //地图最小缩放级别
  87. var map_maxZoom = 20; //地图最大缩放级别
  88. var map_x = 11557761.4071486; //地图x坐标(此处以兰州地图作为中心点)
  89. var map_y = 4307993.90607275; //地图y坐标(此处以兰州地图作为中心点)
  90.  
  91. $(document).ready(function() {
  92. var baseLayer = new ol.layer.Tile({
  93. opacity: 1.0,
  94. source: new ol.source.XYZ({
  95. url: map_url
  96. })
  97. });
  98. if(baseLayer) {
  99. var config = {
  100. center: [map_x, map_y],
  101. zoom: map_zoom,
  102. maxZoom: map_maxZoom,
  103. minZoom: map_minZoom
  104. };
  105. //实例化标绘地图
  106. MYMAP.init(baseLayer, config);
  107. }
  108. //一定要把坐标从字符串类型转换为float类型
  109. var peopleLng = parseFloat("11557866.6091486");
  110. var peopleLat = parseFloat("4307896.40907275");
  111. var peoplePoint = new ol.geom.Point([peopleLng, peopleLat]);
  112. var projection = MYMAP.map.getView().getProjection();
  113. var peopleFeature = new ol.Feature({
  114. geometry: peoplePoint,
  115. labelPoint: peoplePoint,
  116. name: "people"
  117. });
  118. peopleFeature.set("res_type", "people"); //设置坐标点的图标
  119. peopleFeature.set("name", "people");
  120. peopleFeature.setId("people2017010720");
  121. MYMAP.vectorSource.addFeature(peopleFeature);
  122. //一定要把坐标从字符串类型转换为float类型
  123. var taxiLng = parseFloat("11556866.6091486");
  124. var taxiLat = parseFloat("4307696.40907275");
  125. var taxiPoint = new ol.geom.Point([taxiLng, taxiLat]);
  126. var projection = MYMAP.map.getView().getProjection();
  127. var taxiFeature = new ol.Feature({
  128. geometry: taxiPoint,
  129. labelPoint: taxiPoint,
  130. name: "taxi"
  131. });
  132. taxiFeature.set("res_type", "taxi"); //设置坐标点的图标
  133. taxiFeature.set("name", "taxi");
  134. taxiFeature.setId("taxi2017010720");
  135. MYMAP.vectorSource.addFeature(taxiFeature);
  136. //一定要把坐标从字符串类型转换为float类型
  137. var videoLng = parseFloat("11557761.4071486");
  138. var videoLat = parseFloat("4307993.90607275");
  139. var videoPoint = new ol.geom.Point([videoLng, videoLat]);
  140. var projection = MYMAP.map.getView().getProjection();
  141. var videoFeature = new ol.Feature({
  142. geometry: videoPoint,
  143. labelPoint: videoPoint,
  144. name: "video"
  145. });
  146. videoFeature.set("res_type", "video"); //设置坐标点的图标
  147. videoFeature.set("name", "video");
  148. videoFeature.setId("video2017010720");
  149. MYMAP.vectorSource.addFeature(videoFeature);
  150. MYMAP.map.getView().setCenter(videoFeature.getGeometry().getCoordinates());
  151. // 弹出窗口关闭
  152. $("#popup-closer").click(function(){
  153. MYMAP.overlay.setPosition(undefined);
  154. });
  155. //移动车辆
  156. $("#moveTaxi").click(function(){
  157. var newPoint = new ol.geom.Point([11556866.6091486,4308696.40907275]);
  158. var newFeature = MYMAP.vectorSource.getFeatureById("taxi2017010720");
  159. if(newFeature){
  160. newFeature.setGeometry(newPoint);//更新图层坐标
  161. if(MYMAP.overlayID == "taxi2017010720"){
  162. //定位弹出框的中心点-开始
  163. var geometry = newFeature.getGeometry();
  164. var coord = geometry.getCoordinates();
  165. MYMAP.overlay.setPosition(coord);
  166. //定位弹出框的中心点-结束
  167. }
  168. MYMAP.map.getView().setCenter(newFeature.getGeometry().getCoordinates());//重新定位地图的中心點
  169. }
  170. });
  171. });
  172. </script>
  173.  
  174. <body>
  175. <!-- 地图对象 -->
  176. <div id="map" class="map">
  177. <div id="popup" class="ol-popup">
  178. <div id="popup-title" class="ol-popup-title"></div>
  179. <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  180. <div id="popup-content" class="ol-popup-content"></div>
  181. </div>
  182. </div>
  183. <!--图层移动-->
  184. <button id="moveTaxi">移动车辆</button>
  185. </body>
  186. </html>

 MYMap.js

 
  
  1. var MYMAP = {
  2. map: null, // 地图对象
  3. overlayID: null,//作为一个全局变量,用于保存弹出对象的featureid
  4. vectorSource: new ol.source.Vector({
  5. wrapX: false
  6. }),
  7. vectorLayer: null,
  8. icon: {
  9. "people": "images/people.png",
  10. "taxi": "images/taxi.png",
  11. "video": "images/video.png"
  12. },
  13. // 图上资源样式处理
  14. getStyle: function(_feature, _resolution) {
  15. return [new ol.style.Style({
  16. stroke: new ol.style.Stroke({
  17. color: 'red',
  18. width: 2
  19. }),
  20. image: new ol.style.Icon({
  21. offset: [0, 0],
  22. opacity: 1.0,
  23. rotateWithView: true,
  24. rotation: 0.0,
  25. scale: 1.0,
  26. size: [40, 40],
  27. src: MYMAP.icon[_feature.get("res_type")] //根據res_type的值来决定显示的图标
  28. })
  29. })];
  30. },
  31. init: function(_layer, _config) {
  32. MYMAP.vectorLayer = new ol.layer.Vector({
  33. source: MYMAP.vectorSource,
  34. style: MYMAP.getStyle,
  35. zIndex: 1000
  36. });
  37. // 初始弹出窗口对象
  38. MYMAP.overlay = new ol.Overlay(({
  39. element: document.getElementById("popup"),
  40. offset: [-5, -15],
  41. positioning: "center-right",
  42. autoPan: true,
  43. autoPanAnimation: {
  44. duration: 250
  45. }
  46. }));
  47. // 初始地图对象
  48. MYMAP.map = new ol.Map({
  49. layers: [_layer],
  50. loadTilesWhileAnimating: true,
  51. target: document.getElementById("map"),
  52. controls: ol.control.defaults({
  53. attributionOptions: ({
  54. collapsible: false
  55. })
  56. }),
  57. overlays: [MYMAP.overlay],
  58. view: new ol.View({
  59. center: _config.center,
  60. zoom: _config.zoom,
  61. maxZoom: _config.maxZoom,
  62. minZoom: _config.minZoom,
  63. }),
  64. interactions: ol.interaction.defaults({
  65. doubleClickZoom: false
  66. })
  67. });
  68. MYMAP.map.addLayer(MYMAP.vectorLayer);
  69. //初始化地图上的点击事件
  70. MYMAP.map.on("click", function(_e) {
  71. var feature = MYMAP.map.forEachFeatureAtPixel(_e.pixel, function(
  72. feature, layer) {
  73. return feature;
  74. });
  75. MYMAP.popup(feature);
  76. });
  77. },
  78. //资源弹出窗
  79. popup: function(_feature) {
  80. if(_feature) {
  81. var type = _feature.get("name") ? _feature.get("name") : "unknow";
  82. //定位弹出框的中心点-开始
  83. var geometry = _feature.getGeometry();
  84. var coord = geometry.getCoordinates();
  85. MYMAP.overlay.setPosition(coord);
  86. //定位弹出框的中心点-结束
  87. MYMAP.overlayID = _feature.getId();
  88. var titleHtml = "",
  89. html = "";
  90. switch(type) {
  91. case "people":
  92. var titleHtml = "人员信息:";
  93. titleHtml += " ";
  94. titleHtml += "";
  95. $("#popup-title").html(titleHtml);
  96. html += "人员编号:" + _feature.getId();
  97. $("#popup-content").html(html);
  98. break;
  99. case "taxi":
  100. var titleHtml = "出租车信息:";
  101. titleHtml += " ";
  102. titleHtml += "";
  103. $("#popup-title").html(titleHtml);
  104. html += "出租车编号:" + _feature.getId();
  105. $("#popup-content").html(html);
  106. break;
  107. case "video":
  108. var titleHtml = "摄像头信息:";
  109. titleHtml += " ";
  110. titleHtml += "";
  111. $("#popup-title").html(titleHtml);
  112. html += "摄像机编号:" + _feature.getId();
  113. $("#popup-content").html(html);
  114. break;
  115. }
  116. }
  117. }
  118. }

 4、手工定位

04手工定位.html

 
  
  1.  <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>04手工定位</title>
  6. <meta http-equiv="X-UA-Compatible" content="chrome=1">
  7. <link href="css/common/ol.css" rel="stylesheet" type="text/css" />
  8. <link href="css/04手工定位/map.css" rel="stylesheet" type="text/css" />
  9. <script type="text/javascript" src="js/common/ol.js"></script>
  10. <script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
  11. <script type="text/javascript" src="js/04手工定位/MYMap.js" ></script>
  12. <script type="text/javascript" src="js/04手工定位/marker.js" ></script>
  13. </head>
  14. <script>
  15. /**
  16.  * 地图的底图服务模块
  17.  */
  18. var map_source = "wmts"; //地图的服务类型
  19. var map_projection = "EPSG:3857"; //地图坐标系(3857:墨卡托, 4326:经纬度)
  20. //map_url此处使用的是【Portable Basemap Server】作为地图服务
  21. var map_url = "http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
  22. //var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
  23. var map_zoom = 15; //初始化地图缩放级别
  24. var map_minZoom = 14; //地图最小缩放级别
  25. var map_maxZoom = 20; //地图最大缩放级别
  26. var map_x = 11557761.4071486; //地图x坐标(此处以兰州地图作为中心点)
  27. var map_y = 4307993.90607275; //地图y坐标(此处以兰州地图作为中心点)
  28.  
  29. $(document).ready(function() {
  30. var baseLayer = new ol.layer.Tile({
  31. opacity: 1.0,
  32. source: new ol.source.XYZ({
  33. url: map_url
  34. })
  35. });
  36. if(baseLayer) {
  37. var config = {
  38. center: [map_x, map_y],
  39. zoom: map_zoom,
  40. maxZoom: map_maxZoom,
  41. minZoom: map_minZoom
  42. };
  43. //实例化标绘地图
  44. MYMAP.init(baseLayer, config);
  45. }
  46. //手工定位
  47. $("#manualPosition").click(function(){
  48. MARKER.marker();
  49. });
  50. });
  51. </script>
  52. <body>
  53. <!-- 地图对象 -->
  54. <div id="map" class="map"></div>
  55. <!--手工定位-->
  56. <button id="manualPosition">手工定位</button>
  57. </body>
  58. </html>

 map.css

 
  
  1.  #manualPosition {
  2. position: absolute;
  3. top: 5%;
  4. left: 5%;
  5. background-color: rgba(0, 60, 136, .5);
  6. color: white;
  7. }
  8.  
  9. #manualPosition:hover {
  10. cursor: pointer;
  11. }
  12.  
  13. .tooltip {
  14. position: relative;
  15. background: rgba(0, 0, 0, 0.5);
  16. border-radius: 4px;
  17. color: white;
  18. padding: 4px 8px;
  19. opacity: 0.7;
  20. white-space: nowrap;
  21. }
  22. .tooltip-measure {
  23. opacity: 1;
  24. font-weight: bold;
  25. }
  26. .tooltip-static {
  27. background-color: #ffcc33;
  28. color: black;
  29. border: 1px solid white;
  30. font-weight: bold;
  31. }
  32. .tooltip-measure:before, .tooltip-static:before {
  33. border-top: 6px solid rgba(0, 0, 0, 0.5);
  34. border-right: 6px solid transparent;
  35. border-left: 6px solid transparent;
  36. content: "";
  37. position: absolute;
  38. bottom: -6px;
  39. margin-left: -7px;
  40. left: 50%;
  41. }
  42. .tooltip-static:before {
  43. border-top-color: #ffcc33;
  44. }
  45. .tooltip-static .show{
  46. display:block;
  47. position: absolute;
  48. right:0px;
  49. border:1px;
  50. border-color:#000000;
  51. border-radius:2px;
  52. top:-3px;
  53. cursor:pointer;
  54. }
  55. .tooltip-static .show:HOVER{
  56. background: gray;
  57. }

 MYMAP.js

 
  
  1.  var MYMAP = {
  2. map: null, // 地图对象
  3. init: function(_layer, _config) {
  4. // 初始地图对象
  5. MYMAP.map = new ol.Map({
  6. layers: [_layer],
  7. loadTilesWhileAnimating: true,
  8. target: document.getElementById("map"),
  9. controls: ol.control.defaults({
  10. attributionOptions: ({
  11. collapsible: false
  12. })
  13. }),
  14. view: new ol.View({
  15. center: _config.center,
  16. zoom: _config.zoom,
  17. maxZoom: _config.maxZoom,
  18. minZoom: _config.minZoom,
  19. }),
  20. interactions: ol.interaction.defaults({
  21. doubleClickZoom: false
  22. })
  23. });
  24. //添加手工定位标记图层
  25. MYMAP.map.addLayer(MARKER.markLayer());
  26. }
  27. }

 marker.js【重点】

 
  
  1.  /**
  2.  * 手工定位
  3.  */
  4. var MARKER = {
  5. //距离确认数据源
  6. source: new ol.source.Vector(),
  7. draw: null,
  8. closeElement: null, //关闭按钮
  9. spanElement: null, //显示数据(距离或是面积)
  10. measureTooltipElement: null,
  11. measureTooltip: null,
  12. //距离确认
  13. marker: function() {
  14. MARKER.clear();
  15. if(MARKER.draw) {
  16. MYMAP.map.removeInteraction(MARKER.draw);
  17. MARKER.draw = null;
  18. }
  19. MARKER.draw = new ol.interaction.Draw({
  20. source: MARKER.source,
  21. type: "Point",
  22. style: new ol.style.Style({
  23. image: new ol.style.Icon({
  24. offset: [0, 0],
  25. opacity: 1.0,
  26. rotateWithView: true,
  27. rotation: 0.0,
  28. scale: 1.0,
  29. size: [32, 32],
  30. src: "images/icons/marker.png"
  31. })
  32. })
  33. });
  34. MARKER.draw.on("drawstart", function(evt) {
  35.  
  36. }, this);
  37. //手工定位结束后展示坐标信息
  38. MARKER.draw.on("drawend", function(evt) {
  39. MARKER.measureTooltipElement.className = 'tooltip tooltip-static';
  40. var feature = evt.feature;
  41. MARKER.sketch = null;
  42. MARKER.measureTooltipElement = null;
  43. MARKER.closeElement.style.display = 'block';
  44. MARKER.closeElement.className = 'show';
  45. MYMAP.map.un("pointermove", MARKER.pointerMoveHandler);
  46. MYMAP.map.removeInteraction(MARKER.draw);
  47. var posXY = document.getElementById("poxXY").innerText;
  48. var posXYArray = posXY.split(",");
  49. var XPos = posXYArray[0];
  50. var YPos = posXYArray[1];
  51. }, this);
  52. MYMAP.map.addInteraction(MARKER.draw);
  53. MARKER.createMeasureTooltip(); //创建显示信息的div
  54. MYMAP.map.on("pointermove", MARKER.pointerMoveHandler);
  55. },
  56. //清除所有数据
  57. clear: function() {
  58. MARKER.source.clear();
  59. MYMAP.map.removeOverlay(MARKER.measureTooltip);
  60. MYMAP.map.un("pointermove", MARKER.pointerMoveHandler);
  61. },
  62. //创建显示信息的div
  63. createMeasureTooltip: function() {
  64. if(MARKER.closeElement) {
  65. MARKER.closeElement.parentNode.removeChild(MARKER.closeElement);
  66. }
  67. if(MARKER.measureTooltipElement) {
  68. MARKER.measureTooltipElement.parentNode.removeChild(MARKER.measureTooltipElement);
  69. }
  70. MARKER.measureTooltipElement = document.createElement('div');
  71. MARKER.spanElement = document.createElement("span");
  72. MARKER.spanElement.id = "poxXY";
  73. MARKER.closeElement = document.createElement('span'),
  74. MARKER.closeElement.innerHTML = '✖';
  75. MARKER.closeElement.style.display = 'none';
  76. MARKER.closeElement.addEventListener('click', function() {
  77. MARKER.clear();
  78. }, false);
  79. MARKER.measureTooltipElement.appendChild(MARKER.closeElement);
  80. MARKER.measureTooltipElement.appendChild(MARKER.spanElement);
  81. MARKER.measureTooltipElement.className = 'tooltip tooltip-measure';
  82. MARKER.measureTooltip = new ol.Overlay({
  83. element: MARKER.measureTooltipElement,
  84. offset: [0, -25],
  85. positioning: 'bottom-center'
  86. });
  87. MYMAP.map.addOverlay(MARKER.measureTooltip);
  88. },
  89. //鼠标移动事件
  90. pointerMoveHandler: function(evt) {
  91. if(evt.dragging) {
  92. return;
  93. }
  94. var tooltipCoord = evt.coordinate;
  95. var output = tooltipCoord
  96. var msg = output[0].toFixed(6) + " , " + output[1].toFixed(6);
  97. MARKER.spanElement.innerHTML = msg;
  98. MARKER.measureTooltip.setPosition(evt.coordinate);
  99. },
  100. markLayer: function() {
  101. return new ol.layer.Vector({
  102. source: MARKER.source,
  103. style: new ol.style.Style({
  104. image: new ol.style.Icon({
  105. offset: [0, 0],
  106. opacity: 1.0,
  107. rotateWithView: true,
  108. rotation: 0.0,
  109. scale: 1.0,
  110. size: [32, 32],
  111. src: "images/icons/marker.png"
  112. })
  113. })
  114. });
  115. }
  116. }

 5、画三圈和计算距离

 05画三圈和计算距离.html

 
  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>05画三圈和计算距离</title>
  6. <meta http-equiv="X-UA-Compatible" content="chrome=1">
  7. <link href="css/common/ol.css" rel="stylesheet" type="text/css" />
  8. <script type="text/javascript" src="js/common/ol.js"></script>
  9. <script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
  10. <script type="text/javascript" src="js/05画三圈和计算距离/MYMap.js" ></script>
  11. </head>
  12. <style>
  13. .ol-popup {
  14. position: absolute;
  15. background-color: white;
  16. padding-top: 5px;
  17. padding-left: 10px;
  18. padding-right: 10px;
  19. padding-bottom: 10px;
  20. border-radius: 2px;
  21. border: 1px solid #cccccc;
  22. bottom: 12px;
  23. left: -50px;
  24. }
  25. .ol-popup:after,
  26. .ol-popup:before {
  27. top: 100%;
  28. border: solid transparent;
  29. content: " ";
  30. position: absolute;
  31. }
  32. /*border-top-color:用于制作三角形*/
  33. .ol-popup:after {
  34. border-top-color: white;
  35. border-width: 10px;
  36. left: 48px;
  37. margin-left: -10px;
  38. }
  39. .ol-popup:before {
  40. border-top-color: #cccccc;
  41. border-width: 11px;
  42. left: 48px;
  43. margin-left: -11px;
  44. }
  45. .ol-popup-title {
  46. border-bottom: 1px solid #cccccc;
  47. padding-bottom: 3px;
  48. }
  49. .ol-popup-content {
  50. margin-top: 8px;
  51. width:260px;
  52. }
  53. .ol-popup-closer {
  54. text-decoration: none;
  55. position: absolute;
  56. top: 5px;
  57. right: 10px;
  58. }
  59. .ol-popup-closer:after {
  60. content: "✖";
  61. }
  62. </style>
  63. <script>
  64. /**
  65.  * 地图的底图服务模块
  66.  */
  67. var map_source = "wmts"; //地图的服务类型
  68. var map_projection = "EPSG:3857"; //地图坐标系(3857:墨卡托, 4326:经纬度)
  69. //map_url此处使用的是【Portable Basemap Server】作为地图服务
  70. var map_url = "http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
  71. //var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
  72. var map_zoom = 17; //初始化地图缩放级别
  73. var map_minZoom = 14; //地图最小缩放级别
  74. var map_maxZoom = 20; //地图最大缩放级别
  75. var map_x = 11557761.4071486; //地图x坐标(此处以兰州地图作为中心点)
  76. var map_y = 4307993.90607275; //地图y坐标(此处以兰州地图作为中心点)
  77. $(document).ready(function() {
  78. var baseLayer = new ol.layer.Tile({
  79. opacity: 1.0,
  80. source: new ol.source.XYZ({
  81. url: map_url 
  82. })
  83. });
  84. if(baseLayer) {
  85. var config = {
  86. center: [map_x, map_y],
  87. zoom: map_zoom,
  88. maxZoom: map_maxZoom,
  89. minZoom: map_minZoom
  90. };
  91. //实例化地图
  92. MYMAP.init(baseLayer, config);
  93. //画三圈
  94. MYMAP.dispose();
  95. }
  96. // 弹出窗口关闭
  97. $("#popup-closer").click(function(){
  98. MYMAP.overlay.setPosition(undefined);
  99. });
  100. });
  101. </script>
  102. <body>
  103. <!-- 地图对象 -->
  104. <div id="map" class="map">
  105. <div id="popup" class="ol-popup">
  106. <div id="popup-title" class="ol-popup-title"></div>
  107. <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  108. <div id="popup-content" class="ol-popup-content"></div>
  109. </div>
  110. </div>
  111. </body>
  112. </html>

MYMAP.js

 
  
  1. var MYMAP = {
  2. map: null, // 地图对象
  3. overlay: null, // 地图弹出信息窗口
  4. sphere: new ol.Sphere(6378137), //6378137赤道半径,用于计算距离
  5. vectorSource: new ol.source.Vector({
  6. wrapX: false
  7. }),
  8. vectorLayer: null,
  9. icon: {
  10. "people": "images/people.png",
  11. "taxi": "images/taxi.png",
  12. "video": "images/video.png"
  13. },
  14. // 图上资源样式处理
  15. getStyle: function(_feature, _resolution) {
  16. return [new ol.style.Style({
  17. stroke: new ol.style.Stroke({
  18. color: 'red',
  19. width: 2
  20. }),
  21. image: new ol.style.Icon({
  22. offset: [0, 0],
  23. opacity: 1.0,
  24. rotateWithView: true,
  25. rotation: 0.0,
  26. scale: 1.0,
  27. size: [40, 40],
  28. src: MYMAP.icon[_feature.get("res_type")] //根據res_type的值来决定显示的图标
  29. })
  30. })];
  31. },
  32. init: function(_layer, _config) {
  33. MYMAP.vectorLayer = new ol.layer.Vector({
  34. source: MYMAP.vectorSource,
  35. style: MYMAP.getStyle,
  36. zIndex: 1000
  37. });
  38. // 初始弹出窗口对象
  39. MYMAP.overlay = new ol.Overlay(({
  40. element: document.getElementById("popup"),
  41. offset: [-5, -15],
  42. positioning: "center-right",
  43. autoPan: true,
  44. autoPanAnimation: {
  45. duration: 250
  46. }
  47. }));
  48. // 初始地图对象
  49. MYMAP.map = new ol.Map({
  50. layers: [_layer],
  51. loadTilesWhileAnimating: true,
  52. target: document.getElementById("map"),
  53. controls: ol.control.defaults({
  54. attributionOptions: ({
  55. collapsible: false
  56. })
  57. }),
  58. overlays: [MYMAP.overlay],
  59. view: new ol.View({
  60. center: _config.center,
  61. zoom: _config.zoom,
  62. maxZoom: _config.maxZoom,
  63. minZoom: _config.minZoom,
  64. }),
  65. interactions: ol.interaction.defaults({
  66. doubleClickZoom: false
  67. })
  68. });
  69. MYMAP.map.addLayer(MYMAP.vectorLayer);
  70. //初始化地图上的点击事件
  71. MYMAP.map.on("click", function(_e) {
  72. var feature = MYMAP.map.forEachFeatureAtPixel(_e.pixel, function(
  73. feature, layer) {
  74. return feature;
  75. });
  76. MYMAP.popup(feature);
  77. });
  78. },
  79. //资源弹出窗
  80. popup: function(_feature) {
  81. if(_feature) {
  82. var type = _feature.get("name") ? _feature.get("name") : "unknow";
  83. //定位弹出框的中心点-开始
  84. var geometry = _feature.getGeometry();
  85. var coord = geometry.getCoordinates();
  86. MYMAP.overlay.setPosition(coord);
  87. //定位弹出框的中心点-结束
  88. var titleHtml = "",
  89. html = "";
  90. switch(type) {
  91. case "people":
  92. var titleHtml = "人员信息:";
  93. titleHtml += " ";
  94. titleHtml += "";
  95. $("#popup-title").html(titleHtml);
  96. html += "人员坐标:" + coord;
  97. var distance = MYMAP.distance([11557761.4071486, 4307993.90607275], coord);
  98. html += "与出租车(中心点)距离为:" + distance;
  99. $("#popup-content").html(html);
  100. break;
  101. case "taxi":
  102. var titleHtml = "出租车信息:";
  103. titleHtml += " ";
  104. titleHtml += "";
  105. $("#popup-title").html(titleHtml);
  106. html += "出租车坐标为:" + coord;
  107. $("#popup-content").html(html);
  108. break;
  109. }
  110. }
  111. },
  112. //画三圈
  113. dispose: function() {
  114. var point = new ol.geom.Point([11557761.4071486, 4307993.90607275]);
  115.  
  116. var taxiFeature = new ol.Feature({
  117. geometry: point,
  118. name: "taxi"
  119. });
  120. taxiFeature.set("res_type", "taxi");
  121. MYMAP.vectorSource.addFeature(taxiFeature);
  122.  
  123. //画三圈开始
  124. //300: 代表圆的半径
  125. var circle300 = new ol.geom.Circle([11557761.4071486, 4307993.90607275], 300);
  126. var circle200 = new ol.geom.Circle([11557761.4071486, 4307993.90607275], 200);
  127. var circle100 = new ol.geom.Circle([11557761.4071486, 4307993.90607275], 100);
  128.  
  129. var circleFeature300 = new ol.Feature({
  130. geometry: circle300
  131. });
  132. var style300 = new ol.style.Style({
  133. fill: new ol.style.Fill({
  134. color: 'rgba(50, 205, 50, 0.3)'
  135. }),
  136. stroke: new ol.style.Stroke({
  137. color: 'rgba(50, 205, 50, 0.6)',
  138. width: 2
  139. }),
  140. image: new ol.style.Circle({
  141. radius: 7,
  142. fill: new ol.style.Fill({
  143. color: '#ffcc33'
  144. })
  145. })
  146. });
  147. circleFeature300.setStyle(style300);
  148. MYMAP.vectorSource.addFeature(circleFeature300);
  149.  
  150. var circleFeature200 = new ol.Feature({
  151. geometry: circle200
  152. });
  153. var style200 = new ol.style.Style({
  154. fill: new ol.style.Fill({
  155. color: 'rgba(255, 165, 0, 0.3)'
  156. }),
  157. stroke: new ol.style.Stroke({
  158. color: 'rgba(255, 165, 0, 0.6)',
  159. width: 2
  160. }),
  161. image: new ol.style.Circle({
  162. radius: 7,
  163. fill: new ol.style.Fill({
  164. color: '#ffcc33'
  165. })
  166. })
  167. });
  168. circleFeature200.setStyle(style200);
  169. MYMAP.vectorSource.addFeature(circleFeature200);
  170.  
  171. var circleFeature100 = new ol.Feature({
  172. geometry: circle100
  173. });
  174. var style100 = new ol.style.Style({
  175. fill: new ol.style.Fill({
  176. color: 'rgba(255, 0, 0, 0.3)'
  177. }),
  178. stroke: new ol.style.Stroke({
  179. color: 'rgba(255, 0, 0, 0.6)',
  180. width: 2
  181. }),
  182. image: new ol.style.Circle({
  183. radius: 7,
  184. fill: new ol.style.Fill({
  185. color: '#ffcc33'
  186. })
  187. })
  188. });
  189. circleFeature100.setStyle(style100);
  190. MYMAP.vectorSource.addFeature(circleFeature100);
  191. //画三圈结束
  192. var pan = ol.animation.pan({
  193. duration: 500,
  194. source: (MYMAP.map.getView().getCenter())
  195. });
  196. MYMAP.map.beforeRender(pan);//延迟上图
  197. MYMAP.map.getView().setCenter(point.getCoordinates());
  198.  
  199. //初始化三圈内的坐标点,用于计算
  200. var peopleFeature100 = new ol.Feature({
  201. geometry: new ol.geom.Point([11557696.316242, 4307946.730094]),
  202. name: "people"
  203. });
  204. peopleFeature100.set("res_type", "people");
  205. MYMAP.vectorSource.addFeature(peopleFeature100);
  206.  
  207. var peopleFeature200 = new ol.Feature({
  208. geometry: new ol.geom.Point([11557628.239513, 4307988.531594]),
  209. name: "people"
  210. });
  211. peopleFeature200.set("res_type", "people");
  212. MYMAP.vectorSource.addFeature(peopleFeature200);
  213.  
  214. var peopleFeature300 = new ol.Feature({
  215. geometry: new ol.geom.Point([11557937.570612, 4308199.927751]),
  216. name: "people"
  217. });
  218. peopleFeature300.set("res_type", "people");
  219. MYMAP.vectorSource.addFeature(peopleFeature300);
  220. },
  221. //用于计算两个坐标点之间的距离
  222. distance: function(point1, point2) {
  223. return MYMAP.sphere.haversineDistance(point1, point2);
  224. }
  225. }

 6、三高四色地图

openLayer3地图的使用心得

06三高四色地图.html

 

 
  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>06三高四色预警</title>
  6. <meta http-equiv="X-UA-Compatible" content="chrome=1">
  7. <link href="css/common/ol.css" rel="stylesheet" type="text/css" />
  8. <script type="text/javascript" src="js/common/ol.js"></script>
  9. <script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
  10. </head>
  11.  
  12. <script>
  13. /**
  14.  * 地图的底图服务模块
  15.  */
  16. var map_source = "wmts"; //地图的服务类型
  17. var map_projection = "EPSG:3857"; //地图坐标系(3857:墨卡托, 4326:经纬度)
  18. //map_url此处使用的是【Portable Basemap Server】作为地图服务
  19. var map_url = "http://localhost:8888/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
  20. //var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
  21. var map_zoom = 24; //初始化地图缩放级别
  22. var map_minZoom = 24; //地图最小缩放级别
  23. var map_maxZoom = 26; //地图最大缩放级别
  24. var map_x = 113.21413; //地图x坐标(此处以兰州地图作为中心点)113.21413,38.09156
  25. var map_y = 38.09156; //地图y坐标(此处以兰州地图作为中心点)
  26.  
  27. $(document).ready(function() {
  28. var baseLayer = new ol.layer.Tile({
  29. opacity: 1.0,
  30. source: new ol.source.XYZ({
  31. url: map_url
  32. })
  33. });
  34. if(baseLayer) {
  35. // 初始地图对象
  36. var MYMAP = {
  37. map: null, // 地图对象
  38. vectorSource: new ol.source.Vector({
  39. wrapX: false
  40. }),
  41. vectorLayer: null
  42. }
  43. MYMAP.map = new ol.Map({
  44. layers: [baseLayer],
  45. loadTilesWhileAnimating: true,
  46. target: document.getElementById("map"),
  47. controls: ol.control.defaults({
  48. attributionOptions: ({
  49. collapsible: false
  50. })
  51. }),
  52. view: new ol.View({
  53. center: [map_x, map_y],
  54. zoom: map_zoom,
  55. minZoom: map_minZoom,
  56. maxZoom: map_maxZoom
  57. }),
  58. interactions: ol.interaction.defaults({
  59. doubleClickZoom: false
  60. })
  61. });
  62. MYMAP.vectorLayer = new ol.layer.Vector({
  63. source: MYMAP.vectorSource,
  64. zIndex: 1000
  65. });
  66. MYMAP.map.addLayer(MYMAP.vectorLayer);
  67. }
  68. var shapesArray = ['113.11466,38.42001,113.11438,38.42027','112.49035,37.12116,112.48808,37.12078'];
  69. var nameArray = ['太原市','大同市','朔州市','忻州市','阳泉市','晋中市','长治市','晋城市','吕梁市','临汾市','运城市'];
  70. for(var i = 0;< shapesArray.length;i++){
  71. var geoAr= shapesArray[i].split(",");
  72. var geometryAr= [];
  73. for(var j=0; j<geoAr.length; j+=2){
  74. var lng= geoAr[j];
  75. var lat= geoAr[j+1];
  76. var point= [parseFloat(lng), parseFloat(lat)];
  77. geometryAr.push(point);
  78. }
  79. var geometry= new ol.geom.Polygon([geometryAr]);//创建一个多边形对象
  80. var feature= new ol.Feature({
  81. geometry: geometry
  82. });
  83. var style = new ol.style.Style({
  84. fill: new ol.style.Fill({//填充要素的样式
  85. color: 'rgba(253, 64, 139, 0.6)'
  86. }),
  87. stroke: new ol.style.Stroke({//要素边界样式
  88. color: 'blue',
  89. width: 2
  90. }),
  91. text:new ol.style.Text({ //文字格式  
  92.             textAlign:'center',  
  93.             textBaseline:'middle',  
  94.             font:'normal 14px 微软雅黑',  
  95.             text: nameArray[i],
  96.             
  97.             fill:new ol.style.Fill({color:'#000000'}),  
  98.             stroke:new ol.style.Stroke({color:'#ffcc33',width:2})  
  99.         })  
  100. });
  101. feature.setStyle(style);
  102. MYMAP.vectorSource.addFeature(feature);  
  103. }
  104. });
  105. </script>
  106.  
  107. <body>
  108. <!-- 地图对象 -->
  109. <div id="map" class="map"></div>
  110. </body>
  111. </html>

附件源码:

下载地址:https://gitee.com/KingXin666/Openlayer3Demo