在vue中用openlayers调取天地图服务并动态选择各个省份的中心，及行政边界

vue这块我就不说了，直接讲openlayers。

1.openlayers是什么？
Openlayers是一个专为Web GIS客户端开发提供的JavaScript类库包，用于实现标准格式发布的地图访问。

Openlayers支持的地图来源包括Google Maps、Yahoo、Map、微软Virtual Earth、天地图等，用户还可以用简单的图片地图作为背景，与其他的图层在Openlayers中进行叠加，在这一方面OpenLayers提供了非常多的选择。

除此之外，OpenLayers实现访问地理空间数据的方法都符合行业标准。Openlayers支持Open GIS协会制定的WMS（web Mapping Service Web地图服务）和WFS（web Feature Service Web要素服务）等网络服务规范。

在操作方面，OpenLayers除了可以在浏览器中帮助开发者实现地图浏览的基本效果，比如放大（Zoom In）、缩小（Zoom Out）、平移（Pan）等常用的操作外，还可以进行选取面、选取线、要素选择、图层叠加等不同的操作，甚至可以为已有的OpenLayers操作和数据进行扩充，为其赋予更多的功能。

OpenLayers官网

注意：调取天地图服务，要提前在天地图官网申请key
2.在vue页面中使用
第一步：安装Openlayers

npm install ol
1
第二步：在vue中引入openlayers
这里要注意一下，在vue中使用openlayers可以使用按需引入的方法，即在需要使用的页面进行引入。

最简单的demo需要引入四个模块，最外层的Map模块，Map属性中的View，layer/Tile模块，数据源source/OSM模块。

属性注入：初始化Map时传入一个对象，对象中简单包含了view、layers、target属性。Map是一个类，继承了Pluggable（扩展点接口）Map类，Map类初始化时会将属性对象option传入PluggableMap类，对父类初始化。PluggableMap类初始化的时候会将view、layers、target等属性赋值到对应的实例属性上。
渲染OSM：初始化Map的过程中也会构造canvas渲染环境，然后会解析OSM切片地址，将特定分辨率的每张图片加载到canvas中。
地图由层、可视化视图、修改地图内容的交互和UI组件控件组成。
废话不多说，上代码：

import 'ol/ol.css'       //引入css样式
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import XYZ from 'ol/source/XYZ'   //使用URL模板中定义的集合XYZ格式的URL平铺数据的层源
import {fromLonLat,transform,get} from 'ol/proj.js'
import 'ol/events/Event'
import 'ol/obj'
import ScaleLine from 'ol/control/ScaleLine'    //比例尺
import GeoJSON from ‘ol/format/GeoJSON’  //以GeoJSON（地图数据/矢量数据）格式读取和写入数据
import Feature from 'ol/Feature'    //具有几何和其他属性的地理要素的矢量对象
import VectorSource from 'ol/source/Vector'   //提供矢量图层的数据
import VectorLayer from 'ol/layer/Vector'     //用于显示在客户端渲染的矢量数据
import {Fill,Stroke,Style} from 'ol/style'

、
第三步：在monted钩子中，去加载地图,并在methods中定义动态设置中心点和画出行政边界的方法。

