openlayers3加图标定位

        首先想说的是我也是刚刚接触openlayers,因为公司的需求所以开始学习openlayers,刚开始想学openlayers2,但是试过几次发现openlayers2的浏览效果不好,还存在一些浏览卡顿不流畅等问题,于是我转向openlayers3,发现openlayers3确实在效果上好了很多,但是openlayers3在很多语法方面做了较大调整。由于我也是刚刚接触ol3,所以做出的功能也许不多,但后续有新的进展我还会继续跟大家分享,今天就简单介绍一下怎么加载图标,并且定位到图标,还有就是让图标位于屏幕中央以及地图旋转这几个小功能。

       首先废话不多说,先上能够运行的代码。

首先是界面:

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
    <script src="http://openlayers.org/en/v3.16.0/build/ol.js"></script>
   
     <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script src="./js/base.js"></script>
    <script src="./js/ol-deps.js"></script>
    <script src="./js/bing-maps-require.js"></script>
    <style>
      a.skiplink {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
      }
      a.skiplink:focus {
        clip: auto;
        height: auto;
        width: auto;
        background-color: #fff;
        padding: 0.3em;
      }
      #map:focus {
        outline: #4A74A8 solid 0.15em;
      }
    </style>
  </head>
  <body>
    <div style="height:100%;width:100%;" id="map" class="map" tabindex="0"></div>
    <select id="select_ditu"><option value="天地图">天地图</option><option value="卫星图">卫星图</option></select>
 
    <input id="flyto" type="button" value="定位到中间"/>
 <script type="text/javascript" src="js/map_add.js"></script>
    <script type="text/javascript">
        $('#select_ditu').change(function(){
            changeLayer($('#select_ditu').val());
        });
    </script>
  </body>
</html>

