openLayer3地图的使用心得

时间：2022-10-03 00:11:40

准备运行环境：

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. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8" />
    5. 

  5. <title>01初始化地图</title>
    6. 

  6. <meta http-equiv="X-UA-Compatible" content="chrome=1">
    7. 

  7. <link href="css/ol.css" rel="stylesheet" type="text/css" />
    8. 

  8. <script type="text/javascript" src="js/common/ol.js"></script>
    9. 

  9. <script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
    10. 

  10. </head>
    11. 

  11. <script>
    12. 

  12. var map_source = "wmts"; //地图的服务类型
    13. 

  13. var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
    14. 

  14. //map_url此处使用的是【Portable Basemap Server】作为地图服务
    15. 

  15. var map_url = "http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
    16. 

  16. //var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
    17. 

  17. var map_zoom = 15; //初始化地图缩放级别
    18. 

  18. var map_minZoom = 14; //地图最小缩放级别
    19. 

  19. var map_maxZoom = 20; //地图最大缩放级别
    20. 

  20. var map_x = 11557761.4071486; //地图x坐标（此处以兰州地图作为中心点）
    21. 

  21. var map_y = 4307993.90607275; //地图y坐标（此处以兰州地图作为中心点）
    22. 

  22. $(document).ready(function() {
    23. 

  23. var baseLayer = new ol.layer.Tile({
    24. 

  24. opacity: 1.0,
    25. 

  25. source: new ol.source.XYZ({
    26. 

  26. url: map_url
    27. 

  27. })
    28. 

  28. });
    29. 

  29. if(baseLayer) {
    30. 

  30. // 初始地图对象
    31. 

  31. var map = new ol.Map({
    32. 

  32. layers: [baseLayer],
    33. 

  33. loadTilesWhileAnimating: true,
    34. 

  34. target: document.getElementById("map"),
    35. 

  35. controls: ol.control.defaults({
    36. 

  36. attributionOptions: ({
    37. 

  37. collapsible: false
    38. 

  38. })
    39. 

  39. }),
    40. 

  40. view: new ol.View({
    41. 

  41. center: [map_x, map_y],
    42. 

  42. zoom: map_zoom,
    43. 

  43. minZoom: map_minZoom,
    44. 

  44. maxZoom: map_maxZoom
    45. 

  45. }),
    46. 

  46. interactions: ol.interaction.defaults({
    47. 

  47. doubleClickZoom: false
    48. 

  48. })
    49. 

  49. });
    50. 

  50. }
    51. 

  51. });
    52. 

  52. </script>
    53. 

  53. <body>
    54. 

  54. <div id="map"></div>
    55. 

  55. </body>
    56. 

  56. </html>
    57. 



2、标绘（画笔）


02标绘.html




    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title>02标绘</title>
    6. 

  6. <meta http-equiv="X-UA-Compatible" content="chrome=1">
    7. 

  7. <link href="css/common/ol.css" rel="stylesheet" type="text/css" />
    8. 

  8. <link href="css/draw/draw.css" rel="stylesheet" type="text/css" />
    9. 

  9. <script type="text/javascript" src="js/common/ol.js"></script>
    10. 

  10. <script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
    11. 

  11. <script type="text/javascript" src="js/draw/util.js" ></script>
    12. 

  12. <script type="text/javascript" src="js/draw/baseMap.js"></script>
    13. 

  13. <script type="text/javascript" src="js/draw/drawMap.js"></script>
    14. 

  14. <script type="text/javascript" src="js/draw/plot.js"></script>
    15. 

  15. </head>
    16. 

  16. <body>
    17. 

  17. <div id="map"></div>
    18. 

  18. <!-- 标绘菜单开始 -->
    19. 

  19. <button id="plotBtn" title="标绘"></button>
    20. 

  20. <!-- 标绘菜单结束 -->
    21. 

  21. <!-- 清空按钮 -->
    22. 

  22. <div id="clearDIV">
    23. 

  23. <button id="clear" class="cirButton58 pngButton print_btn" onclick="clearLayer();">
    24. 

  24. <span class="text">清空</span>
    25. 

  25. </button>
    26. 

  26. </div>
    27. 

  27. <!-- 标绘div -->
    28. 

  28. <div id='DrawBoxDiv' class='drawBox' style='display:none;'></div>
    29. 

  29. <div id='plotMarker'></div>
    30. 

  30. </body>
    31. 

  31. </html>
    32. 



util.js




    

  1. /**
    2. 

  2. * JS公共工具类
    3. 

  3. */
    4. 

  4. var Util = {
    5. 

  5. randomString:function(len) {//随机生成字符串
    6. 

  6. len = len || 32;
    7. 

  7. var $chars = 'ABC1DEFGH2IJK3LMNOQP4RSTU5VWXYZab6cdef8ghij7kmlnopq9rest0uvwxyz';
    8. 

  8. var maxPos = $chars.length;
    9. 

  9. var pwd = '';
    10. 

  10. for (i = 0; i < len; i++) {
    11. 

  11. pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    12. 

  12. }
    13. 

  13. return pwd;
    14. 

  14. }
    15. 

  15. }
    16. 

  16. function Map() {
    17. 

  17. this.elements = new Array();
    18. 

  18. //获取Map元素个数
    19. 

  19. this.size = function() {
    20. 

  20. return this.elements.length;
    21. 

  21. },
    22. 

  22. //判断Map是否为空
    23. 

  23. this.isEmpty = function() {
    24. 

  24. return (this.elements.length < 1);
    25. 

  25. },
    26. 

  26. //删除Map所有元素
    27. 

  27. this.clear = function() {
    28. 

  28. this.elements = new Array();
    29. 

  29. },
    30. 

  30. //向Map中增加元素（key, value)
    31. 

  31. this.put = function(_key, _value) {
    32. 

  32. if (this.containsKey(_key) == true) {
    33. 

  33. if (this.containsValue(_value)) {
    34. 

  34. if (this.remove(_key) == true) {
    35. 

  35. this.elements.push({
    36. 

  36. key : _key,
    37. 

  37. value : _value
    38. 

  38. });
    39. 

  39. }
    40. 

  40. } else {
    41. 

  41. this.elements.push({
    42. 

  42. key : _key,
    43. 

  43. value : _value
    44. 

  44. });
    45. 

  45. }
    46. 

  46. } else {
    47. 

  47. this.elements.push({
    48. 

  48. key : _key,
    49. 

  49. value : _value
    50. 

  50. });
    51. 

  51. }
    52. 

  52. },
    53. 

  53. //删除指定key的元素，成功返回true，失败返回false
    54. 

  54. this.remove = function(_key) {
    55. 

  55. var bln = false;
    56. 

  56. try {
    57. 

  57. for (i = 0; i < this.elements.length; i++) {
    58. 

  58. if (this.elements[i].key == _key) {
    59. 

  59. this.elements.splice(i, 1);
    60. 

  60. return true;
    61. 

  61. }
    62. 

  62. }
    63. 

  63. } catch (e) {
    64. 

  64. bln = false;
    65. 

  65. }
    66. 

  66. return bln;
    67. 

  67. },
    68. 

  68. //获取指定key的元素值value，失败返回null
    69. 

  69. this.get = function(_key) {
    70. 

  70. try {
    71. 

  71. for (i = 0; i < this.elements.length; i++) {
    72. 

  72. if (this.elements[i].key == _key) {
    73. 

  73. return this.elements[i].value;
    74. 

  74. }
    75. 

  75. }
    76. 

  76. } catch (e) {
    77. 

  77. return null;
    78. 

  78. }
    79. 

  79. },
    80. 

  80. //获取指定索引的元素（使用element.key，element.value获取key和value），失败返回null
    81. 

  81. this.element = function(_index) {
    82. 

  82. if (_index < 0 || _index >= this.elements.length) {
    83. 

  83. return null;
    84. 

  84. }
    85. 

  85. return this.elements[_index];
    86. 

  86. },
    87. 

  87. //判断Map中是否含有指定key的元素
    88. 

  88. this.containsKey = function(_key) {
    89. 

  89. var bln = false;
    90. 

  90. try {
    91. 

  91. for (i = 0; i < this.elements.length; i++) {
    92. 

  92. if (this.elements[i].key == _key) {
    93. 

  93. bln = true;
    94. 

  94. }
    95. 

  95. }
    96. 

  96. } catch (e) {
    97. 

  97. bln = false;
    98. 

  98. }
    99. 

  99. return bln;
    100. 

  100. },
    101. 

  101. //判断Map中是否含有指定value的元素
    102. 

  102. this.containsValue = function(_value) {
    103. 

  103. var bln = false;
    104. 

  104. try {
    105. 

  105. for (i = 0; i < this.elements.length; i++) {
    106. 

  106. if (this.elements[i].value == _value) {
    107. 

  107. bln = true;
    108. 

  108. }
    109. 

  109. }
    110. 

  110. } catch (e) {
    111. 

  111. bln = false;
    112. 

  112. }
    113. 

  113. return bln;
    114. 

  114. },
    115. 

  115. //获取Map中所有key的数组（array）
    116. 

  116. this.keys = function() {
    117. 

  117. var arr = new Array();
    118. 

  118. for (i = 0; i < this.elements.length; i++) {
    119. 

  119. arr.push(this.elements[i].key);
    120. 

  120. }
    121. 

  121. return arr;
    122. 

  122. },
    123. 

  123. //获取Map中所有value的数组（array）
    124. 

  124. this.values = function() {
    125. 

  125. var arr = new Array();
    126. 

  126. for (i = 0; i < this.elements.length; i++) {
    127. 

  127. arr.push(this.elements[i].value);
    128. 

  128. }
    129. 

  129. return arr;
    130. 

  130. };
    131. 

  131. }
    132. 



