实现效果：
需求：根据返回的经纬度列表通过天地图、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:"/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:"/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=" +this.tk}),zIndex: 1});// 加载地图层mapservicelet 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>
