【openlayers】地图【三】

折桂怀橘

已于 2022-08-24 16:17:26 修改

阅读量678

点赞数

分类专栏：前端相关知识文章标签： javascript

于 2022-08-09 14:36:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42910765/article/details/126247268

版权

本文介绍了OpenLayers中地图投影的概念，包括等矩矩形和墨卡托投影，以及地理坐标系统WGS-84。接着讲解了如何在OpenLayers中创建图层，特别是将样式和图标特性添加到矢量图层，并将其加入地图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标位置控件

在这里插入图片描述

import 'ol/ol.css'
import {
    Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import BingMaps from 'ol/source/BingMaps'
import * as control from 'ol/control'
import * as coordinate from 'ol/coordinate';

 <div ref="mousePositionTxt"></div>

initMap () {
   
   
      this.map = new Map({
   
        target: 'map',
        controls: control.defaults().extend([
        // 鼠标控件
          new control.MousePosition({
   
            coordinateFormat: coordinate.createStringXY(4),
            projection: 'EPSG:4326',
            target: this.$refs.mousePositionTxt,
            placeholder: '这里是个默认值'
          })
        ]),
        layers: [
          new Tile({
   
            source: new BingMaps({
   
              key: 'AiZrfxUNMRpOOlCpcMkBPxMUSKOEzqGeJTcVKUrXBsUdQDXutUBFN3-GnMNSlso-',
              imagerySet: 'Aerial'
            })
          })
        ],
        view: new View({
   
          projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
          center: [114.064839, 22.548857],
          zoom: 6 // 地图缩放级别（打开页面时默认级别）
        })
      })
    }

在这里插入图片描述

投影:
地理坐标系是三维的，我们要在地图或者屏幕上显示就需要转化为二维，这被称为投影（Map projection）。显而易见的是，从三维到二维的转化，必然会导致变形和失真，失真是不可避免的，但是不同投影下会有不同的失真，这让我们可以有得选择。常用的投影有等矩矩形投影（Platte Carre）和墨卡托投影

地理坐标系统 :
4326 WGS-84：是国际标准，GPS坐标（Google Earth使用、或者GPS模块）
EPSG:4326 的数据一般是这种的。[114.05，22.37]。
所以我们常常看到和用到的坐标系数据往往不是墨卡托坐标，而是EPSG:4326坐标系下的坐标数据。因为是常见的坐标。百度使用的是EPSG:4326坐标系数据

创建图层

在这里插入图片描述

将 ‘样式’ 添加到 ‘图特性’ 中，创建矢量容器，将图标特性添加容器，再将容器放到矢量图层 最终加入地图的图层中

import 'ol/ol.css'
import {
    Map, View, Feature } from 'ol'
import Tile from 'ol/layer/Tile'
import LayerVector from 'ol/layer/Vector'
import SourceVector from

最低0.47元/天解锁文章