在 Vue 项目使用 Open Layers

Open Layers 独立组件，在实际 Vue 项目中直接复制粘贴即可使用，并根据自身需求开启对应图案绘制方法，也可以设置点击按钮作为绘制方式切换，此次需求未设计不做开发。

因为是在 Vue 项目中创建的组件，所以需要引入 Vue-cli 以及 ol 组件，详细创建方式可见vue openlayers : 从0 到1 搭建开发环境

 如果只做测试，建议在 Vue-cli 项目的 App.vue 文件中直接引入，并注释自带的样式，避免样式出错，App.vue文件代码如下：

1.  
   <template>
2.  
   <div id="app">
3.  
   <open-layers-map></open-layers-map>
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   import OpenLayersMap from './views/OpenLayersMap.vue'
9.  
   export default {
10.  
    components: { OpenLayersMap },
11.  
    name: 'App'
12.  
    }
13.  
    </script>
14.  
     
15.  
    <style>
16.  
    #app {
17.  
    /* font-family: 'Avenir', Helvetica, Arial, sans-serif;
18.  
    -webkit-font-smoothing: antialiased;
19.  
    -moz-osx-font-smoothing: grayscale;
20.  
    text-align: center;
21.  
    color: #2c3e50;
22.  
    margin-top: 60px; */
23.  
    }
24.  
    </style>

在 src 文件夹下创建 view 文件夹，同时创建 OpenLayersMap.vue 文件，详细代码如下：

1.  
   <template>
2.  
   <div>
3.  
   <div id='map' style='width: 100%; height: 920px'></div>
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
   import 'ol/ol.css'
9.  
   import {Map, View, Feature} from 'ol'
10.  
    import OSM from 'ol/source/OSM'
11.  
    import VectorSource from 'ol/source/Vector'
12.  
    import Cluster from 'ol/source/Cluster'
13.  
    import {Vector as VectorLayer, Tile as TileLayer} from 'ol/layer'
14.  
    import {Style, Fill as StyleFill, Stroke as StyleStroke, Circle as StyleCircle, Text as StyleText} from 'ol/style'
15.  
    import { Circle as GeomCircle, Point as GeomPoint, LineString as GeomLineString, Polygon as GeomPolygon } from 'ol/geom'
16.  
    import { Draw as InteractionDraw } from 'ol/interaction'
17.  
     