baseMap.js




    

  1. /**
    2. 

  2. * 地图的底图服务模块
    3. 

  3. */
    4. 

  4. var map_source = "wmts"; //地图的服务类型
    5. 

  5. var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
    6. 

  6. //map_url此处使用的是【Portable Basemap Server】作为地图服务
    7. 

  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. 

  8. //var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
    9. 

  9. var map_zoom = 15; //初始化地图缩放级别
    10. 

  10. var map_minZoom = 14; //地图最小缩放级别
    11. 

  11. var map_maxZoom = 20; //地图最大缩放级别
    12. 

  12. var map_x = 11557761.4071486; //地图x坐标（此处以兰州地图作为中心点）
    13. 

  13. var map_y = 4307993.90607275; //地图y坐标（此处以兰州地图作为中心点）
    14. 

  14. $(document).ready(function() {
    15. 

  15. var baseLayer = new ol.layer.Tile({
    16. 

  16. opacity: 1.0,
    17. 

  17. source: new ol.source.XYZ({
    18. 

  18. url: map_url
    19. 

  19. })
    20. 

  20. });
    21. 

  21. if(baseLayer) {
    22. 

  22. var config = {
    23. 

  23. center: [map_x, map_y],
    24. 

  24. zoom: map_zoom,
    25. 

  25. maxZoom: map_maxZoom,
    26. 

  26. minZoom: map_minZoom
    27. 

  27. };
    28. 

  28. //实例化标绘地图
    29. 

  29. DRAWMAP.init(baseLayer, config);
    30. 

  30. }
    31. 

  31. //标绘
    32. 

  32. $("#plotBtn").click(function(){
    33. 

  33. PLOT.showHideDrawBox();
    34. 

  34. });
    35. 

  35. });
    36. 

  36. /**
    37. 

  37. * 清除全部图层
    38. 

  38. */
    39. 

  39. function clearLayer(){
    40. 

  40. if(confirm("要清除所有图层吗？")){
    41. 

  41. //清空标绘图层
    42. 

  42. for(var i = 0;i < PLOT.plotImgMap.size();i++){
    43. 

  43. var id = PLOT.plotImgMap.elements[i].key;
    44. 

  44. var layer = PLOT.plotImgMap.get(id);
    45. 

  45. var source = layer.getSource();
    46. 

  46. source.clear();
    47. 

  47. }
    48. 

  48. PLOT.plotImgMap.clear();//清空标绘数组
    49. 

  49. $("#plotMarker").hide();//隐藏按钮
    50. 

  50. }
    51. 

  51. }
    52. 



drawMap.js




    

  1. /**
    2. 

  2. * 标绘模块的地图（实例化）
    3. 

  3. */
    4. 

  4. var DRAWMAP = {
    5. 

  5. map : null, // 地图对象
    6. 

  6. draw : null,
    7. 

  7. vectorSource : new ol.source.Vector({
    8. 

  8. wrapX : false
    9. 

  9. }),
    10. 

  10. vectorLayer : null,
    11. 

  11. init : function(_layer, _config) {
    12. 

  12. DRAWMAP.vectorLayer = new ol.layer.Vector({
    13. 

  13. source : DRAWMAP.vectorSource,
    14. 

  14. zIndex : 1000
    15. 

  15. });
    16. 

  16. // 初始地图对象
    17. 

  17. DRAWMAP.map = new ol.Map({
    18. 

  18. layers : [ _layer ],
    19. 

  19. loadTilesWhileAnimating : true,
    20. 

  20. target : document.getElementById("map"),
    21. 

  21. controls : ol.control.defaults({
    22. 

  22. attributionOptions : ({
    23. 

  23. collapsible : false
    24. 

  24. })
    25. 

  25. }),
    26. 

  26. view : new ol.View({
    27. 

  27. center : _config.center,
    28. 

  28. zoom : _config.zoom,
    29. 

  29. maxZoom : _config.maxZoom,
    30. 

  30. minZoom : _config.minZoom,
    31. 

  31. }),
    32. 

  32. interactions : ol.interaction.defaults({
    33. 

  33. doubleClickZoom : false
    34. 

  34. })
    35. 

  35. });
    36. 

  36. DRAWMAP.map.addLayer(DRAWMAP.vectorLayer);
    37. 

  37. }
    38. 

  38. };
    39. 



