实现效果:
需求:根据返回的经纬度列表通过天地图、openlayers实现底图添加(航道图层、线图层、水深图层)
tk:自己申请的密钥
安装opelayers
cnpm i -S ol
#或者
npm install ol
<script>
// openlayers地图
import "ol/ol.css";
import {
Icon,
Style,
Stroke
} from "ol/style";
import 'ol/ol.css'
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { get as getProjection } from "ol/proj.js";
import { getBottomLeft, getTopRight } from 'ol/extent.js'
import { Vector as SourceVec } from 'ol/source';
import { Vector as LayerVec } from 'ol/layer';
import Overlay from "ol/Overlay";//弹窗
import {Point} from "ol/geom";
import {Feature} from "ol";
import { defaults as defaultControls } from "ol/control";//默认缩放
import {FullScreen,ScaleLine} from "ol/control";//全屏,比例尺控件
import TileGrid from 'ol/tilegrid/TileGrid';
import { LineString, Polygon } from 'ol/geom.js'
import { setTimeout } from 'timers';
import {Polyline} from "ol/format";
// import { vectorContext } from "ol/render";
import { getVectorContext } from "ol/render";
import {defaults as defaultInteractions} from 'ol/interaction';//旋转
export default {
data(){
tk:"密钥",
center:{
longitude:"",
latitude:""
},
map:null,
},
methods:{
initMap() {
let defaultsMap = {
tileUrl1:"图层地址1",
tileUrl2:"图层地址2",
tileUrl3:"图层地址3",
origin: [-400, 400],
zoom: 5,
resolutions: [
//根据项目需要设置
],
fullExtent: [
//根据项目需要设置
],
inters: [1000, 100],
center: [this.center.longitude, this.center.latitude],
projection: getProjection("EPSG:4326")
};
// let projection = getProjection('EPSG:4326');
// 底图天地图注记 cta——道路+中文注记
let baseLayer = new TileLayer({
title: "天地图",
source: new XYZ({
url:"http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" +this.tk
}),
zIndex: 2
});
//天地图路网
let roadLayer = new TileLayer({
title: "天地图路网",
source: new XYZ({
projection: defaultsMap.projection,
url:"http://t4.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=" +this.tk
}),
zIndex: 1
});
// 加载地图层mapservice
let tileGrid = new TileGrid({
tileSize: 256,
origin: defaultsMap.origin,
extent: defaultsMap.fullExtent,
resolutions: defaultsMap.resolutions
});
// 航道图层
let cjinobeaconMap = new TileLayer({
source: new XYZ({
tileGrid: tileGrid,
projection: defaultsMap.projection,
url: defaultsMap.tileUrl1
}),
zIndex: 9
});
// 线图层
let framesMap = new TileLayer({
source: new XYZ({
tileGrid: tileGrid,
projection: defaultsMap.projection,
url: defaultsMap.tileUrl2
}),
zIndex: 10
});
// 水深图层
let soundgMap = new TileLayer({
source: new XYZ({
tileGrid: tileGrid,
projection: defaultsMap.projection,
url: defaultsMap.tileUrl3
}),
zIndex: 11
});
// 加载地图
this.map = new Map({
target: "trajecttoryMap",
controls: defaultControls().extend([
new FullScreen(),
new ScaleLine({
units: "metric"
})
// new ZoomSlider()
]),
interactions: defaultInteractions({
pinchRotate: false // 移动端禁止地图旋转
}),
loadTilesWhileAnimating: true,
layers: [baseLayer, roadLayer, cjinobeaconMap, framesMap, soundgMap],
//overlays: [this.overlay], // 把弹窗加入地图
view: new View({
projection: defaultsMap.projection,
center: defaultsMap.center,
extent: defaultsMap.fullExtent,
// resolutions: defaultsMap.resolutions,
zoom: 14,
minZoom: 7,
maxZoom:17
})
});
},
},
mounted(){
this.initMap();
}
}
</script>