首先 路由器
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Demo1 from '@/Demo1/index'import Demo2 from '@/Demo2/index' //跳转页面import Demo5 from '@/Demo5/index' //跳转页面// import Demo5 from '@/Demo5/index'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/demo1',name: 'demo1',component: Demo1 //页面输入这个地址},{path: '/demo2',name: 'demo2',component: Demo2 //页面输入这个地址},{path: '/demo5',name: 'demo5',component: Demo5}]})
vue页面
//定一个盒子<template><div><div id="map" ref="mymap"></div></div></template>
//js核心代码<script>import { Map, View } from "ol";import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";import XYZ from "ol/source/XYZ";import TileImage from "ol/source/TileImage";import TileGrid from "ol/tilegrid/TileGrid";export default {mounted() {this.gaodeLayer = new TileLayer({source: new XYZ({url:"http://wprd0{1-4}./appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"})});// 计算百度使用的分辨率var resolutions = [];var maxZoom = 18;for (var i = 0; i <= maxZoom; i++) {resolutions[i] = Math.pow(2, maxZoom - i);}var tilegrid = new TileGrid({origin: [0, 0], // 设置原点坐标resolutions: resolutions // 设置分辨率});// 创建百度地图的数据源var baiduSource = new TileImage({projection: "EPSG:3857",//这里的坐标系一定要是3857tileGrid: tilegrid,tileUrlFunction: function(tileCoord) {var z = tileCoord[0];var x = tileCoord[1];/*！！！这里要注意，openlayers3之前的版本我们输出这个y是正值，但是4/5/6的版本都变成负值了，所以就参照网上3的版 本把负值改成正值，亲测可以使用。至于原理为什么4以上的版本改了还需要再研究一下*/var y = -tileCoord[2];// 百度瓦片服务url将负数使用M前缀来标识if (x < 0) {x = "M" + -x;}if (y < 0) {y = "M" + -y;}return ("http://online0./onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pludt=0426&scaler=1&p=0");}});this.baiduMapLayer = new TileLayer({source: baiduSource,visible: false});let map = new Map({target: 'map',layers: [this.baiduMapLayer, this.gaodeLayer],view: new View({projection: "EPSG:4326",center: [116.403414, 39.924091],zoom: 9})})},}</script>
//简单样式<style scoped>#map{widows: 100vw;height: 100vh;}</style>