plot.js




    

  1. /**
    2. 

  2. * 标绘功能的事件处理模块
    3. 

  3. */
    4. 

  4. var PLOT = {
    5. 

  5. plotImgMap:new Map(),//存放标绘在地图上的图片
    6. 

  6. draw:null,
    7. 

  7. source: new ol.source.Vector(),
    8. 

  8. plotPic:null,
    9. 

  9. gBHPicGroup:"",//标绘图标组名
    10. 

  10. gCurDrawPicture:"",//图标路径
    11. 

  11. showHideDrawBox:function(){//显示隐藏标绘界面
    12. 

  12. $("#DrawBoxDiv").html("");
    13. 

  13. PLOT.createDrawBox("","");
    14. 

  14. if($("#DrawBoxDiv").css("display")!="none"){
    15. 

  15. $("#DrawBoxDiv").css("display","none");
    16. 

  16. $("#SaveDrawDiv").css("display","none");
    17. 

  17. }else{
    18. 

  18. $("#DrawBoxDiv").css("display","block");
    19. 

  19. $("#SaveDrawDiv").css("display","block");
    20. 

  20. }
    21. 

  21. },
    22. 

  22. createDrawBoxHTML:function(){
    23. 

  23. var ix='<table class="title" >';
    24. 

  24. ix+='<tr><td valign="center">';
    25. 

  25. ix+='<strong> 基础绘图工具</strong>';
    26. 

  26. ix+='</td><td align="right">';
    27. 

  27. ix+='<img class="close" src="data:images/button/close.gif" title="关闭" onclick="$(\'#DrawBoxDiv\').css(\'display\',\'none\');"></img> </td></tr>';
    28. 

  28. ix+='</table>';
    29. 

  29. ix+='<table class="content" border="0" cellSpacing="0" cellPadding="0">';
    30. 

  30. ix+='<tr><td><div id="drawBrushDiv" class="drawBrush">';
    31. 

  31. ix+='<table><tr><td style="height:30px;"></td></tr>';
    32. 

  32. ix+='<tr><td><img id="bhObj_0" src="data:images/tool/RedMark.png" title="标点" class="drawPicStyle3"/></td></tr>';
    33. 

  33. ix+='<tr><td><img id="bhObj_1" src="data:images/tool/FGreen.png" title="小旗帜" class="drawPicStyle3"/></td></tr>';
    34. 

  34. ix+='<tr><td><img id="bhObj_2" src="data:images/tool/circle.gif" title="画圆形" class="drawPicStyle3"/></td></tr>';
    35. 

  35. ix+='<tr><td><img id="bhObj_3" src="data:images/tool/polyline.gif" title="画折线" class="drawPicStyle3"/></td></tr>';
    36. 

  36. ix+='</table></div></td>';
    37. 

  37. ix+='<td><div class="selBH"> 选择图标组： '+
    38. 

  38. '<select id="selBHGroup" class="DefineTopicTextCtl" onchange="PLOT.showSelGroupPic()"></select></div>' +
    39. 

  39. '<div id="drawPicDiv" class="drawPic"></div>' +
    40. 

  40. '</td>';
    41. 

  41. ix+='<tr></table>';
    42. 

  42. return ix;
    43. 

  43. },
    44. 

  44. createDrawBox:function(){//创建标绘内容
    45. 

  45. var html = PLOT.createDrawBoxHTML();
    46. 

  46. $("#DrawBoxDiv").append(html);
    47. 

  47. var OptionResults = "<option value='01常用'>01常用</option>";
    48. 

  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. 

  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. 

  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. 

  51. $("#selBHGroup").append(OptionResults);
    52. 

  52. $("#drawPicDiv").append(FileNames);
    53. 

  53. //图标组的鼠标点击事件
    54. 

  54. $(".drawPicStyle").mousedown(function(event){
    55. 

  55. $(".drawPicStyle").removeClass("drawPicSelected");
    56. 

  56. $(this).addClass("drawPicSelected");
    57. 

  57. gBHisDeleteObj=false;
    58. 

  58. var $spanId = $(this).attr("id");
    59. 

  59. var picObj = $("#"+$spanId+" img")[0];
    60. 

  60. PLOT.addPlot(PLOT.getImgInfo(picObj));
    61. 

  61. });
    62. 

  62. //画笔图标的悬浮事件样式控制
    63. 

  63. $(".drawPicStyle3").hover(function(){
    64. 

  64. $(this).addClass("drawPicOver");
    65. 

  65. },function(){
    66. 

  66. $(this).removeClass("drawPicOver");
    67. 

  67. });
    68. 

  68. //画笔图标的鼠标点击事件
    69. 

  69. $(".drawPicStyle3").mousedown(function(event){
    70. 

  70. $(".drawPicStyle3").removeClass("drawPicSelected");
    71. 

  71. $(this).addClass("drawPicSelected");
    72. 

  72. switch($(this).attr("id")){
    73. 

  73. case "bhObj_0"://标一个点图标
    74. 

  74. PLOT.addPlot(PLOT.getImgInfo(this));
    75. 

  75. break;
    76. 

  76. case "bhObj_1"://标一个小旗帜
    77. 

  77. PLOT.addPlot(PLOT.getImgInfo(this));
    78. 

  78. break;
    79. 

  79. case "bhObj_2"://画圆形
    80. 

  80. PLOT.drawPlot(2);
    81. 

  81. break;
    82. 

  82. case "bhObj_3"://画折线
    83. 

  83. PLOT.drawPlot(3);
    84. 

  84. break;
    85. 

  85. default:
    86. 

  86. break;
    87. 

  87. }
    88. 

  88. });
    89. 

  89. },
    90. 

  90. addPlot:function(imgurl){//标绘操作
    91. 

  91. PLOT.plotPic = imgurl;
    92. 

  92. DRAWMAP.map.on("singleclick",function(event){
    93. 

  93. if(PLOT.plotPic){
    94. 

  94. var coordinate = event.coordinate;//获取当前鼠标移动后的坐标信息
    95. 

  95. PLOT.addIcon(PLOT.plotPic,coordinate);//在地图中加入图片
    96. 

  96. PLOT.plotPic = null;
    97. 

  97. }
    98. 

  98. });
    99. 

  99. },
    100. 

  100. getImgInfo:function(picObj){//获取图片信息（宽高、路径）
    101. 

  101. var src = $(picObj).attr("src");
    102. 

  102. var width="80",height="80";
    103. 

  103. var imgObj = new Image();
    104. 

  104. imgObj.src = src;
    105. 

  105. if(imgObj.width != 0 && imgObj.height != 0){
    106. 

  106. width = imgObj.width;
    107. 

  107. height = imgObj.height;
    108. 

  108. }
    109. 

  109. return [width,height,src];
    110. 

  110. },
    111. 

  111. addIcon:function(imgurl,lonLat){//在地图中加入图片
    112. 

  112. var lng = parseFloat(lonLat[0]);
    113. 

  113. var lat = parseFloat(lonLat[1]);
    114. 

  114. var point = new ol.geom.Point([lng, lat]);//转换点坐标对象
    115. 

  115. var featureId  = Util.randomString(10);
    116. 

  116. var feature= new ol.Feature({
    117. 

  117. geometry: point,
    118. 

  118. labelPoint: point,
    119. 

  119. name: "plot"
    120. 

  120. });
    121. 

  121. feature.setId(featureId);
    122. 

  122. var featureSource =  new ol.source.Vector();
    123. 

  123. featureSource.addFeature(feature);
    124. 

  124. var style = new ol.style.Style({
    125. 

  125. fill: new ol.style.Fill({
    126. 

  126. color: 'rgba(255, 255, 255, 0.2)'
    127. 

  127. }),
    128. 

  128. stroke: new ol.style.Stroke({
    129. 

  129. color: '#ffcc33',
    130. 

  130. width: 2
    131. 

  131. }),
    132. 

  132. image:new ol.style.Icon({
    133. 

  133. offset: [0, 0],
    134. 

  134. opacity: 1.0,
    135. 

  135. rotateWithView: true,
    136. 

  136. rotation: 0.0,
    137. 

  137. scale: 1.0,
    138. 

  138. size: [imgurl[0], imgurl[1]],
    139. 

  139. src: imgurl[2]
    140. 

  140. })
    141. 

  141. });
    142. 

  142. var getLayer= new ol.layer.Vector({
    143. 

  143. source: featureSource,
    144. 

  144. style: style
    145. 

  145. });
    146. 

  146. if(DRAWMAP.map){
    147. 

  147. DRAWMAP.map.addLayer(getLayer);
    148. 

  148. PLOT.plotImgMap.put(featureId,getLayer);
    149. 

  149. }
    150. 

  150. },
    151. 

  151. drawPlot:function(flag){//画笔操作，比如画圆、画矩形
    152. 

  152. if(PLOT.draw){
    153. 

  153. DRAWMAP.map.removeInteraction(PLOT.draw);
    154. 

  154. PLOT.draw = null;
    155. 

  155. }
    156. 

  156. var value = "";
    157. 

  157. switch(parseInt(flag)){
    158. 

  158. case 2://画圆形
    159. 

  159. value = "Circle";
    160. 

  160. break;
    161. 

  161. case 3://画折线
    162. 

  162. value = "LineString";
    163. 

  163. break;
    164. 

  164. }
    165. 

  165. var sourceId  = Util.randomString(10);
    166. 

  166. PLOT.source.set("id",sourceId);
    167. 

  167. PLOT.source.set("name","plot");
    168. 

  168. PLOT.draw = new ol.interaction.Draw({
    169. 

  169. source: PLOT.source,
    170. 

  170. type:(value),
    171. 

  171. geometryFunction: null,
    172. 

  172. maxPoints: null
    173. 

  173. });
    174. 

  174. if(DRAWMAP.map){
    175. 

  175. DRAWMAP.map.addInteraction(PLOT.draw);
    176. 

  176. PLOT.plotImgMap.put(sourceId,PLOT.plotLayer());
    177. 

  177. }
    178. 

  178. //画笔绘图结束
    179. 

  179. PLOT.draw.on("drawend", function(evt) {
    180. 

  180. DRAWMAP.map.removeInteraction(PLOT.draw);
    181. 

  181. DRAWMAP.map.addLayer(PLOT.plotLayer());//添加动态画图的图层
    182. 

  182. }, this);
    183. 

  183. },
    184. 

  184. plotLayer: function(){//返回layer图层
    185. 

  185. return new ol.layer.Vector({
    186. 

  186. source: PLOT.source,
    187. 

  187. style: new ol.style.Style({
    188. 

  188. fill: new ol.style.Fill({
    189. 

  189. color: 'rgba(255, 255, 255, 0.2)'
    190. 

  190. }),
    191. 

  191. stroke: new ol.style.Stroke({
    192. 

  192. color: '#ffcc33',
    193. 

  193. width: 2
    194. 

  194. }),
    195. 

  195. image: new ol.style.Circle({
    196. 

  196. radius: 7,
    197. 

  197. fill: new ol.style.Fill({
    198. 

  198. color: '#ffcc33'
    199. 

  199. })
    200. 

  200. })
    201. 

  201. })
    202. 

  202. });
    203. 

  203. }
    204. 

  204. }
    205. 



3、增加图层和弹出框


