前言

这两学习到了地图开发，去搜了一下免费开源平台有好多，其中以百度，高德，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:4326projection: "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=天地图注册浏览器端tk6. 天地图矢量地图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=天地图注册浏览器端tk7. 天地图矢量标注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=天地图注册浏览器端tkXYZ参考:
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 >

OpenLayers 学习笔记（一）相关推荐

OpenLayers学习笔记5——使用jQuery UI实现查询并标注（UI篇）
近期事情非常多,老板给的压力也非常大.经常出差,另外项目和个人研究还都要跟上,本月要交论文,还要写专利,仅仅能抽时间来学习其它的东西了. 关于OpenLayers的在博客中不会写太多详细的实现(网上有 ...
OpenLayers学习笔记高级篇（一、openlayers画点线面）
话不多说直接上代码: <!doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <me ...
OpenLayers学习笔记中级篇（一、各种地图的加载）
学习了前面的初级篇,相信大家对OplenLayers已经有了一个初步的认识,下面我们再继续深入学习OpenLayers的相关功能! 我们这节主要是加载各种各样的地图,包括在线服务的地图,比如天地图.高 ...
OpenLayers学习笔记2——坐标转换问题
參照别人的加入marker的demo来改造时.发现不管如何更改经纬度,都是停留在同一个位置.过了一两天突然想起可能是坐标參考的问题.尝试搜了一下.果然是这个问题. 问题是这样子的: WMTS中地图的坐 ...
OpenLayers学习笔记高级篇（二、地图控件）
在OpenLayers 3中,地图控件指的是下图标注的这些,包括缩放按钮,标尺,版权说明,指北针等等. 他们不会随着地图的移动而移动,一直处于一个固定的位置. 在实现上,并不是在画布上绘制的,而是使用 ...
OpenLayers学习笔记6——使用jQuery UI实现查询并标注（功能实现篇）
本篇博客接上篇是关于OpenLayers的地图标注及弹出窗(marker+popup),先来看下效果图: 本篇参考了博客:[openlayers]CSS3样式的Popups
OpenLayers学习笔记高级篇（四、地图开发实战之地图要素的增删改查）
一切都准备好了,现在终于可以通过ol3加载配置好的数据了.上一节中最后的预览结果,大家已经看到了,此处我们自己通过ol来实现这个预览页面,直接上代码如下: 1.加载Geoserver发布的wfs地图服 ...
OpenLayers学习笔记7——使用javaBean实现用户登录
之前的开发是采用phpStorm,前端:html+css+javascript+jquery,服务器端:php:但是这个前后台交互要通过ajax来实现数据交互,中间遇到了跨域的问题,卡了两天虽然解决了 ...
openlayers地图旋转_地图切换动画#openlayers入门笔记#
本博客合集是我的openlayers学习笔记,希望能帮助到刚开始接触openlayers的同学 @commnet 所用openlayers版本:v5.3.0 @commnet 阅读本文前需要对前端知识 ...

OpenLayers 学习笔记（一）

前言

OpenLayers简介

基本概念

安装

初始化地图

完整代码：

OpenLayers 学习笔记（一）相关推荐

最新文章

热门文章