18.  
    export default {
19.  
    name: 'OpenLayersMap',
20.  
    data () {
21.  
    return {
22.  
    map: null,
23.  
    points: [],
24.  
    // 线条点数组
25.  
    linePoints: [],
26.  
    // 多边形数组
27.  
    polygonPoints: [],
28.  
    }
29.  
    },
30.  
    methods: {
31.  
    createMap () {
32.  
    let _this = this
33.  
     
34.  
    this.map = new Map({
35.  
    target: 'map',
36.  
    layers: [
37.  
    new TileLayer({
38.  
    source: new OSM({})
39.  
    }),
40.  
    ],
41.  
    view: new View({
42.  
    // 设置中心点，默认厦门，用于规划厦门市的未来发展
43.  
    center: [118.15075122802735, 24.482664909344276],
44.  
    projection: 'EPSG:4326',
45.  
    // 设置缩放倍数
46.  
    zoom: 13,
47.  
    minZoom: 6,
48.  
    maxZoom: 20
49.  
    })
50.  
    })
51.  
    // 绑定点击事件
52.  
    this.map.on('click', function (e) {
53.  
    let coor = e.coordinate
54.  
    // console.log(e.coordinate)
55.  
    // console.log('lon:' coor[0] ',lat:' coor[1])
56.  
    _this.handleClick(coor)
57.  
    })
58.  
    // 绘制聚合点
59.  
    _this.addMarker()
60.  
    },
61.  
    // 设置统一控制点击事件，需要画图方式在此处切换
62.  
    handleClick(point) {
63.  
    // 绘制连线
64.  
    // this.drawLineString(point)
65.  
    // 绘制点
66.  
    // this.drawPoint(point)
67.  
    // 绘制圆形
68.  
    // this.drawCircle(point)
69.  
    // 绘制多边形
70.  
    // this.drawPolygon(point)
71.  
    },
72.  
    // 绘制点位
73.  
    drawPoint (center) {
74.  
    let vectorLayer = this.getLayer()
75.  
     
76.  
    let point = new GeomPoint(center)
77.  
    let feature = new Feature(point)
78.  
    vectorLayer.getSource().addFeature(feature)
79.  
    this.map.addLayer(vectorLayer)
80.  
    },
81.  
    // 绘制连线
82.  
    drawLineString(point) {
83.  
    this.linePoints.push(point)
84.  
    let featureLine = new Feature({
85.  
    geometry: new GeomLineString(this.linePoints),
86.  
    });
87.  
    let source = new VectorSource()
88.  
    source.addFeature(featureLine)
89.  
    let layer = new VectorLayer()
90.  
    layer.setSource(source)
91.  
    this.map.addLayer(layer)
92.  
    },
93.  
    // 绘制区域圆形
94.  
    drawCircle (center) {
95.  
    let vectorLayer = this.getLayer()
96.  
     
97.  
    // 设置半径
98.  
    let circle = new GeomCircle(center, 0.003)// 新建圆对象
99.  
    let feature = new Feature(circle)// 新建Feature对象 并将circle传入
100.  
     vectorLayer.getSource().addFeature(feature)// 将Feature对象填入图层源
101.  
     this.map.addLayer(vectorLayer) // 将图层添至地图对象
102.  
     },
103.  
     //画多边形
104.  
     drawPolygon(point){
105.  
     this.polygonPoints.push(point)
106.  
     let feature = new Feature({
107.  
     geometry: new GeomPolygon([this.polygonPoints]),
108.  
     attributes: null
109.  
     });
110.  
     // 添加线的样式
111.  
     let lineStyle = new Style({
112.  
     fill: new StyleFill({
113.  
     color: 'rgba(1, 210, 241, 0.1)'
114.  
     }),
115.  
     stroke: new StyleStroke({
116.  
     color: 'rgba(255, 0, 0)',
117.  
     width: 4,
118.  
     }),
119.  
     });
120.  
     feature.setStyle(lineStyle);
121.  
     let source = new VectorSource();
122.  
     source.addFeature(feature)
123.  
     let vectorLayer = new VectorLayer({
124.  
     source: source
125.  
     })
126.  
     this.map.addLayer(vectorLayer)
127.  
     },
128.  
     // 设置聚合点
129.  
     addMarker() {
130.  
     let source = new VectorSource();
131.  
     // 随机创建200个要素，后台点位取出后按此格式处理
132.  
     for (let i = 1; i <= 200; i ) {
133.  
     let coordinates = [118.10 Math.random() * 0.05, 24.48 Math.random() * 0.05];
134.  
     let feature = new Feature(new GeomPoint(coordinates));
135.  
     source.addFeature(feature);
136.  
     }
137.  
      
138.  
     // 聚合
139.  
     let clusterSource = new Cluster({
140.  
     source: source,
141.  
     distance: 50
142.  
     })
143.  
      
144.  
     let clusters = new VectorLayer({
145.  
     source: clusterSource,
146.  
     style: function (feature, resolution) {
147.  
     let size = feature.get('features').length;
148.  
     let style = new Style({
149.  
     image: new StyleCircle({
150.  
     radius: 20,
151.  
     stroke: new StyleStroke({
152.  
     color: 'white'
153.  
     }),
154.  
     fill: new StyleFill({
155.  
     color: '#AAD3DF'
156.  
     })
157.  
     }),
158.  
     text: new StyleText({
159.  
     text: size.toString(),
160.  
     fill: new StyleFill({
161.  
     color: 'black'
162.  
     })
163.  
     })
164.  
     })
165.  
     return style;
166.  
     }
167.  
     });
168.  
      
169.  
     this.map.addLayer(clusters)
170.  
     },
171.  
     // 获取新的 layer 图层对象
172.  
     getLayer () {
173.  
     return new VectorLayer({
174.  
     source: new VectorSource({
175.  
     features: ''
176.  
     }),
177.  
     // 设置样式，但不完全兼容
178.  
     // style: function (feature) {
179.  
     // let style = new Style({
180.  
     // stroke: new StyleStroke({
181.  
     // color: '#E80000',
182.  
     // width: 2
183.  
     // }),
184.  
     // fill: new StyleFill({
185.  
     // color: 'rgba(0,0,0,0)'
186.  
     // })
187.  
     // })
188.  
     // return style
189.  
     // }
190.  
     })
191.  
     }
192.  
     },
193.  
     mounted () {
194.  
     this.createMap()
195.  
     }
196.  
      
197.  
     }
198.  
     </script>
199.  
      
200.  
     <style>
201.  
      
202.  
     </style>

代码中已包含 Open Layers 组件的 点、线、面绘制以及聚合点展示，点、线、面绘制均由点击事件触发，可以在 handleClick 方法中打开或关闭。点聚合数据随机生成，在实际开发中由后端获取转成需要格式传入即可。handleClick 方法代码如下：

1.  
   // 设置统一控制点击事件，需要画图方式在此处切换
2.  
   handleClick(point) {
3.  
   // 绘制连线
4.  
   // this.drawLineString(point)
5.  
   // 绘制点
6.  
   // this.drawPoint(point)
7.  
   // 绘制圆形
8.  
   // this.drawCircle(point)
9.  
   // 绘制多边形
10.  
    // this.drawPolygon(point)
11.  
    },

部分功能已添加样式处理，有特殊需求需要新建样式对象传入 feature。例如：

1.  
   // 添加线的样式
2.  
   let lineStyle = new Style({
3.  
   fill: new StyleFill({
4.  
   color: 'rgba(1, 210, 241, 0.1)'
5.  
   }),
6.  
   stroke: new StyleStroke({
7.  
   color: 'rgba(255, 0, 0)',
8.  
   width: 4,
9.  
   }),
10.  
    });
11.  
    feature.setStyle(lineStyle);

聚合点展示：

这篇好文章是转载于：学新通技术网