03增加图层和弹出框.html




    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title>03增加图层和弹出框</title>
    6. 

  6. <meta http-equiv="X-UA-Compatible" content="chrome=1">
    7. 

  7. <link href="css/common/ol.css" rel="stylesheet" type="text/css" />
    8. 

  8. <script type="text/javascript" src="js/common/ol.js"></script>
    9. 

  9. <script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
    10. 

  10. <script type="text/javascript" src="js/03增加图层和弹出框/MYMap.js"></script>
    11. 

  11. </head>
    12. 

  12. <style>
    13. 

  13. .ol-popup {
    14. 

  14. position: absolute;
    15. 

  15. background-color: white;
    16. 

  16. padding-top: 5px;
    17. 

  17. padding-left: 10px;
    18. 

  18. padding-right: 10px;
    19. 

  19. padding-bottom: 10px;
    20. 

  20. border-radius: 2px;
    21. 

  21. border: 1px solid #cccccc;
    22. 

  22. bottom: 12px;
    23. 

  23. left: -50px;
    24. 

  24. }
    25. 

  25. .ol-popup:after,
    26. 

  26. .ol-popup:before {
    27. 

  27. top: 100%;
    28. 

  28. border: solid transparent;
    29. 

  29. content: " ";
    30. 

  30. position: absolute;
    31. 

  31. }
    32. 

  32. /*border-top-color：用于制作三角形*/
    33. 

  33. .ol-popup:after {
    34. 

  34. border-top-color: white;
    35. 

  35. border-width: 10px;
    36. 

  36. left: 48px;
    37. 

  37. margin-left: -10px;
    38. 

  38. }
    39. 

  39. .ol-popup:before {
    40. 

  40. border-top-color: #cccccc;
    41. 

  41. border-width: 11px;
    42. 

  42. left: 48px;
    43. 

  43. margin-left: -11px;
    44. 

  44. }
    45. 

  45. .ol-popup-title {
    46. 

  46. border-bottom: 1px solid #cccccc;
    47. 

  47. padding-bottom: 3px;
    48. 

  48. }
    49. 

  49. .ol-popup-content {
    50. 

  50. margin-top: 8px;
    51. 

  51. width:260px;
    52. 

  52. }
    53. 

  53. .ol-popup-closer {
    54. 

  54. text-decoration: none;
    55. 

  55. position: absolute;
    56. 

  56. top: 5px;
    57. 

  57. right: 10px;
    58. 

  58. }
    59. 

  59. .ol-popup-closer:after {
    60. 

  60. content: "✖";
    61. 

  61. }
    62. 

  62. #moveTaxi{
    63. 

  63. position: absolute;
    64. 

  64. top: 5%;
    65. 

  65. left: 5%;
    66. 

  66. background-color: rgba(0, 60, 136, .5);
    67. 

  67. color: white;
    68. 

  68. }
    69. 

  69. #moveTaxi:hover{
    70. 

  70. cursor: pointer;
    71. 

  71. }
    72. 

  72. </style>
    73. 

  73. <script>
    74. 

  74. /**
    75. 

  75. * 地图的底图服务模块
    76. 

  76. */
    77. 

  77. var map_source = "wmts"; //地图的服务类型
    78. 

  78. var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
    79. 

  79. //map_url此处使用的是【Portable Basemap Server】作为地图服务
    80. 

  80. var map_url = "http://localhost:7080/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
    81. 

  81. //var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
    82. 

  82. var map_zoom = 15; //初始化地图缩放级别
    83. 

  83. var map_minZoom = 14; //地图最小缩放级别
    84. 

  84. var map_maxZoom = 20; //地图最大缩放级别
    85. 

  85. var map_x = 11557761.4071486; //地图x坐标（此处以兰州地图作为中心点）
    86. 

  86. var map_y = 4307993.90607275; //地图y坐标（此处以兰州地图作为中心点）
    87. 

  87. $(document).ready(function() {
    88. 

  88. var baseLayer = new ol.layer.Tile({
    89. 

  89. opacity: 1.0,
    90. 

  90. source: new ol.source.XYZ({
    91. 

  91. url: map_url
    92. 

  92. })
    93. 

  93. });
    94. 

  94. if(baseLayer) {
    95. 

  95. var config = {
    96. 

  96. center: [map_x, map_y],
    97. 

  97. zoom: map_zoom,
    98. 

  98. maxZoom: map_maxZoom,
    99. 

  99. minZoom: map_minZoom
    100. 

  100. };
    101. 

  101. //实例化标绘地图
    102. 

  102. MYMAP.init(baseLayer, config);
    103. 

  103. }
    104. 

  104. //一定要把坐标从字符串类型转换为float类型
    105. 

  105. var peopleLng = parseFloat("11557866.6091486");
    106. 

  106. var peopleLat = parseFloat("4307896.40907275");
    107. 

  107. var peoplePoint = new ol.geom.Point([peopleLng, peopleLat]);
    108. 

  108. var projection = MYMAP.map.getView().getProjection();
    109. 

  109. var peopleFeature = new ol.Feature({
    110. 

  110. geometry: peoplePoint,
    111. 

  111. labelPoint: peoplePoint,
    112. 

  112. name: "people"
    113. 

  113. });
    114. 

  114. peopleFeature.set("res_type", "people"); //设置坐标点的图标
    115. 

  115. peopleFeature.set("name", "people");
    116. 

  116. peopleFeature.setId("people2017010720");
    117. 

  117. MYMAP.vectorSource.addFeature(peopleFeature);
    118. 

  118. //一定要把坐标从字符串类型转换为float类型
    119. 

  119. var taxiLng = parseFloat("11556866.6091486");
    120. 

  120. var taxiLat = parseFloat("4307696.40907275");
    121. 

  121. var taxiPoint = new ol.geom.Point([taxiLng, taxiLat]);
    122. 

  122. var projection = MYMAP.map.getView().getProjection();
    123. 

  123. var taxiFeature = new ol.Feature({
    124. 

  124. geometry: taxiPoint,
    125. 

  125. labelPoint: taxiPoint,
    126. 

  126. name: "taxi"
    127. 

  127. });
    128. 

  128. taxiFeature.set("res_type", "taxi"); //设置坐标点的图标
    129. 

  129. taxiFeature.set("name", "taxi");
    130. 

  130. taxiFeature.setId("taxi2017010720");
    131. 

  131. MYMAP.vectorSource.addFeature(taxiFeature);
    132. 

  132. //一定要把坐标从字符串类型转换为float类型
    133. 

  133. var videoLng = parseFloat("11557761.4071486");
    134. 

  134. var videoLat = parseFloat("4307993.90607275");
    135. 

  135. var videoPoint = new ol.geom.Point([videoLng, videoLat]);
    136. 

  136. var projection = MYMAP.map.getView().getProjection();
    137. 

  137. var videoFeature = new ol.Feature({
    138. 

  138. geometry: videoPoint,
    139. 

  139. labelPoint: videoPoint,
    140. 

  140. name: "video"
    141. 

  141. });
    142. 

  142. videoFeature.set("res_type", "video"); //设置坐标点的图标
    143. 

  143. videoFeature.set("name", "video");
    144. 

  144. videoFeature.setId("video2017010720");
    145. 

  145. MYMAP.vectorSource.addFeature(videoFeature);
    146. 

  146. MYMAP.map.getView().setCenter(videoFeature.getGeometry().getCoordinates());
    147. 

  147. // 弹出窗口关闭
    148. 

  148. $("#popup-closer").click(function(){
    149. 

  149. MYMAP.overlay.setPosition(undefined);
    150. 

  150. });
    151. 

  151. //移动车辆
    152. 

  152. $("#moveTaxi").click(function(){
    153. 

  153. var newPoint = new ol.geom.Point([11556866.6091486,4308696.40907275]);
    154. 

  154. var newFeature = MYMAP.vectorSource.getFeatureById("taxi2017010720");
    155. 

  155. if(newFeature){
    156. 

  156. newFeature.setGeometry(newPoint);//更新图层坐标
    157. 

  157. if(MYMAP.overlayID == "taxi2017010720"){
    158. 

  158. //定位弹出框的中心点-开始
    159. 

  159. var geometry = newFeature.getGeometry();
    160. 

  160. var coord = geometry.getCoordinates();
    161. 

  161. MYMAP.overlay.setPosition(coord);
    162. 

  162. //定位弹出框的中心点-结束
    163. 

  163. }
    164. 

  164. MYMAP.map.getView().setCenter(newFeature.getGeometry().getCoordinates());//重新定位地图的中心點
    165. 

  165. }
    166. 

  166. });
    167. 

  167. });
    168. 

  168. </script>
    169. 

  169. <body>
    170. 

  170. <!-- 地图对象 -->
    171. 

  171. <div id="map" class="map">
    172. 

  172. <div id="popup" class="ol-popup">
    173. 

  173. <div id="popup-title" class="ol-popup-title"></div>
    174. 

  174. <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    175. 

  175. <div id="popup-content" class="ol-popup-content"></div>
    176. 

  176. </div>
    177. 

  177. </div>
    178. 

  178. <!--图层移动-->
    179. 

  179. <button id="moveTaxi">移动车辆</button>
    180. 

  180. </body>
    181. 

  181. </html>
    182. 



