1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
| <template>
| <div id="mapol"></div>
| </template>
|
| <script>
| import TileLayer from "ol/layer/Tile";
| import XYZ from "ol/source/XYZ";
| import Map from "ol/Map";
| import View from "ol/View";
| import { transform } from "ol/proj";
| export default {
| name: "",
| data() {
| return {};
| },
| mounted() {
| this.init2DMap();
| },
| methods: {
| init2DMap() {
| var vectorLayer = new TileLayer({
| source: new XYZ({
| url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
| }),
| });
| var imageLayer = new TileLayer({
| source: new XYZ({
| url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
| }),
| });
| window.map = new Map({
| target: "mapol",
| layers: [imageLayer, vectorLayer],
| view: new View({
| center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
| zoom: 4,
| projection: "EPSG:3857",
| }),
| });
| },
| },
| };
| </script>
|
| <style scoped>
| #mapol {
| width: 100%;
| height: 100%;
| overflow: hidden;
| margin: 0;
| padding: 0;
| position: relative;
| }
| </style>
|
|
