OpenLayers基础学习(Vue)
源文档:https://openlayers.org/中文文档:http://linwei.xyz/ol3-primer/index.html本文的openlayers的版本是6.14.1,结合vue使用的。安装olnpm i ol地图的重要组成部分地图 Map是一个入口视图 View控制地图显示的中心位置,范围,层级等图层 Layer有很多图层,每种图层在实现上都对应于一个类,放在ol.laye
·
源文档:https://openlayers.org/
中文文档:http://linwei.xyz/ol3-primer/index.html
本文的openlayers的版本是6.14.1,结合vue使用的。
安装ol
npm i ol
地图的重要组成部分
- 地图 Map
- 是一个入口
- 视图 View
- 地图的中心点设置、放大、投影、非整数的缩放级别等之类的设置
- 可以通过map.setView()对地图进行设计
- center、zoom、projection、constrainResolution
- 图层 Layer
- 有很多图层,每种图层在实现上都对应于一个类,放在ol.layer下面,比如layer.Title(切片图层)。它允许多个layer重叠且相互之间不干扰。
- 其分类主要有 WebGLPoints Layer、热度图(HeatMap Layer)、图片图层(Image Layer)、切片图层(Tile Layer) 和 矢量图层(Vector Layer) 五种类型,它们都是继承 Layer 类的。
- 数据源 Source
- 在ol.source包下面,获取layer层的远程数据源。
- 控件 Control
- 地图全屏、比例尺、鼠标经纬度、缩放控件。
- FullScreen、MousePosition、ScaleLine、ZoomSlider
- target容器
- 地图容器
基本使用
地图源的瓦片图层 使用高德资源
<template>
<div>
<div class="ol-map" ref="olMap"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { Tile as TileLayer } from "ol/layer";
import { XYZ } from "ol/source";
// fromLonLat方法能将坐标从经度/纬度转换为其他投影
import { fromLonLat } from "ol/proj";
export default {
data() {
return { map: null };
},
components: {},
computed: {},
methods: {
initMap() {
// 地图源的瓦片图层 使用内置的OSM 它是一种应用瓦片图片作为地图源的地图层
//const tileLayer = new TileLayer({
// source: new OSM()
//})
// 地图源的瓦片图层 使用高德
const tileLayer = new TileLayer({
source: new XYZ({
// http://webrd01.is.autonavi.com/appmaptile?x=54658&y=26799&z=16&lang=zh_cn&size=1&scale=1&style=8
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: [tileLayer], //地图源的瓦片图层
// 设置显示地图的视图
view: new View({
center: fromLonLat([120.771441, 30.756433]), //地图中心点 经纬度
zoom: 15, // 缩放级别-显示层级
minZoom: 0, // 最小缩放级别
maxZoom: 18, // 最大缩放级别
}),
//olMap为map的地图容器
target: this.$refs.olMap, // DOM容器
});
this.map.addLayer(tileLayer); map.removeOverlay(marker);
},
},
mounted() {
this.initMap();
},
};
</script>
<style lang="less" scoped>
.ol-map {
width: 100%;
height: 500px;
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)