OpenLayers学习笔记（八）— 类似比例尺的距离环（二）

最新推荐文章于 2024-01-31 23:06:36 发布

DebJane

最新推荐文章于 2024-01-31 23:06:36 发布

阅读量594

点赞数

分类专栏： openlayers openlayers 3

本文链接：https://blog.csdn.net/sueRimn/article/details/86586407

版权

本文介绍了如何在OpenLayers 3中实现一个动态的距离环，该环以地图中心为基准，环与环之间的距离随着地图缩放而变化，类似于比例尺。内容包括使用虚拟层添加覆盖全图的特征，并提供了代码示例。

摘要由CSDN通过智能技术生成

OpenLayers学习笔记（八）— 类似比例尺的距离环（二）

openlayers 3 地图上创建一个距离环，始终以地图中心为中心，每个环之间的距离类似比例尺，随地图缩放而变化。

添加具有覆盖整个范围的特征的虚拟层，其可以被设置为围绕地图中心的环。

这篇是上一篇距离环文章的拓展和完善

GitHub:八至

作者：狐狸家的鱼

在线预览

这是模仿openlayers插件库ol-ext新出的canvas距离环功能，简直雪中送炭。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>距离环</title>
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <script src="build/jquery.js"></script>
    <script src="build/ol.js"></script>
    <style>
        

        html,
        body {
            height: 100%;
            width: 100%;
            padding: 0px;
            margin: 0px;
        }

        .map {
            height: 100%;
            width: 100%;
        }


    </style>
</head>
<body>
    <div id="map"></div>

    <script>

        var map = new ol.Map(