Openlayers之测量距离与面积

最新推荐文章于 2024-07-24 16:56:13 发布

桃李不言_下自成蹊

最新推荐文章于 2024-07-24 16:56:13 发布

阅读量1.5w

点赞数 8

分类专栏： OpenLayers3

本文链接：https://blog.csdn.net/SmileCoffin/article/details/64122338

版权

本文介绍了如何在OpenLayers3中实现地图的测量功能，包括测量距离和面积。通过对鼠标绘制的范围进行地理坐标转换，可以计算出实际面积。同时，还提及了能够进行球面距离和面积的测量，提供了勾选大地测量的选项。

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

1、地图测量功能

一般的地图的测量功能主要表现在两个方面，一是测量距离，一是测量面积；面积的测量是根据鼠标绘制的范围，通过地理坐标系的转换而计算出实际面积大小，距离的测量是根据鼠标在地图上绘制的点，实时计算出两点之间的实际距离，下面我们就在Openlayers3中来实现这一功能；

2、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../lib/ol/ol.js"></script>
    <link href="../css/ol.css" rel="stylesheet" />
    <script src="../lib/jquery/jquery-1.8.2.js"></script>
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <script src="../lib/bootstrap/bootstrap.min.js"></script>
    <style type="text/css">
        #map {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        #menu {
            float: left;
            position: absolute;
            bottom: 10px;
            left: 10px;
            z-index: 2000;
        }

        .checkbox {
            left: 20px;
        }
        /**
        * 提示框的样式信息
        */
        .tooltip {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.7;
            white-space: nowrap;
        }

        .tooltip-measure {
            opacity: 1;
            font-weight: bold;
        }

        .tooltip-static {
            background-color: #ffffff;
            color: black;
            border: 1px solid white;
        }

            .tooltip-measure:before,
            .tooltip-static:before {
                border-top: 6px solid rgba(0, 0, 0, 0.5);
                border-right: 6px solid transparent;
                border-left: 6px solid transparent;
                content: "";
                position: absolute;
                bottom: -6px;
                margin-left: -7px;
                left: 50%;
            }

            .tooltip-static:before {
                border-top-color: #ffffff;
            }

        #scalebar {
            float: left;
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //初始化地图
            var map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        source:new ol.source.OSM()
                    })
                ],
                view: new ol.View({
                    center: new ol.proj.fromLonLat([114.4250, 23.0890]),
                    zoom: 18,
                    maxZoom: 20
                })
            });

            //定义矢量数据源
            var source = new ol.source.Vector();
            //定义矢量图层
            var vector = new ol.layer.Vector({
                source: source,
                style: new ol.style.Style({
                    fill: new ol.style.Fill({
                        color:'rgba(255,255,255,0.2)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#e21e0a',
                        width:2
                    }),
                    image: new ol.style.Circle({
                        radius: 5,
                        fill: new ol.style.Fill({
                            color:'#ffcc33'
                        })
                    })
                })
            });
            //将矢量图层添加到地图中

最低0.47元/天解锁文章

桃李不言_下自成蹊

关注

8
点赞
踩
27

收藏

觉得还不错? 一键收藏
31
评论
Openlayers之测量距离与面积

1、地图测量功能一般的地图的测量功能主要表现在两个方面，一是测量距离，一是测量面积；面积的测量是根据鼠标绘制的范围，通过地理坐标系的转换而计算出实际面积大小，距离的测量是根据鼠标在地图上绘制的点，实时计算出两点之间的实际距离，下面我们就在Openlayers3中来实现这一功能；2、代码实现
复制链接

扫一扫

专栏目录