openlayers加载天地图

一、openlayers加载天地图

 let that = this;
            //普通地图
            that.layer.tiandituVecLayer = new TileLayer({
                title: 'generalMap',
                source: new XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=daafafd5b7bb42922f10e3d1c06df824',
                    crossOrigin: 'anonymous'
                }),
                visible:false
            });
            // 卫星影像图层
            that.layer.tiandituImgLayer = new TileLayer({
                title:'yx',
                source: new XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=fea556436d51919f4a429933897be3c1',
                    crossOrigin: 'anonymous',
                }),
                visible:true
            });
            //普通地图标记
            that.layer.tiandituCvaLayer = new TileLayer({
                title: 'generalMapZj',
                source: new XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=daafafd5b7bb42922f10e3d1c06df824',
                    crossOrigin: 'anonymous'
                }),
                visible: true
            });
            let container = document.getElementById('popup');
            let  content = document.getElementById('popup-content');
            let  closer = document.getElementById('popup-closer');
            closer.onclick = function () {
                that.overlay.setPosition(undefined);
                closer.blur();
                return false;
            };
            this.overlay = new Overlay({
                element: container,
                autoPan: true,
                autoPanAnimation: {
                    duration: 250,
                },
            });
            this.map = new Map({
                target: 'map',
                // interactions: defaultInteractions().extend([modify]),
                overlays: [that.overlay],
                layers: [
                    that.layer.tiandituImgLayer,
                    that.layer.tiandituVecLayer,
                    that.layer.tiandituCvaLayer
                ],
                view: new View({
                    // projection: 'EPSG:4326',
                    // center: [120.4750, 31.6337],
                    center:[13410926.774433982,3715530.4937355495],
                    zoom: 12,
                }),
                controls: defaults({
                    zoom:false,
                    attributionOptions: {
                        collapsible: false
                    }
                })
            });
            this.$root._olMap = this.map;

二、地图点击事件

 let that = this;
            //地图点击事件
            this.map.on('singleclick', function (evt) {
                //点击获取经纬度
                console.log(evt.coordinate);
                // console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
                //判断当前单击处是否有要素，捕获到要素时弹出popup
                let thisFeature = that.map.forEachFeatureAtPixel(evt.pixel, function (fea, layer) {
                    return fea;
                });
                let thisLayer = that.map.forEachLayerAtPixel(evt.pixel, function (layer) {
                    return layer;
                });
                if (that.pointSelect){
                    that.map.removeLayer(that.pointSelect);
                    that.pointSelect=null;
                    that.overlay.setPosition(undefined);
                    that.modalShow1=false;
                    that.modalShow=false;
                }
                that.pointSelect = new VectorLayer({
                    className:"pointSelect",
                    title: "pointSelect",
                    source: new VectorSource({
                        features: [thisFeature]
                    }),
                    style:new Style({
                        //填充色
                        fill: new Fill({
                            color: 'rgba(255,0,0,0.3)'
                        }),
                        //边线颜色
                        stroke: new Stroke({
                            color: 'rgba(255,0,0,0.8)',
                            width: 4
                        }),
                        //形状
                        image: new Circle({
                            radius: 7,
                            fill: new Fill({
                                color: '#ffcc33'
                            })
                        })
                    }),
                    zIndex:1000
                })