OpenLayers 学习笔记（一）

蛐蛐棒

已于 2023-05-19 16:48:24 修改

阅读量441

点赞数 1

分类专栏： openlerys 文章标签：学习笔记 vue.js

于 2023-05-12 18:50:29 首次发布

本文链接：https://blog.csdn.net/m0_56972934/article/details/130635074

版权

openlerys 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

这两学习到了地图开发，去搜了一下免费开源平台有好多，其中以百度，高德，OpenLayers这三个使用最多，这次主要是以OpenLayers进行学习记录本文基本都是自己在du来的在线记录

OpenLayers简介

OpenLayers（openlayers.org/）是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库，可以满足几乎所有的地图开发需求。

有如下特点：

支持任何XYZ瓦片资源，同时也支持OGC的WMTS规范的瓦片服务以及ArcGIS规范的瓦片服务
支持矢量切片，包括pbf、GeoJSON、TopoJSON格式
支持矢量图层，能渲染GeoJSON、TopoJSON、KML、GML和其他格式的矢量数据
支持OGC制定的WMS、WFS等GIS网络服务规范
支持在移动设备上运行
可以通过css来为地图控件设置样式
面向对象开发方式，在OpenLayers中万物皆对象

OpenLayers虽然很强大，但是因为一切皆对象，所以使用起来很麻烦，再加上无比难看的文档，所以对新手极其不友好，这也是本系列文章的初衷，旨在基于实际业务开发的场景下来沉淀一些内容，来帮助新手使用OpenLayers。

因为我是使用的是vue，所以以vue为方向

基本概念

map： Openlayers 的使用的基础，所有的图层、地图控件、地图工具等必须添加到 Map 中才能使用。（别的不用想，这个是初始化地图时必不可少的一个，基本上所有东西都要在map里面，使用的时候是 new map ，和vue 的new vue 实例的意思差不多，他的意思就是地图）

view：view 用来设置地图的展示位置范围、地图中心位置以及当前地图使用的投影坐标系（有很多坐标系，如地理坐标系：4326）等，也可以设置地图旋转等（顾名思义，这个东西就是视图，你的地图显示的一些设置都在这个里面比如：范围，中心点，等等）

layer->source：这是整个 Openlayers 的灵魂，source 分为矢量数据源和影像数据源。有时候底图使用影像数据，而与我们业务相关的河流、行政区、水环境监测点等都是矢量数据(XYZ:这个东西有免费的和收费的具体可以自己百度使用其他的在线瓦片服务，比如：百度、高德、天地图、必应、谷歌等，具体服务地址可以自行百度，本文使用的是高德的服务，详情可参考：www.jianshu.com/p/e34f85029…。（找到一个瓦片库库整就行了）

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}'
    })
})

target：这个是初始化地图的时候不可缺少的，对没错，他就是一个把地图绑定到dom的东西，和vue中的 el：app 用法类似

安装

npm i ol

初始化地图

（初始化地图要导入对应的包哦）

import { Map, View } from "ol";//地图,视图
import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片
import TileLayer from "ol/layer/Tile"; //可以理解为图层
import { fromLonLat } from "ol/proj";//将坐标从经度/纬度转换为不同的投影。
import {XYZ} from "ol/source";

在vue中需要在data中注册一个变量用来存储地图map，然后在methods中注册一个方法，然后在挂载的时候调用这个方法就行了

需要注意的是，初始的地图挂载的div必须具有初始化的宽高，否则不显示

 createMap() {
      this.map = new Map({
        target: "map",//挂载到div id=map 上
        layers: [
         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}'
    })
})

        ],
        view: new View({
        //地图显示的中心点
          center: [116.394926, 39.9125],
            // “EPSG:4326”,在地图上将经纬度直接当做X/Y对待(最常用)， "EPSG:3785"又称为球面墨卡托投影，如果不设置默认为 EPSG:4326
          projection: "EPSG:3857",
                // 缩放级别
             zoom: 15,
                // 最小缩放级别
        minZoom: 0,
            // 最大缩放级别
        maxZoom: 18,
            // 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
        constrainResolution: true
   

        
        }),
      });
    },