data() {
            return {
                map: null,
                center: [108.707509278, 34.345372996],
                tempLayer: ' ',
            }
        },
        mounted() {
            let view = new View({
                center: transform(fromLonLat(this.center), 'EPSG:3857', 'EPSG:4326'),   //转换坐标系
                projection: get('EPSG：4326'),
                zoom: 5
            });
            this.map = new Map({
                target: 'map',  // html部分的dom元素的ID
                layers: [
                    new TileLayer({
                        source: new SOM()
                    })
                ],
                view: view,
            });
            let map_cva = new TileLayer({  //底图图层
                source: new XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d'   //注意tk就是自己调取天地图服务时，在天地图上申请的key值
                })
            });
            let map_vec = new TIleLayer({  //注记图层
                source: new XYZ({
                    url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d0cf74b31931aab68af181d23fa23d8d'
                })
            });
            this.map.addLayer(map_vec);
            this.map.addLayer(map_cva);

            //实例化比例尺控件（ScaleLine）
            let ScaleLineControl = new ScaleLine({
                //设置比例尺单位: degrees、imperial、us、nautical、metric（度量单位）
                units: 'metric'
            });
            this.map.addControl(ScaleLineControl)
        },
        //以上部分为调取一个天地图的服务
        //下面为地图界面的交互部分  动态切换地图的中心点，并画出省级行政边界
        methods: {
            drawArea(json) {
                let pointsz = [];   //存储点坐标
                let points = json.points;  //获取点坐标
                //对获取的点坐标数据进行处理，重构，得到我们需要的数据结构
                for (let i = 0; i < points.length; i++) {
                    let region = points[i].region;   //单个面
                    let pointArr = region.split(',');
                    for (let j = 0; j < pointArr.length - 1; j++) {
                        let p = pointArr[j];
                        let pArr = p.split(' ');
                        let pos = fromLonLat(pArr);  //将坐标转为默认投影，默认投影是EPSG：3857
                        let hdms = transform(pos, 'EPSG:3857', 'EPSG:4326');   //坐标系间坐标转换，由前面的坐标转为后面坐标系坐标
                        pointsz.push(pArr)    //将转化格式后的点坐标存储起来
                    }
                }
                ;
                //自己造的地图数据（GeoJSON数据）
                let geojsonObject = {
                    'type': 'FeatureCollection',    //要素集合
                    'crs': {
                        'type': 'name',
                        'properties': {  //特性
                            'name': 'EPSG:3857'
                        },
                        'features': [{  //要素
                            'type': 'Feature',
                            'geometry': {  //几何图形
                                'type': 'GeometryCollection',   //几何图形集合
                                'geometries': [{   //几何形状
                                    'type': 'Polygon',   //多边形
                                    'coordinates': [pointsz]    //坐标
                                }]
                            }
                        }]
                    }
                };
                let vectorSource = new VectorSource({   //提供矢量图层的数据
                    features: (new GeoJSON().readFeatures(geojsonObject))
                });
                let vectorLayer = new VectorLayer({
                    source: vectorSource,   //来源
                    style: new Style({
                        stroke: new Stroke({
                            color: 'yellow',
                            width: 6
                        }),
                        fill: new Fill({
                            color: 'rgba(255,255,0,0.1)'
                        })
                    })
                });
                if (this.tempLayer != ' ') {
                    this.map.removeLayer(this.tempLayer);
                }
                
                this.map.addLayer(vectorLayer);
                this.tempLayer = vectorLayer;
            },
            changeCenter(name) {  //根据name传参
            //调取天地图返回的数据
				let param = {};
				param.postStr.serachWord = name;
				param.postStr.serachType = '1';   //查询类型（0：根据code查询；1：根据名称）
				param.postStr.needSunInfo = 'false' ;   //是否需要下一级信息
				param.postStr.needAll = 'false';  //   是否需要所有子节点（包括孙子节点）
				param.postStr.needPolygon = 'true';   //是否需要行政区划范围
				param.postStr.needPre = 'true';   //是否需要上一级所有信息
				param.tk = 'd0cf74b31931aab68af181d23fa23d8d';   //自己的天地图秘钥
				this.$axios.get('http://api.tianditu.gov.cn/administrative',param).then(res => {
					let resData = res.data[0];
					let view = new View({
						center: transfrom(fromLonLat([resData.lnt,resData.lat]),'EPSG:3857','EPSG:4326'),    //将中心点坐标转为EPSG：4326
						projection: get('EPSG:4326'),   //投影坐标系 EPSG：4326
						zoom: resData.level -1
					});
					this.map.setView(view);
					this.drawArea(resData)
				})
			}
        }

其中一定要注意几个问题：
要想使用天地图的服务，一定要提前去天地图官网去注册账号，并申请key。
在vue中通过axios去请求天地图的服务时，可能会出现跨域问题。
其中有不足的地方，请在下方留言，多多指教