Openlayers3控件

最新推荐文章于 2023-02-14 12:16:45 发布
最新推荐文章于 2023-02-14 12:16:45 发布
阅读量265 收藏
点赞数
分类专栏： 地图 文章标签： 地图 控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38425662/article/details/78802111
版权
<!doctype html>
<html lang="en">
<script>
    /**
     * 此页面是一个HelloWord 以及Operlayers的控件显示
     */
</script>
<head>
    <meta charset='utf-8'/>
    <title>OpenLayers1</title>
    <script type="text/javascript" src="static/js/ol-debug.js"> </script>
    <link rel="stylesheet" type="text/css" href="static/css/ol.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
        .mouse-position-wrapper{
            width:300px;
            height:29px;
            color:lightslategrey;
            position:absolute;
            right:20px;
            bottom:6px;
            z-index:999;
        }
        /**
         * 旋转控件的样式位置
         */
        .ol-rotate{
            right:40px;
        }
        /**
         * 比例尺控件显示位置
         */
        .ol-scale-line {
              left:100px;
          }
        /**
         * 缩放到图层控件的位置
         */
        .ol-zoomslider{
            top:100px;
            left: 9px;
        }
    </style>
    <script type="text/javascript">
        // 初始化地图
        var map;


        $(function(){
           init();
        });
          function init(){
            // 初始化地图参数
            map = new ol.Map({
                target: 'map',// DOM中地图容器的id
                layers: [  ],// 图层可以在地图初始化一起进行初始化也可以后期通过addLayer方法进行添加
                view:new ol.View({   // 视图
                    center:[12723401,3578457],// 设置地图中心坐标点
                    zoom:8,// 设置初始化显示层级
                    minZoom:7,// 最小显示层级
                    maxZoom:14 // 最大显示层级
                }),
                //控件


                controls: ol.control.defaults().extend([
                    /**
                     *  new ol.control.FullScreen(), 全屏控件
                     *  new ol.control.MousePosition() 鼠标位置控件
                     *  new ol.control.OverviewMap() 全局地图控件
                     *  new ol.control.Rotate({   autoHide:false  })地图旋转控件
                     *  new ol.control.ScaleLine({  }) 比例尺控件
                     *  new ol.control.ZoomToExtent({  }) 缩放到图层控件
                     */
                    new ol.control.FullScreen(),
                    new ol.control.MousePosition({
                            coordinateFormat : ol.coordinate.createStringXY(4),
                            projection : 'EPSG:4326',
                            className:'custom-mouse-position',//样式
                            target:document.getElementById('mouse-position')//显示位置
                         }),
                    new ol.control.OverviewMap(),
                    new ol.control.Rotate({
                        autoHide:false
                    }),
                    new ol.control.ZoomSlider({  }),
                    new ol.control.ZoomToExtent({  }),
                    new ol.control.ScaleLine({  })
                ])
            });
           //创建一个使用Open Street Map地图源的瓦片图层
            var tilelayers = new ol.layer.Tile({    source:new ol.source.OSM()    });
            map.addLayer(tilelayers);
          }
    </script>
</head>
<body>
    <div id='map' style='width:100%;height:100%;'>


    </div>
    <!--显示坐标的HTML元素-->
    <div  id="mouse-position" class="mouse-position-wrapper">
        <div class="custom-mouse-position"></div>
    </div>


