openlayers入门学习
这里写目录标题
-
- 参考文档
- npm安装
- OSM地图服务
-
-
- 组件使用
- 效果图
-
- XYZ瓦片图服务（天地图）
-
-
- 注意
- 参考文档
- 组件使用
-
- XYZ瓦片图服务（百度地图）（不推荐）
-
-
- 参考文档
-
- GeoServe服务以及绘制标注点
-
-
- 组件使用
- 效果图
-
- 静态图片底图
-
-
- 参考文档
- 组件使用
- 效果图
-
参考文档
Openlayers官网
EPSG:3857和EPSG:4326区别详解—重点文档
通常：数据存储在EPSG:4326中，显示在EPSG:3857中，所以一定要注意坐标系切换问题。
npm安装
cnpm i -S ol
OSM地图服务
参考文档01
参考文档02
组件使用
<template>
<div class="home">
<div id="map"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
export default {
data () {
return {
map: null
};
},
mounted () {
this.map = new Map({
target: "map",
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
projection: "EPSG:4326", //坐标系，即地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。
center: [116.3972282409668, 39.90960456049752], //中心点坐标，即北京天安门
zoom: 12
})
});
}
};
</script>
<style lang="less" scoped>
#map {
height: 600px;
}
/*隐藏ol的一些自带元素*/
// 隐藏zoom组件
/deep/.ol-zoom {
display: none;
}
// 隐藏右下角版权信息
/deep/.ol-attribution.ol-uncollapsible {
display: none;
}
</style>
效果图
XYZ瓦片图服务（天地图）
注意
1、使用天地图、谷歌地图、高德地图、百度地图等，要注意其坐标系与openlayers中的projection下的EPSG对应。如使用天地图、谷歌地图可直接使用EPSG:4326，而对于高德地图、百度地图则需要特殊处理。（下文有百度地图推荐学习文档，但是我本人不推荐使用高德地图、百度地图，主要就是坐标系问题）
2、openlayers中的XYZ下的url，即地图服务的请求地址，可通过f12查看相应地图服务的请求地址。
参考文档
注意：天地图共有 8 个服务地址，子域名分别从 t0 到 t7，不同图层放入不同服务中。
参考文档1
参考文档2
参考文档3
组件使用
<template>
<div>
<h2>天地图地图服务</h2>
<div id="map"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
export default {
data () {
return {
map: null
};
},
mounted () {
this.map = new Map({
target: "map",
layers: [
// 天地图路网
new TileLayer({
source: new XYZ({
url: 'http://t4.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087'
})
}),
// 加载注记图层
new TileLayer({
source: new XYZ({
url: 'http://t3.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087'
})
}),
// 加载卫星影像
// new TileLayer({
// source: new XYZ({
// url: 'http://t3.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087'
// })
// }),
],
view: new View({
projection: "EPSG:4326", //坐标系，即地球坐标系——WGS84：常见于 GPS 设备，Google 地图等国际标准的坐标体系。
center: [116.3972282409668, 39.90960456049752], //中心点坐标，即北京天安门
zoom: 12
})
});
}
};
</script>
<style lang="less" scoped>
#map {
height: 600px;
}
/*隐藏ol的一些自带元素*/
// 隐藏zoom组件
/deep/.ol-zoom {
display: none;
}
// 隐藏右下角版权信息
/deep/.ol-attribution.ol-uncollapsible {
display: none;
}
</style>
XYZ瓦片图服务（百度地图）（不推荐）
参考文档
参考文档01
参考文档02
参考文档03
参考文档04
参考文档05
GeoServe服务以及绘制标注点
组件使用
<template>
<div id="container">
<div id="map"
style="width: 100%; height: 100%"></div>
</div>
</template>
<script>
import 'ol/ol.css'
import { Map, View, Feature } from 'ol'
import Projection from 'ol/proj/Projection'
import { Vector as SourceVec, ImageWMS } from 'ol/source'
import { Point } from 'ol/geom'
import { Style, Icon, Text, Fill } from 'ol/style'
import { Vector as LayerVec, Image } from 'ol/layer'
export default {
data: function () {
return {
map: {},
loading: false,
testData: [
{
id: "6752845443727622144",
name: "80103、9201及9202",
riskLevel: "1",
x: "-5302.402919149073",
y: "3541.8358675377112",
},
{
id: "6748440227615866880",
name: "80103综采工作面",
riskLevel: "2",
x: "-5171.282981056542",
y: "3756.727781547658",
},
{
id: "6748440575126536192",
name: "9202综采工作面",
riskLevel: "3",
x: "-5257.1690025799835",
y: "3363.13658939467",
},
{
id: "6748513045875523584",
name: "9202工作面安装",
riskLevel: "3",
x: "-5304.907056761922",
y: "3246.4338306089517",
}
],
};
},
created () { },
mounted () {
this.initMap()
},
methods: {
initMap () {
let that = this
let mapUrl = "http://111.229.215.211:8080/geoserver/sxmap/wms"
let mapName = "sxmap:hfshape"
let myCode = "EPSG:404000"
let myUnits = 'degrees'
//wms的边界范围
let extent = [-5783.940779486906, 2420.684125662136, -3999.448596040022, 5088.623484956386]
//wms作底图
let wmsLayer = [
new Image({
source: new ImageWMS({
ratio: 1,
url: mapUrl,
params: {
'FORMAT': 'image/png',
'VERSION': '1.1.1',
"STYLES": '',
"LAYERS": mapName,
"exceptions": 'application/vnd.ogc.se_inimage',
}
})
})
];
// 坐标系
let projection = new Projection({
code: myCode,
units: myUnits,
global: false
})
//定义地图对象
that.map = new Map({
layers: wmsLayer,
target: 'map',
view: new View({
projection,
zoom: 4,
maxZoom: 20,
}),
});
// 根据范围让地图元素居中显示 重点
that.map.getView().fit(extent, that.map.getSize());
// 获取风险点
this.loadData();
},
loadData () {
this.addAllLayerToMap(this.testData)
},
// 风险点标注
addAllLayerToMap (dataList) {
let that = this
let features = []
// 矢量元素定义 点类型 设置myData用于绑定数据
features = dataList.map(data => {
const { x, y } = data;
return new Feature({
geometry: new Point([x, y], "XY"),
myData: data
})
})
// 矢量元素样式设置 图标、文本
features.forEach(feature => {
feature.setStyle(() => {
return new Style({
image: new Icon({
opacity: 0.75,
src: require(`@/assets/home/map/${feature.values_.myData.riskLevel}.png`)
}),
text: new Text({
text: `${feature.values_.myData.name}`,
fill: new Fill({
color: "#fff",
}),
offsetY: 26,
}),
})
})
})
//创建矢量容器
let vectorSource = new SourceVec({
features: features,
});
//创建矢量层
let vectorLayer = new LayerVec({
source: vectorSource,
});
that.map.addLayer(vectorLayer);
// 监听singleclick事件,通过点击事件，获取对应点的feature图标
that.map.on('singleclick', function (e) {
console.log(e.coordinate)
if (that.map.hasFeatureAtPixel(e.pixel)) {
let feature = that.map.getFeaturesAtPixel(e.pixel)
that.toRisksPage(feature[0].values_.myData)
}
})
},
toRisksPage (data) {
this.$router.push({
path: "/risks",
query: {
riskPointId: data.id,
riskPointName: data.name,
},
});
},
},
};
</script>
<style lang="less" scoped>
#container {
height: 800px;
}
</style>
效果图
静态图片底图
参考文档
参考文档01
参考文档02
参考文档03
参考文档04
组件使用
默认图片左下角为原点
<template>
<div id="map"></div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { Image as ImageLayer } from "ol/layer";
import { ImageStatic } from "ol/source";
import { getCenter } from "ol/extent";
import { Projection } from "ol/proj";
import staticMap from "@/assets/map.png";
export default {
data () {
return {
map: null, // 地图
imgx: 0, // 当前地图宽
imgy: 0, // 当前地图高
};
},
mounted () {
let img = new Image();
img.src = staticMap;
let that = this;
img.onload = function (res) {
that.imgx = res.target.width;
that.imgy = res.target.height;
that.initMap();
};
},
methods: {
// 初始化地图
initMap () {
let extent = [0, 0, this.imgx, this.imgy]; // 获取图片的宽高
let projection = new Projection({
code: "xkcd-image",
units: "pixels",
extent: extent
});
this.map = new Map({
target: "map",
layers: [
new ImageLayer({
source: new ImageStatic({
url: staticMap, // 静态地图
projection: projection,
imageExtent: extent // 映射到地图的范围
})
})
],
view: new View({
projection: projection,
center: getCenter(extent),
zoom: 2,
maxZoom: 18,
minZoom: 2,
})
});
// 监听地图点击事件 获取点击的坐标
this.map.on('singleclick', mapClick);
function mapClick (e) {
console.log(e.coordinate)
}
},
},
};
</script>
<style>
#map {
height: calc(100vh - 50px);
}
</style>
效果图