到现在就可以看到你的地图已经出来了

完整代码：

<template >
  <div class="hello" >
    <div id="map" ></div >
  </div >
</template >

<script >

import Map from 'ol/Map'
import View from 'ol/View'
import {Tile as TileLayer} from 'ol/layer'
import {XYZ} from 'ol/source'
import {MousePosition, defaults, FullScreen, ScaleLine} from "ol/control";


//将坐标从经度/纬度转换为不同的投影
/*
1. 高德矢量图
* https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
2. 高德影像图

https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
3. 高德路网图

https://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=2&style=8&ltype=11%0A%0A
4. 天地图影像图

https://t3.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=天地图注册浏览器端tk
5. 天地图影像图标注，里面包含了路网和标注。

https://t2.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=天地图注册浏览器端tk
 6. 天地图矢量地图

https://t6.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=天地图注册浏览器端tk
 7. 天地图矢量标注

 https://t2.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=天地图注册浏览器端tk


 XYZ参考:
http://openwhatevermap.xyz/
高德参考：https://blog.csdn.net/ldlzhy1984/article/details/81015180
https://blog.csdn.net/fredricen/article/details/77189453
高德矢量图：https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
高德遥感图：http://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}

OSM标准底图：https://tile.openstreetmap.org/{z}/{x}/{y}.png
Staman水彩图：http://a.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg
Mapbox底图：https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=<mapbox key>

天地图矢量图：https://t6.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=<tianditu key>
天地图矢量注记：https://t2.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=<tianditu key>
天地图遥感图：https://t3.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=<tianditu key>
天地图遥感注记：https://t2.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=<tianditu key>

WMTS:
Mapbox：https://api.mapbox.com/styles/v1/mapbox/streets-v11/wmts?access_token=<mapbox key>

WFS:
天地图：http://gisserver.tianditu.gov.cn/TDTService/wfs

注：Mapbox现在都用矢量瓦片了，还不知道怎么加


天地图：  map tk ：4054e28b1742bb679fe4cc07473360bc
*
* */
export default {
  name: 'HelloWorld',
  data() {
    return {
      map: null,
      tdmap_b: 'https://t6.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=' +
          '1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET' +
          '=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=4054e28b1742bb679fe4cc07473360bc',
      tmap_bei: ' https://t2.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET' +
          '=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=4054e28b1742bb679fe4cc07473360bc',
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new Map({
        logo: false,
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: this.tdmap_b
            })
          }),
          new TileLayer({
            source: new XYZ({
              url: this.tmap_bei
            })
          })
        ],
        view: new View({
          center: [1125377, 464926],
          zoom: 8,
        }),
        controls: defaults({
          //去除默认的控制控件
          zoom: false,
          rotate: false,
          attribution: false,
        }).extend([
          new FullScreen(), // 全屏
          this.data_move = new MousePosition(), // 显示鼠标当前位置的经纬度
          new ScaleLine()// 显示比例尺
        ]),
      })
    },
  }
}
</script >

<style scoped >
#map {
  width: 900px;
  height: 500px;
  margin: 0 auto;
}
</style >

蛐蛐棒

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
OpenLayers 学习笔记（一）

是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库，可以满足几乎所有的地图开发需求。支持任何XYZ瓦片资源，同时也支持OGC的WMTS规范的瓦片服务以及ArcGIS规范的瓦片服务支持矢量切片，包括pbf、GeoJSON、TopoJSON格式支持矢量图层，能渲染GeoJSON、TopoJSON、KML、GML和其他格式的矢量数据支持OGC制定的WMS、WFS等GIS网络服务规范支持在移动设备上运行可以通过css来为地图控件设置样式。
复制链接

扫一扫