使用openlayers在网页中展示地理信息

栏目: JavaScript · 发布时间: 5年前

内容简介:这里涉及到几个基础的概念,View, Layer, Control, Interaction, Overlay, Source, Projection 这些对象一起构成了MapView管理Map的视图参数,缩放zoom, 偏转rotation, 分辨率resolution, 视图中心center等,也可以对这些参数设置范围,从而实现对视图显示的控制Layer是Map显示的基本单位,layer从自身的Source获取数据病将其显示在Map上,一个Map可以包含多个Layer,可以将这些Layer的数据同时显示

这里涉及到几个基础的概念,View, Layer, Control, Interaction, Overlay, Source, Projection 这些对象一起构成了Map

1.1 View

View管理Map的视图参数,缩放zoom, 偏转rotation, 分辨率resolution, 视图中心center等,也可以对这些参数设置范围,从而实现对视图显示的控制

1.2 Layer

Layer是Map显示的基本单位,layer从自身的Source获取数据病将其显示在Map上,一个Map可以包含多个Layer,可以将这些Layer的数据同时显示在Map上,从而实现一个各种地理信息的显示

上层的Layer会遮盖下层的Layer

  • Source

    指定layer的数据来源

1.3 Control

openlayers自身包含了一些内置的Map控件,像全屏,定位,旋转的按钮,通过控件可以实现以Map的交互,也可以自定义实现需要功能的控件,实现业务需要的交互效果

1.4 Interaction

openlayers默认包含了拖拽,点击等常用的交互行为,如果要定制复杂的交互,可以自定义并注册到Map中就可以实现

1.5 Overlay

高组件可以将dom节点与地图坐标系位置绑定,将dom显示在绑定的地理坐标,该dom将被openlayer控制显示

使用openlayers在网页中展示地理信息

2. 实践

实现一个简单的Map

// 创建贴图层显示底图,这里使用本地的WMS服务
var imageLayer = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        params: {
            LAYERS: '_all_', // 图层名称
            FORMAT: 'image/png', // 图片格式
            VERSION: '1.1.1' // 服务版本号
        },
        projection: 'EPSG3857', //投影坐标系
        url: URL // WMS地址
    });
});
// 创建一个矢量图层,显示一些矢量数据
var vectorLayer = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    style: styleInstance //设置矢量数据的显示样式
});
// 创建View,设置视图
var view = new ol.View({
    center: [75, 30], //当前投影坐标系下中心点的坐标
    zoom: 15 //缩放等级
});
var map = new ol.Map({
    target: 'map_container', // 将地图挂在到id为map_container的dom上
    view: view,
    layers: [// 图层顺序与列表顺序相反
        imageLayer,
        vectorLayer
    ]
});复制代码

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Perl高效编程

Perl高效编程

霍尔 / 胜春、王晖、张东亮、蒋永清 / 人民邮电出版社 / 2011-5 / 65.00元

《Perl高效编程(第2版)》,本书是Perl编程领域的“圣经级”著作。它提供了一百多个详实的应用案例,足以涵盖编程过程中经常遇到的方方面面,由此详细阐释出各种高效且简洁的写法。一起来看看 《Perl高效编程》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具