vue+openlayers绘制线

绘制线

 1 <template>
 2     <div></div>
 3 </template>
 4 <script>
 5 import VectorLayer from 'ol/layer/Vector.js';
 6 import VectorSource from 'ol/source/Vector.js';
 7 import Feature from 'ol/Feature';
 8 import { Stroke, Style, Fill } from "ol/style";
 9 import { LineString } from 'ol/geom';
10 export default {
11     name: "linePage",
12     data() {
13         return {
14 
15         }
16     },
17     created() {
18         this.drawLine()
19     },
20     methods: {
21         drawLine() {
22             const map = window._map
23             const source = new VectorSource({});
24             const vector = new VectorLayer({
25                 source: source,
26                 id: 'line',
27                 className: 'line'
28             });
29             map.addLayer(vector)
30             const lineStyle = new Style({
31                     stroke: new Stroke({
32                         color: '#000',
33                         width: 1,
34                     }),
35                     fill: new Fill({
36                         color: '#000',
37                         width: 0,
38                     }),
39                 });
40            
41             const line = new LineString([[108.885436, 30.054604], [120.885436, 30.054604]])
42             const lineFeature = new Feature({
43                 geometry: line
44             })
45             lineFeature.setStyle(lineStyle);
46             source.addFeature(lineFeature);
47         }
48     }
49 }
50 </script>