鼠标位置控件
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 'ol/source/Vector'
import Point from 'ol/geom/Point'
import { Style, Regularshape, Fill, stroke } from 'ol/style'
export default {
name: 'SetZIndex',
data () {
return {
map: null,
squareZIndex: 1,
triangleZIndex: 0,
starZIndex: 0,
styles: {
'square': new Style({
image: new Regularshape({
fill: new Fill({ color: 'blue' }),
stroke: new stroke({ color: 'black', width: 1 }),
points: 4,
radius: 80,
angle: Math.PI / 4
})
}),
'triangle': new Style({
image: new Regularshape({
fill: new Fill({ color: 'red' }),
stroke: new stroke({ color: 'black', width: 1 }),
points: 3,
radius: 80,
rotation: Math.PI / 4,
angle: 0
})
}),
'star': new Style({
image: new Regularshape({
fill: new Fill({ color: 'green' }),
stroke: new stroke({ color: 'black', width: 1 }),
points: 5,
radius: 80,
radius2: 4,
angle: 0
})
})
},
layer0: null,
layer1: null,
layer2: null
}
},
watch: {
squareZIndex (newVal) { // 方块所在图层的 Z-index
this.layer1.setZIndex(parseInt(newVal, 10) || 0)
},
triangleZIndex (newVal) { // 三角形所在图层的 Z-index
this.layer2.setZIndex(parseInt(newVal, 10) || 0)
},
starZIndex (newVal) { // 星形所在图层的 Z-index
this.layer0.setZIndex(parseInt(newVal, 10) || 0)
}
},
methods: {
initMap () {
this.layer0 = this.createLayer([40, 40], this.styles['star'], this.starZIndex)
this.layer1 = this.createLayer([0, 0], this.styles['square'], this.squareZIndex)
this.layer2 = this.createLayer([0, 40], this.styles['triangle'], this.triangleZIndex)
// 如果zindex相等,那么