然后,界面中我引用了map_add.js这个js文件,实现的所有功能全都写在这个文件内,代码如下:

    var attribution = new ol.Attribution({
        html: '? <a href="http://www.chinaonmap.com/map/index.html">���ͼ</a>'
    });
    var coor = ol.proj.transform([116.40969, 39.89945], 'EPSG:4326', 'EPSG:3857');
    var view = new ol.View({
        center: coor,
        zoom: 13
    });
    var layers=[];
    layers.push(
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    attributions: [attribution],
                    url: "http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
                })
            })
           );
      layers.push(new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: "http://t2.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}"
                })
            }));
       var styles = [
        'Road',
        'Aerial',
        'AerialWithLabels',
        'collinsBart',
        'ordnanceSurvey'
      ];
      var i, ii;
        for (i = 0, ii = styles.length; i < ii; ++i) {
          layers.push(new ol.layer.Tile({
            visible: false,
            preload: Infinity,
            source: new ol.source.BingMaps({
              key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
              imagerySet: 'Aerial'
              // use maxZoom 19 to see stretched tiles instead of the BingMaps
              // "no photos at this zoom level" tiles
              // maxZoom: 19
            })
          }));
        }
    var map = new ol.Map({
        layers: layers,
        loadTilesWhileInteracting: true,
        target: 'map',
        view: view
    });
    
    //layers[0].setVisible(false);
    //layers[1].setVisible(false);
    //layers[2].setVisible(true);
     layers[0].setVisible(true);
             layers[1].setVisible(true);
             for (var i=2; i < layers.length; i++) {
               layers[i].setVisible(false);
             };
    
    map.on('pointermove',function(e){
      var coord = e.coordinate;
      var degrees = ol.proj.transform(coord, 'EPSG:3857','EPSG:4326');
      var hdms = ol.coordinate.toStringXY(degrees, 8);
      //var element = overlay.getElement();
      //element.innerHTML = hdms;
      
      $('#longlat').text(hdms);
      //overlay.setPosition(coord);
      //map.addOverlay(overlay);
    });
    
   var addresult=addIcon([0,0]);
    
    map.on('click',function(e){
         var coord = e.coordinate;
         var degrees = ol.proj.transform(coord, 'EPSG:3857','EPSG:4326');
         //alert(degrees[0]);
         $('#text_longtitude').val(degrees[0]);
         $('#text_latitude').val(degrees[1]);
         //addresult.sourceVector.removeFeature(addresult.feature);
         //addresult=addIcon(coord);
         var geometry=new ol.geom.Point(coord);
         addresult.feature.setGeometry(geometry);
         addresult.point=coord;
    });
     
     
     function changeLayer(layer){
         if(layer=="天地图"){
             layers[0].setVisible(true);
             layers[1].setVisible(true);
             for (var i=2; i < layers.length; i++) {
               layers[i].setVisible(false);
             };
         }else if(layer=="卫星图"){
             layers[0].setVisible(false);
             layers[1].setVisible(false);
             for (var i=2; i < layers.length; i++) {
               layers[i].setVisible(true);
             };
         }
     }
     
     function addIcon(coord){
        var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(coord),
        name: 'Null Island',
        //population: 4000,
        //rainfall: 500
          });
    
          var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
              anchor: [0.5, 1],
              //anchorXUnits: 'fraction',
              //anchorYUnits: 'pixels',
              src: 'imgs/dingwei.png'
            }))
          });
          iconStyle.getImage().setScale(0.3);
          iconFeature.setStyle(iconStyle);
    
          var vectorSource = new ol.source.Vector({
            features: [iconFeature]
          });
    
          var vectorLayer = new ol.layer.Vector({
            source: vectorSource
          });
    
            map.addLayer(vectorLayer);   
            return {feature:iconFeature,layer:vectorLayer,sourceVector:vectorSource,point:coord};
     }
     
        function moveFeature(event) {
        var vectorContext = event.vectorContext;
        var frameState = event.frameState;
        var currentPoint = new ol.geom.Point(routeCoords[index]);
        var feature = new ol.Feature(currentPoint);
        vectorContext.drawFeature(feature, iconFeature);
        // tell OL3 to continue the postcompose animation
        map.render();
      };
      
      
      $(document).ready(function(){
          $('#u52_img').click(function() {
              view.centerOn(addresult.point,[$('map').width(),$('map').height()],[$('map').width()/2,$('map').height()/2]);
          });
      });
        
       $('#flyto').click(function() {
            //flyto(addresult.point);
            rotate(-2);
        });
        
        function flyto(coord){
            var duration = 2000;
            var start = +new Date();
            var pan = ol.animation.pan({
              duration: duration,
              source: /** @type {ol.Coordinate} */ (view.getCenter()),
              start: start
            });
            var bounce = ol.animation.bounce({
              duration: duration,
              resolution: 4 * view.getResolution(),
              start: start
            });
            map.beforeRender(pan, bounce);
            view.setCenter(coord);
        }
        

        function moveto(coord){
              var pan = ol.animation.pan({
              duration: 2000,
              source: /** @type {ol.Coordinate} */ (view.getCenter())
            });
            map.beforeRender(pan);
            view.setCenter(coord);
        }
        
        function rotate(degree){  //degre为pi的倍数,负数顺时针,正数逆时针
            var rotate = ol.animation.rotate({
              duration: 2000,
              rotation: degree* Math.PI
            });
            map.beforeRender(rotate);
        }

以上代码为全部代码,功能上跟大家分不分介绍一下:

我这个程序里面加载了两种地图,一种是天地图,一种是必应的卫星图(因为感觉这个经度较高,也是找了好久才找到)。

加载天地图的主要程序大概如下:

var attribution = new ol.Attribution({
        html: '? <a href="http://www.chinaonmap.com/map/index.html">���ͼ</a>'
    });
    var coor = ol.proj.transform([116.40969, 39.89945], 'EPSG:4326', 'EPSG:3857');
    var view = new ol.View({
        center: coor,
        zoom: 13
    });
    var layers=[];
    layers.push(
            new ol.layer.Tile({
                source: new ol.source.XYZ({
                    attributions: [attribution],
                    url: "http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}"
                })
            })
           );
      layers.push(new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: "http://t2.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}"
                })
            }));