MYMap.js




    

  1. var MYMAP = {
    2. 

  2. map: null, // 地图对象
    3. 

  3. overlayID: null,//作为一个全局变量，用于保存弹出对象的featureid
    4. 

  4. vectorSource: new ol.source.Vector({
    5. 

  5. wrapX: false
    6. 

  6. }),
    7. 

  7. vectorLayer: null,
    8. 

  8. icon: {
    9. 

  9. "people": "images/people.png",
    10. 

  10. "taxi": "images/taxi.png",
    11. 

  11. "video": "images/video.png"
    12. 

  12. },
    13. 

  13. // 图上资源样式处理
    14. 

  14. getStyle: function(_feature, _resolution) {
    15. 

  15. return [new ol.style.Style({
    16. 

  16. stroke: new ol.style.Stroke({
    17. 

  17. color: 'red',
    18. 

  18. width: 2
    19. 

  19. }),
    20. 

  20. image: new ol.style.Icon({
    21. 

  21. offset: [0, 0],
    22. 

  22. opacity: 1.0,
    23. 

  23. rotateWithView: true,
    24. 

  24. rotation: 0.0,
    25. 

  25. scale: 1.0,
    26. 

  26. size: [40, 40],
    27. 

  27. src: MYMAP.icon[_feature.get("res_type")] //根據res_type的值来决定显示的图标
    28. 

  28. })
    29. 

  29. })];
    30. 

  30. },
    31. 

  31. init: function(_layer, _config) {
    32. 

  32. MYMAP.vectorLayer = new ol.layer.Vector({
    33. 

  33. source: MYMAP.vectorSource,
    34. 

  34. style: MYMAP.getStyle,
    35. 

  35. zIndex: 1000
    36. 

  36. });
    37. 

  37. // 初始弹出窗口对象
    38. 

  38. MYMAP.overlay = new ol.Overlay(({
    39. 

  39. element: document.getElementById("popup"),
    40. 

  40. offset: [-5, -15],
    41. 

  41. positioning: "center-right",
    42. 

  42. autoPan: true,
    43. 

  43. autoPanAnimation: {
    44. 

  44. duration: 250
    45. 

  45. }
    46. 

  46. }));
    47. 

  47. // 初始地图对象
    48. 

  48. MYMAP.map = new ol.Map({
    49. 

  49. layers: [_layer],
    50. 

  50. loadTilesWhileAnimating: true,
    51. 

  51. target: document.getElementById("map"),
    52. 

  52. controls: ol.control.defaults({
    53. 

  53. attributionOptions: ({
    54. 

  54. collapsible: false
    55. 

  55. })
    56. 

  56. }),
    57. 

  57. overlays: [MYMAP.overlay],
    58. 

  58. view: new ol.View({
    59. 

  59. center: _config.center,
    60. 

  60. zoom: _config.zoom,
    61. 

  61. maxZoom: _config.maxZoom,
    62. 

  62. minZoom: _config.minZoom,
    63. 

  63. }),
    64. 

  64. interactions: ol.interaction.defaults({
    65. 

  65. doubleClickZoom: false
    66. 

  66. })
    67. 

  67. });
    68. 

  68. MYMAP.map.addLayer(MYMAP.vectorLayer);
    69. 

  69. //初始化地图上的点击事件
    70. 

  70. MYMAP.map.on("click", function(_e) {
    71. 

  71. var feature = MYMAP.map.forEachFeatureAtPixel(_e.pixel, function(
    72. 

  72. feature, layer) {
    73. 

  73. return feature;
    74. 

  74. });
    75. 

  75. MYMAP.popup(feature);
    76. 

  76. });
    77. 

  77. },
    78. 

  78. //资源弹出窗
    79. 

  79. popup: function(_feature) {
    80. 

  80. if(_feature) {
    81. 

  81. var type = _feature.get("name") ? _feature.get("name") : "unknow";
    82. 

  82. //定位弹出框的中心点-开始
    83. 

  83. var geometry = _feature.getGeometry();
    84. 

  84. var coord = geometry.getCoordinates();
    85. 

  85. MYMAP.overlay.setPosition(coord);
    86. 

  86. //定位弹出框的中心点-结束
    87. 

  87. MYMAP.overlayID = _feature.getId();
    88. 

  88. var titleHtml = "",
    89. 

  89. html = "";
    90. 

  90. switch(type) {
    91. 

  91. case "people":
    92. 

  92. var titleHtml = "人员信息：";
    93. 

  93. titleHtml += " ";
    94. 

  94. titleHtml += "";
    95. 

  95. $("#popup-title").html(titleHtml);
    96. 

  96. html += "人员编号：" + _feature.getId();
    97. 

  97. $("#popup-content").html(html);
    98. 

  98. break;
    99. 

  99. case "taxi":
    100. 

  100. var titleHtml = "出租车信息：";
    101. 

  101. titleHtml += " ";
    102. 

  102. titleHtml += "";
    103. 

  103. $("#popup-title").html(titleHtml);
    104. 

  104. html += "出租车编号：" + _feature.getId();
    105. 

  105. $("#popup-content").html(html);
    106. 

  106. break;
    107. 

  107. case "video":
    108. 

  108. var titleHtml = "摄像头信息：";
    109. 

  109. titleHtml += " ";
    110. 

  110. titleHtml += "";
    111. 

  111. $("#popup-title").html(titleHtml);
    112. 

  112. html += "摄像机编号：" + _feature.getId();
    113. 

  113. $("#popup-content").html(html);
    114. 

  114. break;
    115. 

  115. }
    116. 

  116. }
    117. 

  117. }
    118. 

  118. }
    119. 



4、手工定位


04手工定位.html




    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title>04手工定位</title>
    6. 

  6. <meta http-equiv="X-UA-Compatible" content="chrome=1">
    7. 

  7. <link href="css/common/ol.css" rel="stylesheet" type="text/css" />
    8. 

  8. <link href="css/04手工定位/map.css" rel="stylesheet" type="text/css" />
    9. 

  9. <script type="text/javascript" src="js/common/ol.js"></script>
    10. 

  10. <script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
    11. 

  11. <script type="text/javascript" src="js/04手工定位/MYMap.js" ></script>
    12. 

  12. <script type="text/javascript" src="js/04手工定位/marker.js" ></script>
    13. 

  13. </head>
    14. 

  14. <script>
    15. 

  15. /**
    16. 

  16. * 地图的底图服务模块
    17. 

  17. */
    18. 

  18. var map_source = "wmts"; //地图的服务类型
    19. 

  19. var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
    20. 

  20. //map_url此处使用的是【Portable Basemap Server】作为地图服务
    21. 

  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. 

  22. //var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
    23. 

  23. var map_zoom = 15; //初始化地图缩放级别
    24. 

  24. var map_minZoom = 14; //地图最小缩放级别
    25. 

  25. var map_maxZoom = 20; //地图最大缩放级别
    26. 

  26. var map_x = 11557761.4071486; //地图x坐标（此处以兰州地图作为中心点）
    27. 

  27. var map_y = 4307993.90607275; //地图y坐标（此处以兰州地图作为中心点）
    28. 

  28. $(document).ready(function() {
    29. 

  29. var baseLayer = new ol.layer.Tile({
    30. 

  30. opacity: 1.0,
    31. 

  31. source: new ol.source.XYZ({
    32. 

  32. url: map_url
    33. 

  33. })
    34. 

  34. });
    35. 

  35. if(baseLayer) {
    36. 

  36. var config = {
    37. 

  37. center: [map_x, map_y],
    38. 

  38. zoom: map_zoom,
    39. 

  39. maxZoom: map_maxZoom,
    40. 

  40. minZoom: map_minZoom
    41. 

  41. };
    42. 

  42. //实例化标绘地图
    43. 

  43. MYMAP.init(baseLayer, config);
    44. 

  44. }
    45. 

  45. //手工定位
    46. 

  46. $("#manualPosition").click(function(){
    47. 

  47. MARKER.marker();
    48. 

  48. });
    49. 

  49. });
    50. 

  50. </script>
    51. 

  51. <body>
    52. 

  52. <!-- 地图对象 -->
    53. 

  53. <div id="map" class="map"></div>
    54. 

  54. <!--手工定位-->
    55. 

  55. <button id="manualPosition">手工定位</button>
    56. 

  56. </body>
    57. 

  57. </html>
    58. 



map.css




    

  1. #manualPosition {
    2. 

  2. position: absolute;
    3. 

  3. top: 5%;
    4. 

  4. left: 5%;
    5. 

  5. background-color: rgba(0, 60, 136, .5);
    6. 

  6. color: white;
    7. 

  7. }
    8. 

  8. #manualPosition:hover {
    9. 

  9. cursor: pointer;
    10. 

  10. }
    11. 

  11. .tooltip {
    12. 

  12. position: relative;
    13. 

  13. background: rgba(0, 0, 0, 0.5);
    14. 

  14. border-radius: 4px;
    15. 

  15. color: white;
    16. 

  16. padding: 4px 8px;
    17. 

  17. opacity: 0.7;
    18. 

  18. white-space: nowrap;
    19. 

  19. }
    20. 

  20. .tooltip-measure {
    21. 

  21. opacity: 1;
    22. 

  22. font-weight: bold;
    23. 

  23. }
    24. 

  24. .tooltip-static {
    25. 

  25. background-color: #ffcc33;
    26. 

  26. color: black;
    27. 

  27. border: 1px solid white;
    28. 

  28. font-weight: bold;
    29. 

  29. }
    30. 

  30. .tooltip-measure:before, .tooltip-static:before {
    31. 

  31. border-top: 6px solid rgba(0, 0, 0, 0.5);
    32. 

  32. border-right: 6px solid transparent;
    33. 

  33. border-left: 6px solid transparent;
    34. 

  34. content: "";
    35. 

  35. position: absolute;
    36. 

  36. bottom: -6px;
    37. 

  37. margin-left: -7px;
    38. 

  38. left: 50%;
    39. 

  39. }
    40. 

  40. .tooltip-static:before {
    41. 

  41. border-top-color: #ffcc33;
    42. 

  42. }
    43. 

  43. .tooltip-static .show{
    44. 

  44. display:block;
    45. 

  45. position: absolute;
    46. 

  46. right:0px;
    47. 

  47. border:1px;
    48. 

  48. border-color:#000000;
    49. 

  49. border-radius:2px;
    50. 

  50. top:-3px;
    51. 

  51. cursor:pointer;
    52. 

  52. }
    53. 

  53. .tooltip-static .show:HOVER{
    54. 

  54. background: gray;
    55. 

  55. }
    56. 



MYMAP.js




    

  1. var MYMAP = {
    2. 

  2. map: null, // 地图对象
    3. 

  3. init: function(_layer, _config) {
    4. 

  4. // 初始地图对象
    5. 

  5. MYMAP.map = new ol.Map({
    6. 

  6. layers: [_layer],
    7. 

  7. loadTilesWhileAnimating: true,
    8. 

  8. target: document.getElementById("map"),
    9. 

  9. controls: ol.control.defaults({
    10. 

  10. attributionOptions: ({
    11. 

  11. collapsible: false
    12. 

  12. })
    13. 

  13. }),
    14. 

  14. view: new ol.View({
    15. 

  15. center: _config.center,
    16. 

  16. zoom: _config.zoom,
    17. 

  17. maxZoom: _config.maxZoom,
    18. 

  18. minZoom: _config.minZoom,
    19. 

  19. }),
    20. 

  20. interactions: ol.interaction.defaults({
    21. 

  21. doubleClickZoom: false
    22. 

  22. })
    23. 

  23. });
    24. 

  24. //添加手工定位标记图层
    25. 

  25. MYMAP.map.addLayer(MARKER.markLayer());
    26. 

  26. }
    27. 

  27. }
    28. 



