openlayers3加图标定位

最新推荐文章于 2024-08-08 15:58:10 发布

mashang666

最新推荐文章于 2024-08-08 15:58:10 发布

阅读量1.6w

点赞数 3

文章标签： openlayers3 加图标定位

本文链接：https://blog.csdn.net/mashang666/article/details/51746431

版权

首先想说的是我也是刚刚接触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: [attri