定制化天地图-叠加静态图层-并让它动起来
天地图提供了⽹络地图开发接⼝，同时有部分web开发的插件，但是本⽂遇到的场景并不考虑使⽤天地图本⾝的插件，⽽是使⽤openlayer6.x完成需求。
⼀、需求
加载天地图影像图层
加载天地图⽮量图层
在图层上叠加静态图⽚，以增强展⽰效果
希望图⽚能动起来-旋转以实现雷达图的效果
⼆、技术选型
html5+css3
vuejs
elementui
三、天地图服务注册
这⾥使⽤的是天地图的，api提供了较多开源接⼝，⼤家可以按需使⽤。
注：，并受到⽇访问次数限制，⽣产环境使⽤，可以升级企业级或政府部门级别，以减少限制。
四、依赖引⼊
这⾥只是openlayer的依赖，vue相关的暂不赘述
//这⾥只是openlayer的依赖，vue相关的暂不赘述
//openlayer官⽹的⽰例的依赖⽐这⾥要多，其他的⽤不到，不需要引⼊
"ol": "6.9.0"
五、模块导⼊
import 'ol/ol.css';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
//WMTS的图层模块
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
//坐标模块
import {get as getProjection} from 'ol/proj';
import {getTopLeft, getWidth} from 'ol/extent';
import View from 'ol/View';
//图⽚图层
import ImageLayer from 'ol/layer/Image';
import Static from 'ol/source/ImageStatic';
/
/静态图⽚的路径
拿毛笔的正确姿势import mapXWImg from '@/asts/test3.png';
六、构造影像图层
引⼊天地图的影响图层
//影像图层
let wmtsLayer = new TileLayer({
opacity: 1,
source: new WMTS({
attributions:
'Tiles © <a href="#"' +
' target="_blank">skyocar</a>',
url: 't{0-7}.v/img_c/wmts?tk=' + this.webKey,
layer: 'img',
matrixSet: 'c',
format: 'image/png',
projection: this.projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds,
}),
style: 'default',
wrapX: true,
}),
});
七、构造⽮量图层
⽮量图层的加载是为了地图上展⽰出地理位置标识等。
//这个是⽮量标绘图层，标注底图中的各⽂字信息
let cvaLayer = new TileLayer({
opacity: 0.7,
source: new WMTS({
url: 't{0-7}.v/cva_c/wmts?tk=' + this.webKey,
layer: 'cva',
matrixSet: 'c',
format: 'tiles',
projection: this.projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
巨蟹座男生的性格脾气matrixIds: matrixIds,
}),
style: 'default',
ipo抑价wrapX: true,
}),
});
⼋、加载静态图⽚层
静态图⽚的加⼊可以应对局部地图增强。主要的难点在于中⼼点定位，这⾥采⽤中⼼定位法，让图⽚的中⼼定位到当前屏幕地图中⼼位置，并设置特定⽐例的缩放。利⽤中⼼点控制、缩放控制，把图⽚完美的覆盖到地图特定的点位（这也是此次的核⼼诉求）。
图⽚图层定位的⽅法是尝试出来的，并没有找到准确的定位策略，如下。
这⾥的 -- this.mapCenter = [118.6504, 32.0143]
/** 叠加图⽚图层 */
getImageLayer: function () {
let p = 0.0001; //图⽚的缩放尺⼨，通过调整图⽚的加载尺⼨和中⼼点位置，可以调整图⽚到合适的位置加载 let w = 1210, h = 1210; //图⽚的宽、⾼
const imageExtent = [
this.mapCenter[0] - w * p / 2, this.mapCenter[1] - h * p / 2,
this.mapCenter[0] + w * p / 2, this.mapCenter[1] + h * p / 2
];
return new ImageLayer({
className: "image_css",
extent: imageExtent,
source: new Static({
url: mapXWImg,
projection: this.projection,
imageExtent: imageExtent,
dragPan: fal
}),
})
},
九、加载地图主类
<template>
<div class="app-container">
<div id="map" class="map" ref="rootmap">
</div>
</div>
</template>
<style lang='scss'>
.
map {
width: 100%;
height: 800px;
}
#mou-position {
float: right;
position: absolute;
right: 3px;
width: 200px;
height: 20px;
/* 将z-index设置为显⽰在地图上层 */
z-index: 2000;
}
</style>
this.pageMap = new Map({
layers: [
wmtsLayer,
cvaLayer,
imageLayer,
],
target: 'map',
view: new View({
center: this.mapCenter,
projection: this.projection,
zoom: 13,
}),
});
效果如下：
⼗、让静态图⽚层动起来
这⾥是为了应对雷达图的效果，请UI同学切了个雷达图⽚，然后我控制旋转，就完成了雷达图了。这⾥是使⽤css3让地图动起来的，代码如下：
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.image_css {
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
时空飞船-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
效果如下：
南岳衡山旅游攻略⼗⼀、完整的代码
<template>
<div class="app-container">
<div id="map" class="map" ref="rootmap">
</div>
</div>
</template>既往不咎的意思
<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import {get as getProjection} from 'ol/proj';
小学教师教学随笔
import {getTopLeft, getWidth} from 'ol/extent';
import View from 'ol/View';
import ImageLayer from 'ol/layer/Image';
import Static from 'ol/source/ImageStatic';
//静态图⽚的路径
import mapXWImg from '@/asts/test3.png';
export default {
name: 'OlMap',面试问缺点
props: ['tableData', 'targetPoint'],
data() {
return {
map1: null,
view: null,
vectorSource: null,
mouPositionControl: null,
/** webKey 来源于天地图的开发者密钥，个⼈开发者有访问限制（每天1万次），
* 上线项⽬应该使⽤客户的信息申请企业或政府，以解除访问限制 v/api/traffic */ webKey: 'you key',
mapCenter: [118.6504, 32.0143], //底图初始中⼼点
projection: getProjection('EPSG:4326'),
pageMap: null
}
},
created() {
},
activated() {
},
mounted() {
const projectionExtent = Extent();
const size = getWidth(projectionExtent) / 256;
const resolutions = new Array(19);
const matrixIds = new Array(19);
for (let z = 0; z < 19; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