marker.js【重点】




    

  1. /**
    2. 

  2. * 手工定位
    3. 

  3. */
    4. 

  4. var MARKER = {
    5. 

  5. //距离确认数据源
    6. 

  6. source: new ol.source.Vector(),
    7. 

  7. draw: null,
    8. 

  8. closeElement: null, //关闭按钮
    9. 

  9. spanElement: null, //显示数据（距离或是面积）
    10. 

  10. measureTooltipElement: null,
    11. 

  11. measureTooltip: null,
    12. 

  12. //距离确认
    13. 

  13. marker: function() {
    14. 

  14. MARKER.clear();
    15. 

  15. if(MARKER.draw) {
    16. 

  16. MYMAP.map.removeInteraction(MARKER.draw);
    17. 

  17. MARKER.draw = null;
    18. 

  18. }
    19. 

  19. MARKER.draw = new ol.interaction.Draw({
    20. 

  20. source: MARKER.source,
    21. 

  21. type: "Point",
    22. 

  22. style: new ol.style.Style({
    23. 

  23. image: new ol.style.Icon({
    24. 

  24. offset: [0, 0],
    25. 

  25. opacity: 1.0,
    26. 

  26. rotateWithView: true,
    27. 

  27. rotation: 0.0,
    28. 

  28. scale: 1.0,
    29. 

  29. size: [32, 32],
    30. 

  30. src: "images/icons/marker.png"
    31. 

  31. })
    32. 

  32. })
    33. 

  33. });
    34. 

  34. MARKER.draw.on("drawstart", function(evt) {
    35. 

  35. }, this);
    36. 

  36. //手工定位结束后展示坐标信息
    37. 

  37. MARKER.draw.on("drawend", function(evt) {
    38. 

  38. MARKER.measureTooltipElement.className = 'tooltip tooltip-static';
    39. 

  39. var feature = evt.feature;
    40. 

  40. MARKER.sketch = null;
    41. 

  41. MARKER.measureTooltipElement = null;
    42. 

  42. MARKER.closeElement.style.display = 'block';
    43. 

  43. MARKER.closeElement.className = 'show';
    44. 

  44. MYMAP.map.un("pointermove", MARKER.pointerMoveHandler);
    45. 

  45. MYMAP.map.removeInteraction(MARKER.draw);
    46. 

  46. var posXY = document.getElementById("poxXY").innerText;
    47. 

  47. var posXYArray = posXY.split(",");
    48. 

  48. var XPos = posXYArray[0];
    49. 

  49. var YPos = posXYArray[1];
    50. 

  50. }, this);
    51. 

  51. MYMAP.map.addInteraction(MARKER.draw);
    52. 

  52. MARKER.createMeasureTooltip(); //创建显示信息的div
    53. 

  53. MYMAP.map.on("pointermove", MARKER.pointerMoveHandler);
    54. 

  54. },
    55. 

  55. //清除所有数据
    56. 

  56. clear: function() {
    57. 

  57. MARKER.source.clear();
    58. 

  58. MYMAP.map.removeOverlay(MARKER.measureTooltip);
    59. 

  59. MYMAP.map.un("pointermove", MARKER.pointerMoveHandler);
    60. 

  60. },
    61. 

  61. //创建显示信息的div
    62. 

  62. createMeasureTooltip: function() {
    63. 

  63. if(MARKER.closeElement) {
    64. 

  64. MARKER.closeElement.parentNode.removeChild(MARKER.closeElement);
    65. 

  65. }
    66. 

  66. if(MARKER.measureTooltipElement) {
    67. 

  67. MARKER.measureTooltipElement.parentNode.removeChild(MARKER.measureTooltipElement);
    68. 

  68. }
    69. 

  69. MARKER.measureTooltipElement = document.createElement('div');
    70. 

  70. MARKER.spanElement = document.createElement("span");
    71. 

  71. MARKER.spanElement.id = "poxXY";
    72. 

  72. MARKER.closeElement = document.createElement('span'),
    73. 

  73. MARKER.closeElement.innerHTML = '✖';
    74. 

  74. MARKER.closeElement.style.display = 'none';
    75. 

  75. MARKER.closeElement.addEventListener('click', function() {
    76. 

  76. MARKER.clear();
    77. 

  77. }, false);
    78. 

  78. MARKER.measureTooltipElement.appendChild(MARKER.closeElement);
    79. 

  79. MARKER.measureTooltipElement.appendChild(MARKER.spanElement);
    80. 

  80. MARKER.measureTooltipElement.className = 'tooltip tooltip-measure';
    81. 

  81. MARKER.measureTooltip = new ol.Overlay({
    82. 

  82. element: MARKER.measureTooltipElement,
    83. 

  83. offset: [0, -25],
    84. 

  84. positioning: 'bottom-center'
    85. 

  85. });
    86. 

  86. MYMAP.map.addOverlay(MARKER.measureTooltip);
    87. 

  87. },
    88. 

  88. //鼠标移动事件
    89. 

  89. pointerMoveHandler: function(evt) {
    90. 

  90. if(evt.dragging) {
    91. 

  91. return;
    92. 

  92. }
    93. 

  93. var tooltipCoord = evt.coordinate;
    94. 

  94. var output = tooltipCoord
    95. 

  95. var msg = output[0].toFixed(6) + " , " + output[1].toFixed(6);
    96. 

  96. MARKER.spanElement.innerHTML = msg;
    97. 

  97. MARKER.measureTooltip.setPosition(evt.coordinate);
    98. 

  98. },
    99. 

  99. markLayer: function() {
    100. 

  100. return new ol.layer.Vector({
    101. 

  101. source: MARKER.source,
    102. 

  102. style: new ol.style.Style({
    103. 

  103. image: new ol.style.Icon({
    104. 

  104. offset: [0, 0],
    105. 

  105. opacity: 1.0,
    106. 

  106. rotateWithView: true,
    107. 

  107. rotation: 0.0,
    108. 

  108. scale: 1.0,
    109. 

  109. size: [32, 32],
    110. 

  110. src: "images/icons/marker.png"
    111. 

  111. })
    112. 

  112. })
    113. 

  113. });
    114. 

  114. }
    115. 

  115. }
    116. 



5、画三圈和计算距离


05画三圈和计算距离.html




    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title>05画三圈和计算距离</title>
    6. 

  6. <meta http-equiv="X-UA-Compatible" content="chrome=1">
    7. 

  7. <link href="css/common/ol.css" rel="stylesheet" type="text/css" />
    8. 

  8. <script type="text/javascript" src="js/common/ol.js"></script>
    9. 

  9. <script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
    10. 

  10. <script type="text/javascript" src="js/05画三圈和计算距离/MYMap.js" ></script>
    11. 

  11. </head>
    12. 

  12. <style>
    13. 

  13. .ol-popup {
    14. 

  14. position: absolute;
    15. 

  15. background-color: white;
    16. 

  16. padding-top: 5px;
    17. 

  17. padding-left: 10px;
    18. 

  18. padding-right: 10px;
    19. 

  19. padding-bottom: 10px;
    20. 

  20. border-radius: 2px;
    21. 

  21. border: 1px solid #cccccc;
    22. 

  22. bottom: 12px;
    23. 

  23. left: -50px;
    24. 

  24. }
    25. 

  25. .ol-popup:after,
    26. 

  26. .ol-popup:before {
    27. 

  27. top: 100%;
    28. 

  28. border: solid transparent;
    29. 

  29. content: " ";
    30. 

  30. position: absolute;
    31. 

  31. }
    32. 

  32. /*border-top-color：用于制作三角形*/
    33. 

  33. .ol-popup:after {
    34. 

  34. border-top-color: white;
    35. 

  35. border-width: 10px;
    36. 

  36. left: 48px;
    37. 

  37. margin-left: -10px;
    38. 

  38. }
    39. 

  39. .ol-popup:before {
    40. 

  40. border-top-color: #cccccc;
    41. 

  41. border-width: 11px;
    42. 

  42. left: 48px;
    43. 

  43. margin-left: -11px;
    44. 

  44. }
    45. 

  45. .ol-popup-title {
    46. 

  46. border-bottom: 1px solid #cccccc;
    47. 

  47. padding-bottom: 3px;
    48. 

  48. }
    49. 

  49. .ol-popup-content {
    50. 

  50. margin-top: 8px;
    51. 

  51. width:260px;
    52. 

  52. }
    53. 

  53. .ol-popup-closer {
    54. 

  54. text-decoration: none;
    55. 

  55. position: absolute;
    56. 

  56. top: 5px;
    57. 

  57. right: 10px;
    58. 

  58. }
    59. 

  59. .ol-popup-closer:after {
    60. 

  60. content: "✖";
    61. 

  61. }
    62. 

  62. </style>
    63. 

  63. <script>
    64. 

  64. /**
    65. 

  65. * 地图的底图服务模块
    66. 

  66. */
    67. 

  67. var map_source = "wmts"; //地图的服务类型
    68. 

  68. var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
    69. 

  69. //map_url此处使用的是【Portable Basemap Server】作为地图服务
    70. 

  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. 

  71. //var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
    72. 

  72. var map_zoom = 17; //初始化地图缩放级别
    73. 

  73. var map_minZoom = 14; //地图最小缩放级别
    74. 

  74. var map_maxZoom = 20; //地图最大缩放级别
    75. 

  75. var map_x = 11557761.4071486; //地图x坐标（此处以兰州地图作为中心点）
    76. 

  76. var map_y = 4307993.90607275; //地图y坐标（此处以兰州地图作为中心点）
    77. 

  77. $(document).ready(function() {
    78. 

  78. var baseLayer = new ol.layer.Tile({
    79. 

  79. opacity: 1.0,
    80. 

  80. source: new ol.source.XYZ({
    81. 

  81. url: map_url
    82. 

  82. })
    83. 

  83. });
    84. 

  84. if(baseLayer) {
    85. 

  85. var config = {
    86. 

  86. center: [map_x, map_y],
    87. 

  87. zoom: map_zoom,
    88. 

  88. maxZoom: map_maxZoom,
    89. 

  89. minZoom: map_minZoom
    90. 

  90. };
    91. 

  91. //实例化地图
    92. 

  92. MYMAP.init(baseLayer, config);
    93. 

  93. //画三圈
    94. 

  94. MYMAP.dispose();
    95. 

  95. }
    96. 

  96. // 弹出窗口关闭
    97. 

  97. $("#popup-closer").click(function(){
    98. 

  98. MYMAP.overlay.setPosition(undefined);
    99. 

  99. });
    100. 

  100. });
    101. 

  101. </script>
    102. 

  102. <body>
    103. 

  103. <!-- 地图对象 -->
    104. 

  104. <div id="map" class="map">
    105. 

  105. <div id="popup" class="ol-popup">
    106. 

  106. <div id="popup-title" class="ol-popup-title"></div>
    107. 

  107. <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    108. 

  108. <div id="popup-content" class="ol-popup-content"></div>
    109. 

  109. </div>
    110. 

  110. </div>
    111. 

  111. </body>
    112. 

  112. </html>
    113. 