然后加载必应地图的图层为:

 var styles = [
        'Road',
        'Aerial',
        'AerialWithLabels',
        'collinsBart',
        'ordnanceSurvey'
      ];
      var i, ii;
        for (i = 0, ii = styles.length; i < ii; ++i) {
          layers.push(new ol.layer.Tile({
            visible: false,
            preload: Infinity,
            source: new ol.source.BingMaps({
              key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
              imagerySet: 'Aerial'
              // use maxZoom 19 to see stretched tiles instead of the BingMaps
              // "no photos at this zoom level" tiles
              // maxZoom: 19
            })
          }));
        }

然后创建一幅地图:

var map = new ol.Map({
        layers: layers,
        loadTilesWhileInteracting: true,
        target: 'map',
        view: view
    });

接下来,显示鼠标移动点的实时坐标的程序:

 map.on('pointermove',function(e){
      var coord = e.coordinate;
      var degrees = ol.proj.transform(coord, 'EPSG:3857','EPSG:4326');
      var hdms = ol.coordinate.toStringXY(degrees, 8);
      //var element = overlay.getElement();
      //element.innerHTML = hdms;
      
      $('#longlat').text(hdms);
      //overlay.setPosition(coord);
      //map.addOverlay(overlay);
    });

接下来,是添加一个定位点图标的程序:

var addresult=addIcon([0,0]);
     function addIcon(coord){
        var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(coord),
        name: 'Null Island',
        //population: 4000,
        //rainfall: 500
          });
    
          var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
              anchor: [0.5, 1],
              //anchorXUnits: 'fraction',
              //anchorYUnits: 'pixels',
              src: 'imgs/dingwei.png'
            }))
          });
          iconStyle.getImage().setScale(0.3);
          iconFeature.setStyle(iconStyle);
    
          var vectorSource = new ol.source.Vector({
            features: [iconFeature]
          });
    
          var vectorLayer = new ol.layer.Vector({
            source: vectorSource
          });
    
            map.addLayer(vectorLayer);   
            return {feature:iconFeature,layer:vectorLayer,sourceVector:vectorSource,point:coord};
     }
    

接下来,地图单击事件的时候,让定位点图标移动到鼠标单击点:

map.on('click',function(e){
         var coord = e.coordinate;
         var degrees = ol.proj.transform(coord, 'EPSG:3857','EPSG:4326');
         //alert(degrees[0]);
         $('#text_longtitude').val(degrees[0]);
         $('#text_latitude').val(degrees[1]);
         //addresult.sourceVector.removeFeature(addresult.feature);
         //addresult=addIcon(coord);
         var geometry=new ol.geom.Point(coord);
         addresult.feature.setGeometry(geometry);
         addresult.point=coord;
    });


接下来,改变显示的地图是天地图还是必应卫星图的函数为:

  function changeLayer(layer){
         if(layer=="天地图"){
             layers[0].setVisible(true);
             layers[1].setVisible(true);
             for (var i=2; i < layers.length; i++) {
               layers[i].setVisible(false);
             };
         }else if(layer=="卫星图"){
             layers[0].setVisible(false);
             layers[1].setVisible(false);
             for (var i=2; i < layers.length; i++) {
               layers[i].setVisible(true);
             };
         }
     }

定位到中点的函数(起始还有别的方法):

view.centerOn(addresult.point,[$('map').width(),$('map').height()],[$('map').width()/2,$('map').height()/2]);

后面还有几个函数,我就不依依讲了,function flyto(coord)为飞到相应坐标点,有飞的效果,function moveto(coord)为平移到相应坐标点,function rotate(degree)为使地图转相应的角度,后面这几个函数我的界面里可能没有全部用,读者可以自己试吧。

最后贴上几张图:

转载自:https://blog.csdn.net/mashang666/article/details/51746431

You may also like...