Openlayers3点击获取坐标

只能在火狐ie下运行，gogel内核的获取不了坐标不想深入，只是demo给你们看看。

效果如下 Openlayers3点击获取坐标

1.第一步创建重要map

var map = new ol.Map({
               layers : [ baiduMapLayer ],
               target : 'map',
               view : new ol.View({
                   center : [103.694, 27.311],//剧中坐标
                   projection : 'EPSG:4326',//地图类型
                   zoom : 17 //放大等级
               })
           });

2.创建图层

var vectorLayer = null;
           function addMarker(coordinate){
               var feature = new ol.Feature({
                   geometry : new ol.geom.Point(coordinate),
                   name : 'locate',
                   population : 4000,
                   rainfall : 500
               });

3.创建 icon 样式

var iconStyle = new ol.style.Style({
                   image : new ol.style.Icon({
                       anchor : [ 0.4, 37 ],
                       anchorXUnits : 'fraction',
                       anchorYUnits : 'pixels',
                       src : "js/openlayers/img/label/shigu.png"
                   })
               });

feature.setStyle(iconStyle);//图层设置样式
               vectorLayer==null?null:map.removeLayer(vectorLayer);
               vectorLayer = new ol.layer.Vector({
                   source : new ol.source.Vector({
                       features : [feature]//图层加进去
                   })
               });
               map.addLayer(vectorLayer);//将图层加入map
           }

4.控制动态取值

map.on("click",function(evt){
               addMarker(evt.coordinate);获取覆盖物此坐标
               if(window.parent && window.parent.setMapxy){
                   window.parent.setMapxy(FormatNumber(evt.coordinate[0],6),FormatNumber(evt.coordinate[1],6));//点击后进入ifream父页面的 setmapxy方法并设置
               }
           },map);

5.居中（可忽略）

function panTo(lon, lat) {
               map.getView().setZoom(16);
               map.getView().animate({
                   center : [ lon, lat ],
                   duration : 1000
               });
           }

6.piont添加覆盖物前途获取xy进去

        function labelPointInMap(x,y){
               var coordinate = new ol.geom.Point([y,x]).getCoordinates();
               addMarker(coordinate);
               panTo(coordinate[0],coordinate[1]);
           }

ok 没了就是这么简单，还是看不懂就进这个网站下载源代码吧，不懂留言！！

下载源代码：http://download.****.net/download/u012374381/9954821

Openlayers3点击获取坐标

相关推荐