openlayer 获取天地图

参考资料：
openlayers官网：https://openlayers.org/
geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector
地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint/index.html
————————————————

使用openlayer 加载地图的好处是可以改动代码最少的前提下切换不同厂家的地图，实现地图各个场景的切换，例如政府项目选择天地图、应用类导航类选择高德地图、展示类选择百度地图等。

天地图有三个类型的获取地址：

影像地图：

http://t0-3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=xxxxx你的开发者key

标注信息：

http://t0-3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=xxxxx你的开发者key

路网信息：

http://t0-3.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=xxxxx你的开发者key

高德地图：

https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}

以天地图加载为例 :

定义一个名字为map的HTML DOM元素加载地图如下：

 <div id="map" class="map-home"></div> 

初始化图层属性设置不透明度：

 this.tileLayer = new TileLayer({

        opacity: 0.3, //透明度  1不透明 0 全透明

        source: this.tileWMSSource, // tileWMSSource 上面定义的httpurl图层地址

      });

//初始化地图服务

 this.openMap = new Map({

        target: "map", //绑定的目标id

        layers: [this.tileLayer], //数组 可以放多个图层 后面的叠加到前面的上面（图层顺序）

        view: new View({

          center: olProj.fromLonLat([115.421712, 26.654294]),//中心坐标点

          zoom: 7,//放大层级 1-18级别

        }),

        controls: [],//对应控制层组件 

      });

//添加其他图层（包括不限于 底图tif、样式层、边界、shape、geojson等）：

 this.openMap.addOverlay(new Overlay({})); //Overlay 里面定义对应的属性与数据源地址

后续讲解：MAKER 坐标点标注 \STYLE 地图样式 \EVENT 事件\properties 属性\