MYMAP.js




    

  1. var MYMAP = {
    2. 

  2. map: null, // 地图对象
    3. 

  3. overlay: null, // 地图弹出信息窗口
    4. 

  4. sphere: new ol.Sphere(6378137), //6378137赤道半径，用于计算距离
    5. 

  5. vectorSource: new ol.source.Vector({
    6. 

  6. wrapX: false
    7. 

  7. }),
    8. 

  8. vectorLayer: null,
    9. 

  9. icon: {
    10. 

  10. "people": "images/people.png",
    11. 

  11. "taxi": "images/taxi.png",
    12. 

  12. "video": "images/video.png"
    13. 

  13. },
    14. 

  14. // 图上资源样式处理
    15. 

  15. getStyle: function(_feature, _resolution) {
    16. 

  16. return [new ol.style.Style({
    17. 

  17. stroke: new ol.style.Stroke({
    18. 

  18. color: 'red',
    19. 

  19. width: 2
    20. 

  20. }),
    21. 

  21. image: new ol.style.Icon({
    22. 

  22. offset: [0, 0],
    23. 

  23. opacity: 1.0,
    24. 

  24. rotateWithView: true,
    25. 

  25. rotation: 0.0,
    26. 

  26. scale: 1.0,
    27. 

  27. size: [40, 40],
    28. 

  28. src: MYMAP.icon[_feature.get("res_type")] //根據res_type的值来决定显示的图标
    29. 

  29. })
    30. 

  30. })];
    31. 

  31. },
    32. 

  32. init: function(_layer, _config) {
    33. 

  33. MYMAP.vectorLayer = new ol.layer.Vector({
    34. 

  34. source: MYMAP.vectorSource,
    35. 

  35. style: MYMAP.getStyle,
    36. 

  36. zIndex: 1000
    37. 

  37. });
    38. 

  38. // 初始弹出窗口对象
    39. 

  39. MYMAP.overlay = new ol.Overlay(({
    40. 

  40. element: document.getElementById("popup"),
    41. 

  41. offset: [-5, -15],
    42. 

  42. positioning: "center-right",
    43. 

  43. autoPan: true,
    44. 

  44. autoPanAnimation: {
    45. 

  45. duration: 250
    46. 

  46. }
    47. 

  47. }));
    48. 

  48. // 初始地图对象
    49. 

  49. MYMAP.map = new ol.Map({
    50. 

  50. layers: [_layer],
    51. 

  51. loadTilesWhileAnimating: true,
    52. 

  52. target: document.getElementById("map"),
    53. 

  53. controls: ol.control.defaults({
    54. 

  54. attributionOptions: ({
    55. 

  55. collapsible: false
    56. 

  56. })
    57. 

  57. }),
    58. 

  58. overlays: [MYMAP.overlay],
    59. 

  59. view: new ol.View({
    60. 

  60. center: _config.center,
    61. 

  61. zoom: _config.zoom,
    62. 

  62. maxZoom: _config.maxZoom,
    63. 

  63. minZoom: _config.minZoom,
    64. 

  64. }),
    65. 

  65. interactions: ol.interaction.defaults({
    66. 

  66. doubleClickZoom: false
    67. 

  67. })
    68. 

  68. });
    69. 

  69. MYMAP.map.addLayer(MYMAP.vectorLayer);
    70. 

  70. //初始化地图上的点击事件
    71. 

  71. MYMAP.map.on("click", function(_e) {
    72. 

  72. var feature = MYMAP.map.forEachFeatureAtPixel(_e.pixel, function(
    73. 

  73. feature, layer) {
    74. 

  74. return feature;
    75. 

  75. });
    76. 

  76. MYMAP.popup(feature);
    77. 

  77. });
    78. 

  78. },
    79. 

  79. //资源弹出窗
    80. 

  80. popup: function(_feature) {
    81. 

  81. if(_feature) {
    82. 

  82. var type = _feature.get("name") ? _feature.get("name") : "unknow";
    83. 

  83. //定位弹出框的中心点-开始
    84. 

  84. var geometry = _feature.getGeometry();
    85. 

  85. var coord = geometry.getCoordinates();
    86. 

  86. MYMAP.overlay.setPosition(coord);
    87. 

  87. //定位弹出框的中心点-结束
    88. 

  88. var titleHtml = "",
    89. 

  89. html = "";
    90. 

  90. switch(type) {
    91. 

  91. case "people":
    92. 

  92. var titleHtml = "人员信息：";
    93. 

  93. titleHtml += " ";
    94. 

  94. titleHtml += "";
    95. 

  95. $("#popup-title").html(titleHtml);
    96. 

  96. html += "人员坐标：" + coord;
    97. 

  97. var distance = MYMAP.distance([11557761.4071486, 4307993.90607275], coord);
    98. 

  98. html += "与出租车（中心点）距离为：" + distance;
    99. 

  99. $("#popup-content").html(html);
    100. 

  100. break;
    101. 

  101. case "taxi":
    102. 

  102. var titleHtml = "出租车信息：";
    103. 

  103. titleHtml += " ";
    104. 

  104. titleHtml += "";
    105. 

  105. $("#popup-title").html(titleHtml);
    106. 

  106. html += "出租车坐标为：" + coord;
    107. 

  107. $("#popup-content").html(html);
    108. 

  108. break;
    109. 

  109. }
    110. 

  110. }
    111. 

  111. },
    112. 

  112. //画三圈
    113. 

  113. dispose: function() {
    114. 

  114. var point = new ol.geom.Point([11557761.4071486, 4307993.90607275]);
    115. 

  115. var taxiFeature = new ol.Feature({
    116. 

  116. geometry: point,
    117. 

  117. name: "taxi"
    118. 

  118. });
    119. 

  119. taxiFeature.set("res_type", "taxi");
    120. 

  120. MYMAP.vectorSource.addFeature(taxiFeature);
    121. 

  121. //画三圈开始
    122. 

  122. //300： 代表圆的半径
    123. 

  123. var circle300 = new ol.geom.Circle([11557761.4071486, 4307993.90607275], 300);
    124. 

  124. var circle200 = new ol.geom.Circle([11557761.4071486, 4307993.90607275], 200);
    125. 

  125. var circle100 = new ol.geom.Circle([11557761.4071486, 4307993.90607275], 100);
    126. 

  126. var circleFeature300 = new ol.Feature({
    127. 

  127. geometry: circle300
    128. 

  128. });
    129. 

  129. var style300 = new ol.style.Style({
    130. 

  130. fill: new ol.style.Fill({
    131. 

  131. color: 'rgba(50, 205, 50, 0.3)'
    132. 

  132. }),
    133. 

  133. stroke: new ol.style.Stroke({
    134. 

  134. color: 'rgba(50, 205, 50, 0.6)',
    135. 

  135. width: 2
    136. 

  136. }),
    137. 

  137. image: new ol.style.Circle({
    138. 

  138. radius: 7,
    139. 

  139. fill: new ol.style.Fill({
    140. 

  140. color: '#ffcc33'
    141. 

  141. })
    142. 

  142. })
    143. 

  143. });
    144. 

  144. circleFeature300.setStyle(style300);
    145. 

  145. MYMAP.vectorSource.addFeature(circleFeature300);
    146. 

  146. var circleFeature200 = new ol.Feature({
    147. 

  147. geometry: circle200
    148. 

  148. });
    149. 

  149. var style200 = new ol.style.Style({
    150. 

  150. fill: new ol.style.Fill({
    151. 

  151. color: 'rgba(255, 165, 0, 0.3)'
    152. 

  152. }),
    153. 

  153. stroke: new ol.style.Stroke({
    154. 

  154. color: 'rgba(255, 165, 0, 0.6)',
    155. 

  155. width: 2
    156. 

  156. }),
    157. 

  157. image: new ol.style.Circle({
    158. 

  158. radius: 7,
    159. 

  159. fill: new ol.style.Fill({
    160. 

  160. color: '#ffcc33'
    161. 

  161. })
    162. 

  162. })
    163. 

  163. });
    164. 

  164. circleFeature200.setStyle(style200);
    165. 

  165. MYMAP.vectorSource.addFeature(circleFeature200);
    166. 

  166. var circleFeature100 = new ol.Feature({
    167. 

  167. geometry: circle100
    168. 

  168. });
    169. 

  169. var style100 = new ol.style.Style({
    170. 

  170. fill: new ol.style.Fill({
    171. 

  171. color: 'rgba(255, 0, 0, 0.3)'
    172. 

  172. }),
    173. 

  173. stroke: new ol.style.Stroke({
    174. 

  174. color: 'rgba(255, 0, 0, 0.6)',
    175. 

  175. width: 2
    176. 

  176. }),
    177. 

  177. image: new ol.style.Circle({
    178. 

  178. radius: 7,
    179. 

  179. fill: new ol.style.Fill({
    180. 

  180. color: '#ffcc33'
    181. 

  181. })
    182. 

  182. })
    183. 

  183. });
    184. 

  184. circleFeature100.setStyle(style100);
    185. 

  185. MYMAP.vectorSource.addFeature(circleFeature100);
    186. 

  186. //画三圈结束
    187. 

  187. var pan = ol.animation.pan({
    188. 

  188. duration: 500,
    189. 

  189. source: (MYMAP.map.getView().getCenter())
    190. 

  190. });
    191. 

  191. MYMAP.map.beforeRender(pan);//延迟上图
    192. 

  192. MYMAP.map.getView().setCenter(point.getCoordinates());
    193. 

  193. //初始化三圈内的坐标点，用于计算
    194. 

  194. var peopleFeature100 = new ol.Feature({
    195. 

  195. geometry: new ol.geom.Point([11557696.316242, 4307946.730094]),
    196. 

  196. name: "people"
    197. 

  197. });
    198. 

  198. peopleFeature100.set("res_type", "people");
    199. 

  199. MYMAP.vectorSource.addFeature(peopleFeature100);
    200. 

  200. var peopleFeature200 = new ol.Feature({
    201. 

  201. geometry: new ol.geom.Point([11557628.239513, 4307988.531594]),
    202. 

  202. name: "people"
    203. 

  203. });
    204. 

  204. peopleFeature200.set("res_type", "people");
    205. 

  205. MYMAP.vectorSource.addFeature(peopleFeature200);
    206. 

  206. var peopleFeature300 = new ol.Feature({
    207. 

  207. geometry: new ol.geom.Point([11557937.570612, 4308199.927751]),
    208. 

  208. name: "people"
    209. 

  209. });
    210. 

  210. peopleFeature300.set("res_type", "people");
    211. 

  211. MYMAP.vectorSource.addFeature(peopleFeature300);
    212. 

  212. },
    213. 

  213. //用于计算两个坐标点之间的距离
    214. 

  214. distance: function(point1, point2) {
    215. 

  215. return MYMAP.sphere.haversineDistance(point1, point2);
    216. 

  216. }
    217. 

  217. }
    218. 



