openLayers

Raccom

已于 2022-11-14 11:42:18 修改

阅读量366

点赞数

分类专栏： WebGIS 文章标签：前端 javascript 开发语言

于 2022-10-10 10:50:27 首次发布

本文链接：https://blog.csdn.net/Raccon_/article/details/127237567

版权

WebGIS 专栏收录该内容

16 篇文章 7 订阅

订阅专栏

openLayers

OpenLayers 3简称ol3，它是一个开源的Web GIS引擎，采用面向对象的编程范式，支持dom，canvas和webgl三种渲染方式

地图初始化

<template>
    <div id="map" ref="mapRef"/>
</template>

<script>
import 'ol/ol.css';
import Map from 'ol/Map'; // 地图
import OSM from 'ol/source/OSM'; // 原生地图api
import XYZ from 'ol/source/XYZ'; // 其他地图api自定义url
import TileLayer from 'ol/layer/Tile'; // 平铺图片的图层源
import * as control from 'ol/control'; // 地图控件
import * as interaction from 'ol/interaction'; // 交互
import View from 'ol/View'; // 视图
export default {
    mounted(){
        this.initMap() // 地图初始化
    },
    data: () => ({
        map: null // 地图实例
    }),
    methods: {
        initMap(){
            // 创建地图
            this.map = new Map({
                layers: [
                    new TileLayer({
                        // 使用内置地图 source: new OSM()
                        // 使用高德瓦片
                        source: new XYZ({
                            visible: true,
                            url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
                        })
                    })
                ],
                target: 'map', // 挂载元素
                view: new View({
                    center: [116.403218, 39.92372], // 地图打开的默认中心点
                    zoom: 12,
                    maxZoom: 18,
                    projection: 'EPSG:4326',
                    constrainResolution: true, // 设定缩放级别为整数
                    smoothResolutionConstraint: false // 关闭无级缩放地图
                }),
                // 在默认控件的基础上，再加上其他内置的控件
                controls: control.defaults().extend([
                    new control.FullScreen(),
                    new control.MousePosition(),
                    new control.OverviewMap(),
                    new control.ScaleLine(),
                    new control.ZoomSlider(),
                    new control.ZoomToExtent()
                ]),
                interactions: interaction.defaults({
                    doubleClickZoom: false, // 关闭双击缩放
                    mouseWheelZoom: false // 关闭滚轮缩放
                })
            })
        }
    }
}
</script>

<style scoped>
#map{
    height: 700px;
}
</style>

首先定义一个 Map，这是 Openlayers 的核心，它是一个容器，所有动作、设置等都在 Map 中展开。
将 Map 容器与 HTML 元素（这里是 DIV 元素 #map）做绑定，Map 提供有 target 属性来绑定；
将图层 Layer 添加到 Map 中，这里是一个瓦面图层 TileLayer(ol.layer.Tile)
图层是一个包装盒，需要给图层添加具体的数据源：new OSM() (默认内置地图)，数据源表示一个服务，可以理解为是一个 URL
最后设置 Map 容器的视图窗口：new View，就是我们初始化能看到的地图样子。
Openlayers 其核心组件是 Map、Layer、Source、View、Control、Interaction几乎所有的动作都是围绕这几个核心类展开。

注：挂载的元素需要有宽高才能显示地图

Map

Map是 Openlayers 的使用的基础，所有的图层、地图控件、地图工具等必须添加到 Map 中才能使用。

往 Map 中添加图层、地图控件、地图工具等可以在初始化 Map 时就添加，可以调用 Map 相关的方法添加 addControl(control)、addInteraction(interaction)、addLayer(layer)。

Map 还提供了很多事件，如：点击地图（click）、双击地图（dbclick）等。

// 绑定 click 事件使用：
this.map.on('click', evt => {
            this.map.forEachFeatureAtPixel(evt.pixel, feature => {
                //鼠标点击某一个要素后，获取这个要素，执行业务逻辑
            });
        })

注：另一种事件调用方式：this.map.dispatchEvent({type: "click", event: 回调函数 })

Layer

Layer 是图层，单单一个 Map 是没有什么用的，只用绑定图层才能显示数据

Layer 作用能控制数据是否显示，以及地图可显示的最大或最小比例尺（即放大或缩小到某个级别不显示地图）

图层主要是根据数据源的不同来选择，不同的数据源选择不同的图层

Source

这是整个 Openlayers 的灵魂，source 分为矢量数据源和影像数据源

有时候底图使用影像数据，而与我们业务相关的河流、行政区、水环境监测点等都是矢量数据。

常用的在线地图瓦片url：

1.高德瓦片，最大支持放大到20级，字体比较大，但是最近好像又只能到19级了。
http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7

2.高德瓦片，最大支持放大到20级，颜色偏灰绿色。
http://webst0{1-4}.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}

3.高德瓦片，最大支持放大到18级，最常用的样式。
http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8

4.谷歌地图瓦片，最大支持放大到22级，颜色偏绿色。
https://mt0.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}

View

view 用来设置地图的展示位置范围、地图中心位置以及当前地图使用的投影坐标系（有很多坐标系，如地理坐标系：4326）等，也可以设置地图旋转等

this.map.setView(new View({
     center: [114.064839,22.548857],    //深圳
     zoom: 15,    
     projection: 'EPSG:4326'     //使用的坐标，这里是 WGS84 坐标系
}))