柿子树备忘录

vuePress-theme-reco 柿子树    2023
柿子树备忘录

Choose mode

  • dark
  • auto
  • light
首页
个人笔记
  • Web
  • GIS
  • Database
  • DevOps
  • 可视化
地图故事
生活点滴
归档
关于我
author-avatar

柿子树

109

Article

73

Tag

首页
个人笔记
  • Web
  • GIS
  • Database
  • DevOps
  • 可视化
地图故事
生活点滴
归档
关于我
  • GIS理论基础

    • GIS基础知识
    • 地图坐标系统
  • GeoServer笔记

    • 思维导图
    • 一、OGC简述

    • 二、基本使用

    • 三、服务标准

    • 四、图层加载

    • 五、服务端开发

  • Openlayers

    • 思维导图
    • 一、快速起步

    • 二、ol结构体系

    • 三、数据源加载

    • 四、常用控件

      • 默认控件
      • 添加控件
      • 常用控件
      • 自定义导航
    • 五、几何对象与Style样式

    • 六、事件交互

    • 七、OGC服务

    • 八、常用示例

  • CesiumJS

    • 思维导图
  • WorldWind

    • WorldWindJava 学习笔记
    • OpenGL中的坐标系

添加控件

vuePress-theme-reco 柿子树    2023

添加控件

ac 2020-10-29 OpenLayers

# 添加控件

添加控件的方式:

  1. 初始化map对象时配置控件数组。但这样就会替换掉默认的控件,只显示配置的控件数组中的控件。
  2. 在map初始化完后调用其addControl方法添加。
//比例尺控件
var scaleLineControl = new ol.control.ScaleLine({
    units: "metric"
});
//全屏显示控件
var fullSreen = new ol.control.FullScreen();
var shenzhen = [113.958334, 22.535640];

var map = new ol.Map({
    view: new ol.View({
        center: ol.proj.fromLonLat(shenzhen),
        zoom: 8,
        rotation: Math.PI/6
    }),
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    target: "map",
    //方式一
    controls:[fullSreen]
});
//方式二
map.addControl(scaleLineControl);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
image-20201110170320881