记录openLayers的学习日记

Kepler明
311 阅读2分钟

因为在公司做项目一直用到了gis地图，我又不太会，所以就进行学习一下，顺便记录一下吧，哈哈哈，共勉

简介

什么是openLayers，他就是一个用来帮助我们进行Web地图应用开发的JavaScript类库，几乎可以满足所有的地图开发需求。

openlayers是面向对象开发的，他的文档是英文的（对我极其不友好），

一，创建地图实例

首先要先安装依赖，然后窗创建容器，进行地图实例的创建，包括地图的中心点，地图的放大缩小等级，

先安装依赖

yarn ol

第二步创建一个div标签，给他一个容器（一定要给容器的宽高）

<div class="map" ref="Map"></div>

第三步创建地图图层，

首先先引入所需要的的模块

import Map from "ol/Map"; 
import View from "ol/View";
import { XYZ, OSM } from "ol/source";
import { fromLonLat } from "ol/proj";
import { Tile as TileLayer } from "ol/layer";

const titleLayer = new TileLayer({
        source: new OSM(),
        // 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}",
        // }),
      });
      this.map = new Map({
        layers: [titleLayer],
        view: new View({
          center: fromLonLat([120.771441, 30.756433]), // 中心点
          zoom: 15, //缩放等级
          minZoom: 0, //最大缩放级别
          maxZoom: 18, // 最小缩放级别
          constrainRotation: true, // 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
        }),
        target: this.$refs.olMap, // 加载的容器
      });

地图创建成功

image.png

  • Map 是创建地图所必须的核心组件，用于对地图对象的初始化
  • fromLonLat 是关于地图坐标的转换
  • View 视图，当前创建视图的信息
  • center 中心点，当前地图的中心点的坐标位置
  • layers 图层。没定义图层，也会加载，显示空白图层。图层是按顺序加载的，想要在最上层需要放在最后面。
  • source 数据的来源跟格式，数据的类型有很多种，详情可以参考
  • target 当前地图所要加载的容器
  • zoom 缩放等级

二、移动地图中心点位置

移动需要使用到地图的方法

  • animate 动画视图。视图的中心、缩放(或分辨率)和旋转可以通过动画实现视图状态之间的平滑过渡。
  • map 是定义的地图
  • getView 是Map的方法，获取与此地图关联的视图。视图管理中心和分辨率等属性，详情参考
<template>
  <div class="app-container">
    <div class="ol-map" ref="olMap"></div>
    <button @click="centerClick">更新居中点</button>
  </div>
</template>
<script>
export default {
    data(){
        return {
            map:null,
        }
    },
    methods:{
        centerClick () {
          this.map.getView().animate({
            center: fromLonLat([120.701441, 30.756433]),
            zoom: 14,
          });
        },
    }
}
</script>

三、自定义覆盖物（删除跟添加）

image.png 添加覆盖物

  • Overlay 让HTML元素显示在地图上某个位置
  • maker 当前定义的覆盖物
  • element 当前要显示的html元素
  • position 当前显示的地理位置坐标
  • offset 偏移的位置
  • autoPan 是否自动移动地图显示完整的自定义覆盖物
  • addOverlay Map的在地图上添加覆盖物的方法
  • removeOverlay 删除覆盖物的方法，传值，当前的覆盖物 删除覆盖物

<template>
  <div class="app-container">
    <div class="ol-map" ref="olMap"></div>
    <div ref="maker" class="maker">连架冲民宿</div>
    <button @click="elementCilck">添加要素</button>
    <button @click="elementRemove">删除要素</button>
  </div>
</template>
<script>
import Overlay from "ol/Overlay";
export default {
    data(){
        return {
            map:null,
            maker:null
        }
    },
    methods:{
      elementCilck () {
        this.maker = new Overlay({
        element: this.$refs.maker,
        position: fromLonLat([110.3456714124336, 30.521797531648712]),
        // offset: [-17, -17],
        autoPan: true,
      });
      // 将自定义覆盖物添加到地图
      this.map.addOverlay(this.maker);
      },
      elementRemove () {
        this.map.removeOverlay(this.maker);
      },
    }
}
</script>

4、添加maker点位

image.png

  • Feature （要素）具有几何形状和其他属性的地理要素的矢量对象，即地图上的几何对象，包括点（Point），线（LineString）,多边形（Polygon），圆（Circle）等。
  • Point 点对象 当前点位的坐标
  • geometry 设置几何图形
  • Style 设置样式
  • Icon 设置点位的url
  • Text 设置文字样式
  • setStyle 给当前点位坐标添加图形
  • addLayer 添加元素
  • VectorSource 定义当前矢量的实例 （官方：为矢量图层提供特征源)
  • Vector 创建图层
<template>
  <div class="app-container">
    <div class="ol-map" ref="olMap"></div>
    <button @click="addMaker">添加maker点位</button>
  </div>
</template>
<script>
import { Point } from "ol/geom";
import VectorSource from "ol/source/Vector";
import { Icon, Style, Stroke, Text } from "ol/style";
import Feature from "ol/Feature";
export default {
    data(){
        return {
            map:null,
            maker:null
        }
    },
    methods:{
      addMaker () {
          const iconFeature = new Feature({
            geometry: new Point(
              fromLonLat([110.3456714124336, 30.521797531648712])
            ),
            name: "连架冲民宿",
          });

          var styleIcon = new Style({
            image: new Icon({
              src: "https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg",
              anchor: [0.1, 0.1],
            }),
            text: new Text({
              textAlign: "center",
              textBaseline: "top",
              // font: font,
              offsetX: 0,
              offsetY: 20,
            }),
          });
          iconFeature.setStyle(styleIcon);
          var vectorSource = new VectorSource({
            features: [iconFeature],
          });
          const vectorLayer = new Vector({
            source: vectorSource,
          });
          this.map.addLayer(vectorLayer);
        },
    }
}
</script>

gis地图博大精深，需要慢慢钻研，就一个最基础的图层都有十几种

avatar
文章
阅读
粉丝