OpenLayers 教程

最开始接触地图的时候，对圆的理解不正确，以为也是面状的；实际上 Openlayers 中圆指的就是圆点和半径，而面状的圆其实就是多边形，比如十七边形，只是看起来像圆。

下边介绍创建圆的方法以及根据圆获取圆形多边形的方法。

Openlayers 圆的操作

<html lang="en">
<head>
    <meta charset="utf-8">
    <!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
    <link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css">
    <style>
        /* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */
        .map {
            height: 400px;
            width: 100%;
            float: left;
        }
    </style>
    <!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
    <script src="http://openlayers.vip/examples/resources/ol.js"></script>
    <script src="./tiandituLayers.js"></script>
    <title>OpenLayers example</title>
</head>
<body>
<h2>Feature transfer</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div>
<!--注意：本示例将 高德腾讯坐标设置为黑色；将百度坐标设置为黄色 -->
<!--注意：本示例将 高德腾讯坐标转为WGS84颜色设置为粉色；将百度坐标转为WS84颜色设置为绿色 -->
<script type="text/javascript">
    var map = new ol.Map({
        // 地图容器
        target: 'map',
        // 地图图层，比如底图、矢量图等
        layers: [
            getIMG_CLayer(),
            getIBO_CLayer(),
            getCIA_CLayer(),
        ],
        // 地图视野
        view: new ol.View({
            projection: "EPSG:4326",
            // 定位
            center: [116, 39],
            // 缩放
            zoom: 4,
            maxZoom: 18,
            minZoom: 1,
        })
    });


    var xy = [116.391232637988, 39.907157016256974];

    let myCircle = new ol.geom.Circle(xy, 0.01);

    let feature = new ol.Feature({
        geometry: myCircle,
        name: 'My Circle',
    });
    // 矢量图层
    var layer = initVectorLayer();

    /**
     * @todo 矢量图层
     * @returns {VectorLayer}
     * @constructor
     */
    function initVectorLayer() {
        //实例化一个矢量图层Vector作为绘制层
        let source = new ol.source.Vector();
        //创建一个图层
        let customVectorLayer = new ol.layer.Vector({
            source: source,
            zIndex: 2,
            //设置样式
            style: new ol.style.Style({
                //边框样式
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 5,
                    lineDash: [3, 5]
                }),
                //填充样式
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 255, 0.3)',
                }),
            }),
        });
        //将绘制层添加到地图容器中
        map.addLayer(customVectorLayer);

        customVectorLayer.getSource().addFeatures([feature]);

        var extent = customVectorLayer.getSource().getExtent();

        map.getView().fit(extent, {
            duration: 1,//动画的持续时间,
            callback: null,
        });
        return customVectorLayer;
    }

    // 多边形圆
    function toPolygon() {

        //根据圆的图形要素 Feature 构建多边形圆
        var polygon_circle = new ol.Feature({
            // 圆的几何图形，多边形数量
            geometry: ol.geom.Polygon.fromCircle(feature.getGeometry(), 16, 0),
            name: 'polygon_circle'
        })
        polygon_circle.setStyle(new ol.style.Style({
            //边框样式
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 5,
                lineDash: [3, 5]
            }),
            //填充样式
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 1)',
            }),
        }))

        layer.getSource().addFeatures([polygon_circle]);
    }

</script>

<button id="toPolygon" onclick="toPolygon()">转为多边形圆</button>
</body>
</html>