1.原先
mapLayer = new TileLayer({
visible: true,
source: new TileArcGISRest({
url: ‘’
})
});
所有图片都报了500的错误然后点击还是能够选择到地理位置
2. 几经波折后改为xyz切片
<template>
<div class="map-show-page">
<!-- 地图 -->
<div
ref="MapShowRef"
class="map"
/>
<!-- 经纬度的显示
<div class="click-center">
{{ clickCenter }}
</div> -->
</div>
</template>
<script>
import 'ol/ol.css';
import { Map, View,Feature} from 'ol';
import TileGrid from 'ol/tilegrid/TileGrid';
import TileLayer from 'ol/layer/Tile';
import { XYZ,TileArcGISRest } from 'ol/source';
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import {Style,Icon} from 'ol/style';
import { Point } from 'ol/geom';
import mapConfig from './config/map-config';
export default {
name: 'MapShow',
components: {
},
props: ['inputData'],
data() {
return {
mapData: null,
mapCenter: [117.792450 ,26.397300],
// mapCenter: [118.089425, 24.479883],
mapZoom: 20,
clickCenter: [0, 0],
defaultIconImage: require('./images/red_mark.png'),
streetMap: 3,
sl: null,
sx: null,
iconLayer: null
};
},
watch: {
inputData(newV) {
console.log(newV);
},
},
mounted() {
this.initMap(); // 初始化地图
},
methods: {
/**
* 初始化地图
*/
initMap() {
var tileGrid = new TileGrid({
tileSize: 256,
origin: [-180.0, 90.0],
//地图服务中Full Extent
extent: [117.49909311532974, 26.051648408174515, 118.15577566623688, 26.725468933582306],
//地图服务中每个layers Resolution
resolutions: [
5.36441802978515E-06,
2.68220901432155E-06,
1.341104507446289E-6]
});
// 矢量注记
this.sl = new TileLayer({
id: 'cva',
source: new XYZ({
url: '服务地址/tile/{z}/{y}/{x}',
projection: 'EPSG:4490',
tileGrid: tileGrid,
}),
//设置层级 注记显示在地图上面
zIndex: 10
});
// 地图
this.base = new TileLayer({
id: 'base',
source: new XYZ({
url: '服务地址/tile/{z}/{y}/{x}',
projection: 'EPSG:4490',
tileGrid: tileGrid,
}),
zIndex: 9
});
const mapContainer = this.$refs.MapShowRef;
// const fullScreen = new olControl.FullScreen(); // 全屏控件,显示在右上角
const map = new Map({
layers: [this.sl ,this.base ],
// controls: [fullScreen],
target: mapContainer,
view: new View({
projection: 'EPSG:4326',
center: this.mapCenter,
// minZoom: 18,
moveFlag: true,
rotation: 0,
popupOffset: [0, 0],
zoom: 20,
// maxZoom: 20
})
});
// 添加鼠标点击事件
map.on('click', (evt) => this.mapClick(evt));
// 添加鼠标经过事件
// map.on('pointermove', (evt) => this.mapPointerMove(evt));
this.mapData = map;
},
// 获取当前位置
getLocation() {
new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition((pos) => {
const coords = pos.coords || {};
const { latitude, longitude } = coords;
const position = wgs84ToGCJ02(longitude, latitude);
this.mapCenter = position;
}, (e) => {
reject(e);
}, {
timeout: 10000,
maximumAge: 10000
});
});
},
/**
* 地图点击
*/
mapClick(evt) {
// console.log(evt);
this.clickCenter = evt.coordinate; // 获取点击的中心点
if(evt.coordinate) {
this.$emit('clickData',evt.coordinate);
}
this.removeIcon();
// 创建矢量容器
const vectorSource = new VectorSource({});
// 创建图标特性
const iconFeature = new Feature({
type: 'icon',
name: 'mapIconMark',
geometry: new Point(evt.coordinate)
});
// 图标特性添加到矢量容器
vectorSource.addFeature(iconFeature);
// 创建矢量层
this.iconLayer = new VectorLayer({
className: 'map-icon-mark',
source: vectorSource,
zIndex: 100000,
// 创建图标样式
style: new Style({
image: new Icon({
src: require('@/assets/images/blueLocation.svg'),
scale: 0.1
}),
})
});
this.mapData.addLayer(this.iconLayer);
},
// 取消图标
removeIcon() {
if (this.iconLayer) {
// 移除图层
this.mapData.removeLayer(this.iconLayer);
this.iconLayer = null;
}
},
/**
* 鼠标划过地图事件
*/
mapPointerMove(evt) {
if (evt.dragging) {
return false;
}
},
}
};
</script>
<style scoped lang="less">
.map-show-page {
position: relative;
width: 48vw;
height: 48vh;
.map {
width: 100%;
height: 100%;
}
.click-center {
position: absolute;
top: 10px;
right: 60px;
padding: 10px;
z-index: 2;
background: #000;
color: #fff;
border-radius: 4px;
}
.show-btn-block {
position: absolute;
display: flex;
flex-flow: column;
top: 5px;
left: 5px;
z-index: 2;
.row {
margin-bottom: 5px;
}
}
}
</style>
3.openlayser 带有的projection是4326和3857
但是天地图等服务偶尔projection不一样,例如4490,具体看服务里面的地址:Spatial Reference
所以要使用proj4注入
方法:
npm install proj4
新建4490.js文件
import proj4 from ‘proj4’;
import {register} from ‘ol/proj/proj4’;
import { Projection,addProjection} from ‘ol/proj’;
proj4.defs(‘EPSG:4490’,‘+proj=longlat +ellps=GRS80 +no_defs’);
register(proj4);
var projection = new Projection({
code: ‘EPSG:4490’,
units: ‘degrees’,
axisOrientation: ‘neu’
});
projection.setExtent([-180, -90, 180, 90]);
projection.setWorldExtent([-180, -90, 180, 90]);
addProjection(projection);
main 引入4490.js文件