</body>
</html>
运宝道人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
20-openlayers地图控件详细版
fxshy的博客
05-20 29
openlayers地图控件详细版
openlayers中自定义工具条
07-16
openlayers中自定义工具条，有需要的自己下载，16年刚玩openlayers的时候做的，一些东西已经过时了
OpenLayers3-8-Custom Tooltips
isowang的博客
01-21 964
原文地址：http://openlayers.org/en/v3.13.0/examples/button-title.html这个例子展示了如何使用Bootstrap来定制化你自己的按钮相关的api文档包括： ol.Map,ol.View,ol.layer.Tile,ol.source.OSM<!DOCTYPE html> <html> <head> <title>Custom T
openLayers基础地图操作
前端小记
02-14 7198
和高德地图，百度地图，腾讯地图，Arcgis一样，OpenLayers是一个用于开发WebGIS客户端的JavaScript包。
（转） OpenLayers3基础教程——OL3 介绍control
06-09 142
http://blog.csdn.net/gisshixisheng/article/details/46761535 概述： 本文讲述的是Ol3中的control的介绍和应用。 OL2和OL3 control比较： 相比较Ol2的control，OL3显得特别少，下图分别为Ol2和Ol3的control： Ol2的control Ol3的control 相比...
OpenLayer3自定义测量控件 MeasureTool
续汉冕的专栏
12-20 4388
OpenLayer3自定义测量控件 MeasureTool 一直苦恼于OpenLayer3没有现成的测量工具，看了歪果仁做的图层控件，于是自己结合了官网上的measure实例和歪果仁的模板鼓捣出了一个测量工具控件。 下载地址：https://github.com/giser-yugang/ol3-measuretool 描述 基于Openlayers3所做的自定义控件，支持测量距离（l
openlayers图层开关控件
07-27
3. **创建图层开关控件**：通过`new ol.control.Layers()`来创建图层开关控件实例。 4. **添加控件到地图**：然后将图层开关控件添加到地图实例中，使用`map.addControl()`方法。 5. **自动联动**：当图层集合发生...
OpenLayers3实现图层控件功能
10-14
在OpenLayers 3中，实现图层控件功能是一个关键的操作，这允许用户方便地查看和操作地图上的不同图层。虽然OpenLayers 3没有直接提供内置的图层控件，但通过其丰富的API，我们可以自定义实现这一功能。下面我们将...
OpenLayers实现图层切换控件
10-14
在OpenLayers中，图层切换控件是用于让用户在多个图层之间自由切换的重要功能。由于OpenLayers库本身并未直接提供这样的控件，开发者需要自定义来实现这一功能。本文将详细介绍如何利用OpenLayers创建一个图层切换...
基于OpenLayers的地图测量功能实现源码
09-27
基于geoserver和openlayers，实现的地图测量功能，具有长度测量和面积测量功能，支持基于平面的测量和基于球面的测量。
openlayers3添加闪烁点
12-20
使用openlayers3实现动态点闪烁功能，结合canvas技术，加载到点到地图上
openlayers3自定义工具条
凡事有果必有因
08-18 6230
对于一个WEB地图应用来说，地图工具条可以说是不可或缺的一个部分，但由于一些样式、功能往往并不能满足实际项目需要，所以仍要对此部分进行定制，从这里将说明如何利用Oplenayers 3根据项目要求做一个定制化的工具条。这里我是仿高得地图的样式，做的工具条。 1、工具条功能内容内容 切换地图(影像地图、地形地图)测量(点击测量会弹出测量选项框)图层控制（点击图层控制会弹出
openlayers3 自定义鹰眼缩略图
凡事有果必有因
03-15 7297
openlayers3自带的鹰眼缩略图控件功能很局限，想到自己动手去做，结果很容易就做出来了，这里主要用到的是两个map互相联动
Openlayers 按需加载控件（ol.control）
guzicheng1990的博客
12-31 2352
说明 在Openlayers地图加载时，会默认添加3个控件，很多时候我们并不需要这些默认控件 解决方案 删除所有控件，按需加载自己需要的控件 //清除所有控件 var ctls = map.getControls(); let ctlsLength = ctls.getArray().length; f...
OpenLayers3基础教程——OL3 介绍control
weixin_30586257的博客
07-05 192
概述： 本文讲述的是Ol3中的control的介绍和应用。 OL2和OL3 control比较： 相比较Ol2的control，OL3显得特别少，下图分别为Ol2和Ol3的control： Ol2的control Ol3的control 相比较Ol2，OL3保留了mouseposition，scaleline，zoom，zoomslider，而将很多东西...
实时计算：Apache Flink：Flink与Kafka集成实现事件驱动架构.docx
最新发布
09-02
实时计算：Apache Flink：Flink与Kafka集成实现事件驱动架构.docx
OpenLayers3常用地图控件加载与自定义教程
本文详尽地阐述了如何在OpenLayers3中加载和使用常用地图控件，以提升地图操作的便捷性。地图控件主要包括缩放、旋转、鹰眼和测量工具等功能，这些控件都基于ol.control.Control这个基础类进行设计。 首先，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值