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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
| <!--
| * @Descripttion:
| * @version:
| * @Author: song
| * @Date: 2021-04-08 15:14:57
| * @LastEditors: song
| * @LastEditTime: 2021-04-24 11:59:43
| -->
| <template>
| <div id="xymap"></div>
| </template>
|
| <script>
| import OLCesium from "olcs/OLCesium.js"
| import "ol/ol.css"
| import OlView from "ol/View.js"
| import XYZ from "ol/source/XYZ"
| import OlLayerTile from "ol/layer/Tile.js"
| import OlMap from "ol/Map.js"
| import {
| // eslint-disable-next-line no-unused-vars
| defaults as OlControlDefaults,
| defaults,
| // 全屏控件
| // FullScreen,
| // 比例尺控件
| // ScaleLine,
| // 缩放滚动条控件
| // eslint-disable-next-line no-unused-vars
| ZoomSlider,
| // 鼠标位置控件
| // eslint-disable-next-line no-unused-vars
| MousePosition,
| // -地图属性控件
| // Attribution,
| // 鹰眼控件
| // eslint-disable-next-line no-unused-vars
| OverviewMap,
| // 缩放到范围控件
| // eslint-disable-next-line no-unused-vars
| ZoomToExtent,
| // Rotate,
| } from "ol/control.js"
|
|
| export default {
| name: "Map",
| data () {
| return {
| view: "",
| }
| },
|
| mounted () {
| const that = this
| const ol2d = new OlMap({
| layers: [
| new OlLayerTile({
| zIndex: 5,
| title: "cesium切图",
| source: new XYZ({
| url: "/wp/{z}/{x}/{y}.png", // 注记
| }),
| }),
| ],
|
| // 注意地图控件的写法
| controls: defaults().extend([
| // new FullScreen(),
| // new ScaleLine(),
| // new MousePosition(),
| // new Rotate(),
| // new Attribution()
| ]),
| target: "xymap",
| view: new OlView({
| center: [116.026801, 28.683427],
| zoom: 16,
| projection: "EPSG:4326",
| }),
| })
|
| var view = ol2d.getView()
|
| this.view = view
|
| ol2d.on("singleclick", (e) => {
| that.$emit('setXyValue', e.coordinate)
| })
| },
| methods: {
|
| },
| };
| </script>
|
| <style scoped lang="scss">
| #xymap {
| position: relative;
| width: 100%;
| height: 480px;
| }
| </style>
|
|