6、三高四色地图


openLayer3地图的使用心得


06三高四色地图.html




    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title>06三高四色预警</title>
    6. 

  6. <meta http-equiv="X-UA-Compatible" content="chrome=1">
    7. 

  7. <link href="css/common/ol.css" rel="stylesheet" type="text/css" />
    8. 

  8. <script type="text/javascript" src="js/common/ol.js"></script>
    9. 

  9. <script type="text/javascript" src="js/common/jquery-1.11.2.min.js"></script>
    10. 

  10. </head>
    11. 

  11. <script>
    12. 

  12. /**
    13. 

  13. * 地图的底图服务模块
    14. 

  14. */
    15. 

  15. var map_source = "wmts"; //地图的服务类型
    16. 

  16. var map_projection = "EPSG:3857"; //地图坐标系（3857：墨卡托， 4326：经纬度）
    17. 

  17. //map_url此处使用的是【Portable Basemap Server】作为地图服务
    18. 

  18. var map_url = "http://localhost:8888/PBS/rest/services/lanzhou/MapServer/WMTS/tile/1.0.0/lanzhou/default/nativeTileMatrixSet/{z}/{y}/{x}.png";
    19. 

  19. //var map_dataLayer = "layer_tdt_sl"; //地图服务的图层
    20. 

  20. var map_zoom = 24; //初始化地图缩放级别
    21. 

  21. var map_minZoom = 24; //地图最小缩放级别
    22. 

  22. var map_maxZoom = 26; //地图最大缩放级别
    23. 

  23. var map_x = 113.21413; //地图x坐标（此处以兰州地图作为中心点）113.21413,38.09156
    24. 

  24. var map_y = 38.09156; //地图y坐标（此处以兰州地图作为中心点）
    25. 

  25. $(document).ready(function() {
    26. 

  26. var baseLayer = new ol.layer.Tile({
    27. 

  27. opacity: 1.0,
    28. 

  28. source: new ol.source.XYZ({
    29. 

  29. url: map_url
    30. 

  30. })
    31. 

  31. });
    32. 

  32. if(baseLayer) {
    33. 

  33. // 初始地图对象
    34. 

  34. var MYMAP = {
    35. 

  35. map: null, // 地图对象
    36. 

  36. vectorSource: new ol.source.Vector({
    37. 

  37. wrapX: false
    38. 

  38. }),
    39. 

  39. vectorLayer: null
    40. 

  40. }
    41. 

  41. MYMAP.map = new ol.Map({
    42. 

  42. layers: [baseLayer],
    43. 

  43. loadTilesWhileAnimating: true,
    44. 

  44. target: document.getElementById("map"),
    45. 

  45. controls: ol.control.defaults({
    46. 

  46. attributionOptions: ({
    47. 

  47. collapsible: false
    48. 

  48. })
    49. 

  49. }),
    50. 

  50. view: new ol.View({
    51. 

  51. center: [map_x, map_y],
    52. 

  52. zoom: map_zoom,
    53. 

  53. minZoom: map_minZoom,
    54. 

  54. maxZoom: map_maxZoom
    55. 

  55. }),
    56. 

  56. interactions: ol.interaction.defaults({
    57. 

  57. doubleClickZoom: false
    58. 

  58. })
    59. 

  59. });
    60. 

  60. MYMAP.vectorLayer = new ol.layer.Vector({
    61. 

  61. source: MYMAP.vectorSource,
    62. 

  62. zIndex: 1000
    63. 

  63. });
    64. 

  64. MYMAP.map.addLayer(MYMAP.vectorLayer);
    65. 

  65. }
    66. 

  66. var shapesArray = ['113.11466,38.42001,113.11438,38.42027','112.49035,37.12116,112.48808,37.12078'];
    67. 

  67. var nameArray = ['太原市','大同市','朔州市','忻州市','阳泉市','晋中市','长治市','晋城市','吕梁市','临汾市','运城市'];
    68. 

  68. for(var i = 0;i < shapesArray.length;i++){
    69. 

  69. var geoAr= shapesArray[i].split(",");
    70. 

  70. var geometryAr= [];
    71. 

  71. for(var j=0; j<geoAr.length; j+=2){
    72. 

  72. var lng= geoAr[j];
    73. 

  73. var lat= geoAr[j+1];
    74. 

  74. var point= [parseFloat(lng), parseFloat(lat)];
    75. 

  75. geometryAr.push(point);
    76. 

  76. }
    77. 

  77. var geometry= new ol.geom.Polygon([geometryAr]);//创建一个多边形对象
    78. 

  78. var feature= new ol.Feature({
    79. 

  79. geometry: geometry
    80. 

  80. });
    81. 

  81. var style = new ol.style.Style({
    82. 

  82. fill: new ol.style.Fill({//填充要素的样式
    83. 

  83. color: 'rgba(253, 64, 139, 0.6)'
    84. 

  84. }),
    85. 

  85. stroke: new ol.style.Stroke({//要素边界样式
    86. 

  86. color: 'blue',
    87. 

  87. width: 2
    88. 

  88. }),
    89. 

  89. text:new ol.style.Text({ //文字格式
    90. 

  90. textAlign:'center',
    91. 

  91. textBaseline:'middle',
    92. 

  92. font:'normal 14px 微软雅黑',
    93. 

  93. text: nameArray[i],
    94. 

  94. fill:new ol.style.Fill({color:'#000000'}),
    95. 

  95. stroke:new ol.style.Stroke({color:'#ffcc33',width:2})
    96. 

  96. })
    97. 

  97. });
    98. 

  98. feature.setStyle(style);
    99. 

  99. MYMAP.vectorSource.addFeature(feature);
    100. 

  100. }
    101. 

  101. });
    102. 

  102. </script>
    103. 

  103. <body>
    104. 

  104. <!-- 地图对象 -->
    105. 

  105. <div id="map" class="map"></div>
    106. 

  106. </body>
    107. 

  107. </html>
    108. 



附件源码：


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




相关文章