vue+openLayers入门教程

风也曾吹过我_

已于 2024-08-09 11:11:46 修改

阅读量2.7w

点赞数 41

分类专栏： OpenLayers 文章标签：前端

于 2021-09-14 14:12:18 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50496450/article/details/120284143

版权

介绍:

OpenLayers插件类型

可以理解为专门处理地图的一个库

其中有两大类 map和view,map是ol中的核心组件,初始化一副地图(map),时,至少需要一个可视化区域(view),一个或多个图层(layer)和一个地图加载的挂载点(target)

1.vue中使用Openlayers

注意:地图容器需要设置宽高,否则看不到初始化的地图效果

地图介绍

一.关于投影

1.投影,地球不是正圆的球体,是一个不规则的椭圆体,所以我们要是想让它展开在桌面上,就会发现地图都会和实际有出入,所以人们发明了各种各样的方式来缩小失真的程度.这种方式就是投用,投影目前常用的是2种,分别是:
“EPSG:4326”,在地图上将经纬度直接当做X/Y对待(最常用)
"EPSG:3785"又称为球面墨卡托投影。将地图投影到一个地图平面上。为了正确的在商业地图API上叠加地图数据，就必须使用该投影。最基本的是在商业地图API上显示栅格瓦片地图——例如TMS，WMS以及其他类似的瓦片。
2.如果我们不指定特别的投影，OpenLayers的默认投影为EPSG:3857
3.source: 数据源
4.Tile: 瓦片图层类，主要用来加载瓦片图。通过实例化瓦片图层对象，绑定其数据源（source) 加载对应的瓦片地图
5.TileArcGISRest: 使用ArcGis为地底图
6.View: 地图视图类

安装方式:

yarn install ol

2.openlayers简单使用说明

一.初始化地图

import {
    Map, View } from "ol";//地图,视图
import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片
import TileLayer from "ol/layer/Tile"; //可以理解为图层
import {
    fromLonLat } from "ol/proj";//将坐标从经度/纬度转换为不同的投影。
export default {
   
  data() {
   
    return {
   
      map: null,
    };
  },
  methods: {
   
    createMap() {
   
      this.map = new Map({
   
        target: "map",
        layers: [
          new TileLayer({
   
            source: new OSM({
   }),
          }),
        ],
        view: new View({
   
          center: [116.394926, 39.9125],
          projection: "EPSG:3857",
          zoom: 8,
          maxZoom: 20,
        }),
      });
    },
  },
  mounted() {
   
    this.createMap();
  },
};

openlayersAPI

ol/proj

import {
   fromLonLat} from 'ol/proj'; 将坐标从经度/纬度转换为不同的投影。
fromLonLat(coordinat,projection)
coordinat:坐标为经度和纬度，即以经度为第一个元素，纬度为第二个元素的数组。
projection:目标投影。默认为 Web Mercator，即“EPSG:3857”。

import {
   toLonLat} from 'ol/proj'; 将坐标转换为经度/纬度。
toLonLat(coordinat,projection)
coordinat:投影坐标。
projection:坐标的投影。默认为 Web Mercator，即“EPSG:3857”。

import {
   transform} from 'ol/proj'; 将坐标从源投影转换为目标投影。这将返回一个新坐标（并且不会修改原始坐标）。
transform(coordinate, source, destination)
coordinate:
source:源投影样。
destination:目的地投影式。

3.openlayers一些配置了解

官网:https://openlayers.org/en/latest/apidoc/

this.map.addLayer(maplayer) //在页面新增图层
this.map.map,removeLayer(maplayer) //删除某一图层可结合this.map.getLayers().array_[index]使用
this.map.getLayers() //获取所有图层信息
maplayer.setOpacity(0); //设置透明度

4.vue使用Openlayers绘制点

//创建空的矢量容器(point)
let vectorSource = new VectorSource({
   });
      //创建图标层
      let vectorLayer = new VectorLayer({
   
        source: vectorSource,
      });
      this.clearTc();
      this.map.addLayer(vectorLayer);
      let poi = [];
      if (list.length) {
   
        list.forEach((item, index) => {
   
          item.coord = item.jwd;
          // fromLonLat像素点转经纬度
          poi.push(new Feature(new Point(fromLonLat(item.coord))));
          poi[index].set('name', item.name);
          poi[index].set('value', item.value);
          poi[index].set('id', item.id);
          let bdStyle = new Style({
   
            image: new CircleStyle({
   
              fill: new Fill({
   
                color: [128, 0, 128],
              }),
              radius: 6,
            }),
          });
          poi[index].setStyle(bdStyle);
        });
      }
		//根据业务需求所增加的排序
      poi.sort(function (a, b) {
   
        return b.get('value') - a.get('value');
      });
      poi.forEach((item, index) => {
   
        vectorSource.addFeature(item);
      });

5.vue使用Openlayers绘制线段

  let newList = [];
    drawList.forEach((item) => {
   
     newList =item.SectionCoord.geometry.coordinates[0].map(
      (ITEM) => fromLonLat(ITEM););
      let line = new Feature(new LineString(newList)); 
         line.setStyle(
         new Style({
   
         stroke: new Stroke({
   
          width: 4,
          color: '#00FF00',
         }),
        })
       );
  let vectorlayer = new VectorLayer({
   
  		source: new VectorSource({
    features: [line] }),
    });
    this.map.addLayer(vectorlayer); //这里是执行，执行之后点就出来了

6.vue使用Openlayers监听点击事件

let that = this;
  this.map.on('click', async (e) => {
   
  let viewResolution = /** @type {number} */ (that.view.getResolution());
   let url = that.map
          .getLayers()
          .array_[1].getSource()
          .getFeatureInfoUrl(e.coordinate, viewResolution, 'EPSG:3857', {
   
            INFO_FORMAT: 'application/json',
            FEATURE_COUNT: 50,
          });
if (url) {
   
  try {
   
    let res = await this.axios.get(url);
    for (let i = 0; i < res.data.features.length; i++) {
   
     if (res.data.features[i].id.includes('jgmile')) {
   
         if (res.data.features[i + 1] == null ||
 			!res.data.features[i].id.includes('jgmile') ) {
   
             //-----------点击的是区间----------
            let id = res.data.features[i].properties.seg;
            let result