Vue+Webpack+OpenLayers6完成组件化的WebGIS开发（二、组件化开发WebGIS实例）

上一章我们搭建了vue-cli，npm等环境，并且基于组件化开发的模式借助vue+webpack+openlayers6实现了地图的加载。今天这一章，我们将继续组件化的开发地图相关功能，我会通过具体的地图功能实例来进行阐述，大家加油！

这里把上一章内容链接发一下：https://blog.csdn.net/MagicMHD/article/details/104962747

一、地图双屏联动功能的开发

1、在上一章新建的项目的基础上添加一个DoubleMap组件如下图：

2、编写DoubleMap组件完成双屏联动效果，代码如下：

<template>
      <div>
            <p>地图1</p>
            <div id="map1"></div>
            <p>地图2</p>
             <div id="map2"></div>
      </div>
</template>
<script>
import 'ol/ol.css'
import View from 'ol/View'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import {OSM, TileArcGISRest} from 'ol/source';
export default {
    name:'OlMap',
    mounted() {   
      //渲染地图
      //1、首先创建一个视图
      var view=new View({
            center: [0, 0],
            zoom: 2
      })
      //2、创建地图图层
      var layers1=[
            new TileLayer({
                  source: new OSM()
            })
      ]
      var layers2=[
            new TileLayer({
                  source: new OSM()
            })
      ]
      //3、创建第一个地图
      var map1=new Map({
             target: 'map1',
             layers: layers1,
             view: view
      })   
      //4、创建第二个地图
      var map2=new Map({
            layers: layers2,
            target: 'map2',
            view: view
      })
    }     

}
</script>
<style lang="stylus" scoped>
#map1
      width:600px
      height:250px
#map2
      width:600px
      height:250px
</style>

这里我们新建了两个map，但是让两个map共用一个view，这样就可以达到双屏联动的效果，如果你只是想双屏展示，不想联动，那就让两个map分别对应不同的view即可。

3、调用DoubleMap组件完成地图双屏联动

首先我们要在Home组件里面引入DoubleMap局部组件，包括：引入DoubleMap组件、声明局部组件和最后在模板中使用局部组件这三步，Home.vue组件的具体代码如下：

<template>
  <!-- 这里我们就可以用引入的HomeMap组件了,大小写用破折号 -->
    <home-double-map></home-double-map>
</template>

<script>
// 首先引入局部组件
import HomeMap from './components/Map'
import HomeDoubleMap from './components/DoubleMap'
export default {
  name: 'Home',
  // 需要声明局部组件
  components: {
    HomeMap: HomeMap,
    HomeDoubleMap: HomeDoubleMap
  }
}
</script>

<style scoped>
</style>

这里面还有上一章引入的Map组件，我没删除但是在模板template里面只用了DoubleMap组件，所以程序界面也就只会显示地图双屏联动的功能了！

4、运行程序测试

效果如下图所示：

当我们移动一个地图时，另外一个地图也会移动，也就实现了地图联动功能！

二、地图上下左右移动及定位功能

1、新建MapLoc组件，如下图所示：

2、编写MapLoc组件，使之完成地图上下左右移动及定位功能，代码如下：

<template>
      <div>
            <div>
                  <div id="map"></div>
            </div>

            <div>
                  <button @click="moveToLeft">左移</button>
                  <button @click="moveToRight">右移</button>
                  <button @click="moveToUp">上移</button>
                  <button @click="moveToDown">下移</button>
                  <button @click="moveToQingdao">移到青岛</button>
                  <button @click="zoomIn">放大</button>
                   <button @click="zoomOut">缩小</button>
            </div>  
      </div>
</template>
<script>
import 'ol/ol.css'
import View from 'ol/View'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import  {transform} from 'ol/proj';
import {OSM, TileArcGISRest} from 'ol/source'
export default {
    name:'OlMapLoc',
    data() {
          return {
                map: null,
                view: null,
                layers: null
          }
    },
    mounted() {   
      //渲染地图
      //1、首先创建一个视图
      var view=new View({
             // 设置青岛为地图中心，此处进行