<template>
<div id="map"></div>
</template>
<script>
import "ol/ol.css";
import {
Map, View, Feature } from "ol";
import XYZ from "ol/source/XYZ";
import {
Vector as VectorSource } from "ol/source";
import {
Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import {
Style, Stroke } from "ol/style";
import {
LineString} from "ol/geom";
export default {
data() {
return {
map: null,
roadmap: null,
vectorLayer: null, //创建图层
vectorSource: null, //图层数据容器
localtion: [113.5658865038278, 34.82244974031979],
coordinateGroup: [ //二维数组且必须是number类型
[
113.5658865038278,
34.82244974031979
],
[
113.56600415226623,
34.822519711441146
],
[
113.56610983687841,
34.82258068399297
],
[
113.56621651914965,
34.82264465922389
],
[
113.56633516621055,
34.822712628887395
],
[
113.56644484042172,
34.82277359939242
],
[
113.56655152423099,
34.82283657493385
],
[
113.56665920551488,
34.82289854903623
],
[
113.56676788434261,
34.82296052274851
],
[
113.5668546284015,
34.82301050261998
],
[
113.56697228186611,
34.8230794770022
],
[
113.56707896814156,
34.82314145363833
],
[
113.5671866519726,
34.82320342989416
],
[
113.56730530424285,
34.823272404952874
],
[
113.56741398622616,
34.82333438133249
],
[
113.56752366580177,
34.823396357362526
],
[
113.56763035478316,
34.823459337276894
],
[
113.56773604721097,
34.823522318418796
],
[
113.56784174009105,
34.823584298951744
],
[
113.56795840171922,
34.82365327854876
],
[
113.56806509274989,
34.82371525920379
],
[
113.56817178424451,
34.82377623925931
],
[
113.56827947340484,
34.82383822001834
],
[
113.56838816019234,
34.82390020045678
],
[
113.56850582182767,
34.82396918174404
],
[
113.56859057844467,
34.82401816786626
],
[
113.5686892953319,
34.82407415094237
],
[
113.56877405276872,
34.824125139740325
],
[
113.56884983613533,
34.824170129337695
],
[
113.56891664533839,
34.82420911965556
],
[
113.56897846895785,
34.82424511075731
],
[
113.56902433827786,
34.824273105589704
],
[
113.56906223033695,
34.824295100209845
],
[
113.56909015088632,
34.82431209710039
],
[
113.5691110912815,
34.82432409401015
],
[
113.56912006568128,
34.82432809150545
],
[
113.56912106281311,
34.82432809076629
],
[
113.56912106275931,
34.82432708972895
],
[
113.56912205994502,
34.82432809002718
],
[
113.56912305707695,
34.824328089288116
],
[
113.56912505139475,
34.824329088847435
],
[
113.56912505128714,
34.824327086772755
],
[
113.5691210627055,
34.82432608869162
],
[
113.56912006551984,
34.824325088393415
],
[
113.5691210627055,
34.82432608869162
],
[
113.56912205983738,
34.824326087952514
],
[
113.56912405415513,
34.82432708751175
],
[
113.56912405415513,
34.82432708751175
],
[
113.56912305691554,
34.824325086176096
]
]
}
},
methods: {
initMap() {
let _self = this;
//线路图
this.roadmap = new TileLayer({
visible: true,
name: '电子图',
source: new XYZ({
url: 服务地址+"/tiles/ZhengZhouShi/roadmap/{z}/{x}/{y}.png",
crossOrigin: "anonymous", //离线瓦片跨域处理
}),
});
this.map = new Map({
target: "map",
layers: [this.roadmap],
view: new View({
center: this.localtion,
projection: "EPSG:4326",
zoom: 14,
minZoom: 12,
maxZoom: 17,
}),
});
// 创建图层
this.vectorLayer = new VectorLayer();
// 创建数据容器
this.vectorSource = new VectorSource();
// 把数据容器添加到图层
this.vectorLayer.setSource(this.vectorSource);
// 添加到地图上
this.map.addLayer(this.vectorLayer);
this.flightpath();
},
//飞行轨迹
flightpath() {
let line = new LineString(this.coordinateGroup);
let lineFeature = new Feature(line);
lineFeature.setStyle(
new Style({
stroke: new Stroke({
width: 4,
color: "#fc1d1d",
}),
})
);
this.vectorSource.addFeature(lineFeature);
},
}
};
</script>
<style scoped lang="scss">
#map{
width: 100%;
height: 800px;
}
</style>
效果图
