【openlayers】地图【一】

官方文档

基本概念

Map地图

OpenLayers的核心组件是map（ol/map），被呈现到目标容器当中（例如，包含地图的网页上的div元素）；所有的地图元素要么在构造时配置所有映射属性

下面的标记可用于创建包含地图的 div 元素：

<div id="map" style="width: 100%, height: 400px"></div>

View视图图层

View是指地图视图图层，包括中心点、缩放等级、分辨率等数据都是依赖图层去展示的；

import View from 'ol/View';

map.setView(new View({
    
  center: [0, 0],
  zoom: 2
}));

Source数据源

为了获取层的远程数据，OpenLayers使用ol/source/source子类。这些可用于OpenStreetMap或Bing等免费和商业地图平铺服务、WMS或WMT等OGC源以及GeoJSON或KML等格式的矢量数据。

import OSM from 'ol/source/OSM';

var osmSource = OSM();

Layer图层

图层是源数据的可视化表示形式，OpenLayers有四种基本类型的层：

• ol/layer/Tile：瓦片图层——平铺-渲染网格中提供平铺图像的源，网格按特定分辨率的缩放级别组织。

• ol/layer/Image：图像——渲染以任意范围和分辨率提供地图图像的源。

• ol/layer/Vector：矢量图层——在客户端呈现向量数据。

• ol/layer/VectorTile：矢量瓦片——作为矢量分幅提供的数据呈现。

import TileLayer from 'ol/layer/Tile';

var osmLayer = new TileLayer({
    source: osmSource});
map.addLayer(osmLayer);

vue openlayers应用

<template>
    <div>
        <div class="ol-map" ref="olMap"></div>

        <!--可以给元素设置一些样式-->
        <div class="ol-popup" ref="olPopup">{
    {
     olPopupText }}</div>
    </div>
</template>

<script>
import Map from "ol/Map";
import View from "ol/View";
import {
     Tile as TileLayer } from "ol/layer";
import {
     OSM, XYZ, WMTS } from "ol/source";
import {
     fromLonLat } from "ol/proj";
import {
    
    defaults as defaultInteractions,
    DragRotateAndZoom,
} from "ol/interaction";
import {
     defaults, FullScreen, MousePosition, ScaleLine } from "ol/control";
import Overlay from "ol/Overlay";
import {
     Vector as VectorLayer } from "ol/layer";
import {
     Vector as VectorSource } from "ol/source";
import {
     Style, Icon } from "ol/style";
import Feature from "ol/Feature";
import Point from "ol/geom/Point";
import {
     Translate } from "ol/interaction";
import {
     Draw } from "ol/interaction";
import GeometryType from "ol/geom/GeometryType";
import {
     createRegularPolygon, createBox } from "ol/interaction/Draw";
import {
     Modify } from "ol/interaction"

export default {
    
    name: "exm1",
    data () {
    
        return {
    
            olPopupText: "default text"
        }
    },
    created () {
     },
    mounted () {
    
        // 使用内置的osm
        // const tileLayer = new TileLayer({
    
        // source: new OSM()
        // });

        // 使用 天地图 的瓦片数据
        // const tileLayer = new TileLayer({
    
        // source: new XYZ({
    
        // url: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=9b21fa580b77ebbb20ee6245e2fc96eb"
        // })
        // })

        // ??? 如何加载 wmts 服务， 下面有问题代码
        // const tileLayer = new TileLayer({
    
        // source: new WMTS({
    
        // url: "http://t1.tianditu.gov.cn/vec_c/wmts?tk=9b21fa580b77ebbb20ee6245e2fc96eb"
        // })
        // })

        // 使用 高德 的瓦片数据
        const tileLayer = new TileLayer({
    
            source: new XYZ({
    
                url: "https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
            }),
        });
        let map = new Map({
    
            layers: [tileLayer],
            view: new View({
    
                center: fromLonLat([120.771441, 30.756433]), // 地图中心点
                zoom: 15, // 缩放级别
                minZoom: 0,
                maxZoom: 18,
                constrainRotation: true, // 因为存在非整数的缩放级别，所以设置参数true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
            }),
            target: this.$refs.olMap,
            controls: defaults().extend([
                new FullScreen(), // 显示全屏
                new MousePosition(), // 显示鼠标当前位置的经纬度
                new ScaleLine(), // 显示比例尺
            ]),
        });
        map.on("click", (e) => {
    
            console.log("地图点击", e);
        });
    },
};
</script>

<style scope>
.ol-map {
    
    height: 90vh;
}

.ol-popup {
    
    width: 40px;
    height: 30px;
    font-size: 14px;
    text-align: center;

}
</style>