admin管理员组

文章数量:1610904

前言:学习webgis的时候老师让我们尝试制作专题地图,结合Echarts在地图上加载统计图表。本人尝试添加一个饼状图,坐标中心设置为北京市的经纬度。

使用ol.overlay的时候,按照网上的示例如下:

    var pt = [116.42,39.95];
    var pie = new ol.Overlay({
        position:pt,
        positioning: 'center-center',
        element: document.getElementById('overlay')
    });
    map.addOverlay(pie);

但是我得到的结果就很奇怪,如下图:

同时修改position的坐标值发现饼状图位置几乎没有变化,后来将代码修改如下:

        var gdp=new ol.Overlay({
            position:ol.proj.transform([116.42,39.95], 'EPSG:4326', 'EPSG:3857'),
            //position:[116.42,39.95],
            positioning: 'center-center',
            element: document.getElementById('piegdp'),
            stopEvent:false
        });
        map.addOverlay(gdp);

这样就成功了,效果如下:

总结:应该是投影的问题,但是经过尝试将position设置为投影坐标3857位置还是错误的。同时,本人在网上看到一种修改方法是:
position:ol.geom.Point([,])
本人尝试是错误的,因为position属性需要一个ol.Coordinate的返回值,ol.geom返回的是geometry

一个小问题解决了还是很开心的,希望能对大家起到一点点帮助嘻嘻嘻~~

本文标签: 坐标OpenLayersoverlayPosition