openlayer结合vue2 添加天地图指定图层 和 弹出框

需求：天地图上在山东的位置 添加69年 山东地图

分析：天地图的自定义图层 比较麻烦  所以直接用openlayer 来直接用 

           其实主要注意的就是 feature Vector VectorLayer 和 addFeatures（） ，addFeature（）

                feature 是包含所有坐标点信息的接口，每个坐标所有信息都要放到这个接口里。

                然后把 feature 放到 Vector 里，再把Vector 放到 VectorLayer图层里，最后把VectorLayer图层添加到地图整体的图层数组里 this.pageMap.getLayers().push(layer);

注意：addFeatures（） ，addFeature（）这两个方法，addFeatures（）里面添加的是个数组，数组中放有多个点位信息，即   [feature ,feature ,feature ,feature ]  ; 可以展示多个坐标点位；

addFeatures（[feature ,feature ,feature ,feature ]）；

addFeature（）里存放单个feature 可以展示单个坐标点位；addFeature（feature ）

                

        let feature = new Feature{}

                

        let source = new Vector();
        source.addFeatures(xx)
        
        let layer = new VectorLayer();
        layer.setSource(source);
        
        this.pageMap.getLayers().push(layer);

上代码：

<template>
  <div class="app-container">
    <button style="position: absolute;z-index:999" @click="qx">点击</button>
    <button style="position: absolute;margin-left:10%;z-index:999" @click="zs">展示</button>
    <!--template-->
    <!-- 弹框 -->
    <div ref="popup" class="popup" v-show="shopPopup">
      <div class="info">
        <ul>
          <li>信息1：xxx</li>
          <li>信息2：xxx</li>
          <li>信息3：xxx</li>
        </ul>
      </div>
    </div>
    <div id="map" class="map" ref="rootmap">

    </div>






  </div>
</template>

<script>
    import ol from 'ol/ol.css';

    //添加坐标点
    import Feature from 'ol/Feature'
    //import Fill from 'ol/style/Fill'
    import Point from 'ol/geom/Point'
    import Style from 'ol/style/Style'
    import CircleStyle from 'ol/style/Icon'
    import Fill from 'ol/style/Fill'
    import {Stroke} from 'ol/style'

    import VectorLayer from 'ol/layer/Vector.js'
    import { Vector } from 'ol/source.js'
    import MultiPoint from 'ol/geom/MultiPoint.js';
    //import Point from "ol/geom/Point";//几何的点样式


    //添加多个点
    import VectorSource from 'ol/source/Vector'
    import { fromLonLat } from 'ol/proj'
    import { Icon, Text } from 'ol/style'

    import Map from 'ol/Map';
    import TileLayer from 'ol/layer/Tile';
    import WMTS from 'ol/source/WMTS';
    import WMTSTileGrid from 'ol/tilegrid/WMTS';
    import {get as getProjection} from 'ol/proj';
    import {getTopLeft, getWidth} from 'ol/extent';
    import View from 'ol/View';
    import ImageLayer from 'ol/layer/Image';
    import Static from 'ol/source/ImageStatic';
    //静态图片的路径
    import mapXWImg from '@/assets/test3.png';
    import mapXWImg1 from '@/assets/test2.png';
    import mapXWImg2 from '@/assets/1223.png';

    //弹窗用到
    import { Overlay } from "ol";



   


    export default {
        name: 'OlMap',
        props: ['tableData', 'targetPoint'],
        data() {
            return {
                map1: null,
                view: null,
                vectorSource: null,
                mousePositionControl: null,
                /** webKey 来源于天地图的开发者密钥，个人开发者有访问限制（每天1万次），
                 * 上线项目应该使用客户的信息申请企业或政府，以解除访问限制 https://console.tianditu.gov.cn/api/traffic */
                webKey: '851ecbe361acb0d6fed30b5600f10ed5',
                mapCenter: [118.88000, 36.09999], //底图初始中心点  118.11225, 35.41410    118.6504, 32.0143
                projection: getProjection('EPSG:4326'),
                pageMap: null,

                wmtsLayer:null,
                cvaLayer:null,
                imageLayer:{},
                //测试多点坐标
                pointLayer:null,
                featuresArr: [],
                //控制弹出层
                shopPopup:false,
                popup: {},
            }
        },
        created() {
        },
        activated() {
        },
        mounted() {
            
            this.jz();

  
        },
        methods: {

            /** 叠加图片图层 */
            getImageLayer: function () {
                let p = 0.0001; //图片的缩放尺寸，通过调整图片的加载尺寸和中心点位置，可以调整图片到合适的位置加载
                /*let w = 1210, h = 1210; //图片的宽、高*/
                let w = 12100*6.3, h = 12100*3.7;
                const imageExtent = [
                    this.mapCenter[0] - w * p / 2, this.mapCenter[1] - h * p / 2,
                    this.mapCenter[0] + w * p / 2, this.mapCenter[1] + h * p / 2
                ];
                return new ImageLayer({
                    className: "image_css",
                    extent: imageExtent,
                    source: new Static({
                        url: mapXWImg2,
                        projection: this.projection,
                        imageExtent: imageExtent,
                        dragPan: false
                    }),
                })
            },
            //    
            qx:function () {
                
                this.pageMap.removeLayer(this.imageLayer)
             
            },
            zs:function(){
                


                this.imageLayer = this.getImageLayer();
                this.imageLayer.on("change", function (event) {

                });
                

                this.pageMap.getLayers().insertAt(2,this.imageLayer);
                
            },

            jz:function () {
                //alert("eeeeeeeeeeeeeeeeeeee1111111111")
                const projectionExtent = this.projection.getExtent();
                const size = getWidth(projectionExtent) / 256;
                const resolutions = new Array(19);
                const matrixIds = new Array(19);
                for (let z = 0; z < 19; ++z) {
                    // generate resolutions and matrixIds arrays for this WMTS
                    resolutions[z] = size / Math.pow(2, z);
                    matrixIds[z] = z;
                }
               

                //影像图层
                this.wmtsLayer = new TileLayer({
                    opacity: 1,
                    source: new WMTS({
                        attributions:
                            'Tiles © <a href="#"' +
                            ' target="_blank">skyocar</a>',
                      url: 'http://t{0-7}.tianditu.gov.cn/img_c/wmts?tk=' + this.webKey,
                        layer: 'img',
                        matrixSet: 'c',
                        format: 'image/png',
                        projection: this.projection,
                        tileGrid: new WMTSTileGrid({
                            origin: getTopLeft(projectionExtent),
                            resolutions: resolutions,
                            matrixIds: matrixIds,
                        }),
                        style: 'default',
                        wrapX: true,
                    }),
                });
               // alert("eeeeeeeeeeeeeeeeeeee333333333333")
                //这个是矢量标绘图层，标注底图中的各文字信息
                this.cvaLayer = new TileLayer({
                    opacity: 0.7,
                    source: new WMTS({
                        url: 'http://t{0-7}.tianditu.gov.cn/cva_c/wmts?tk=' + this.webKey,
                        layer: 'cva',
                        matrixSet: 'c',
                        format: 'tiles',
                        projection: this.projection,
                        tileGrid: new WMTSTileGrid({
                            origin: getTopLeft(projectionExtent),
                            resolutions: resolutions,
                            matrixIds: matrixIds,
                        }),
                        style: 'default',
                        wrapX: true,
                    }),
                });
               
                this.pageMap = new Map({
                    layers: [
                        this.wmtsLayer,
                        this.cvaLayer,
                        //this.imageLayer,
                    ],
                    target: 'map',
                    view: new View({
                        center: this.mapCenter,
                        projection: this.projection,
                        zoom: 8,
                    }),
                });
               


               
                this.singleclick()
                this.cs()
                this.addOverlay()

            },

           

          




            

            //点击事件
            singleclick() {
                // 点击
                this.pageMap.on("singleclick", (e) => {
                    // 判断是否点击在点上
                    let feature = this.pageMap.forEachFeatureAtPixel(
                        e.pixel,
                        (feature) => feature
                    );
                    console.log(feature);
                    if (feature) {
                        this.shopPopup = true;
                        //alert("1111111111111111111111111111111111")
                        // 设置弹窗位置
                        let coordinates = feature.getGeometry().getCoordinates();
                        this.popup.setPosition(coordinates);
                    } else {
                        this.shopPopup = false;
                    }
                });
            },

            // 点击弹出层 script
            addOverlay() {
                // 创建Overlay
                let elPopup = this.$refs.popup;
                this.popup = new Overlay({
                    element: elPopup,
                    positioning: "bottom-center",
                    stopEvent: false,
                    offset: [0, -20],
                });
                this.pageMap.addOverlay(this.popup);
            },
            


            //测试
            cs(){
                var back_data=[
                    {
                        "address":"五指山测试工地",
                        "cameraId":"T204",
                        "lat":"18.77520",
                        "lon":"109.5170"
                    },
                    {
                        "address":"椰树第三工业城测试工地",
                        "cameraId":"T206",
                        "lat":"19.9332",
                        "lon":"110.1424"
                    },
                    {
                        "address":"海南热带野生动物园测试工地",
                        "cameraId":"T214",
                        "lat":"19.7688",
                        "lon":"110.2477"
                    },
                    {
                        "address":"白石岭测试工地",
                        "cameraId":"T213",
                        "lat":"19.1607",
                        "lon":"110.3775"
                    },
                    {
                        "address":"海南大学测试工地",
                        "cameraId":"T212",
                        "lat":"36.09999",
                        "lon":"118.88000"
                    }

                ]


                var new_cicy_data = [];
                for (let i = 0; i < back_data.length; i++) {
                    new_cicy_data[i] = back_data[i];
                    back_data[i].ol = [];
                    back_data[i].ol[0] = parseFloat(back_data[i].lon);
                    back_data[i].ol[1] = parseFloat(back_data[i].lat);
                    back_data[i].key = i;
                }

               var xx = [];
                for (let i = 0; i < new_cicy_data.length; i++) {
                   /* this.show_dian(new_cicy_data[i]);*/
                    let feature = new Feature({
                     
                    geometry:new Point([new_cicy_data[i].ol[0],new_cicy_data[i].ol[1]]) ,                                                                                 
                    });

                    feature.setStyle(
                        new Style({
                            image: new CircleStyle({
                                src:mapXWImg1   //图片路径
                            }),
                        })
                    );
                    //console.log(feature)
                   xx.push(feature)
                }

                //
                let source = new Vector();
                source.addFeatures(xx)
                console.log(source.getFeatures())
                let layer = new VectorLayer();
                layer.setSource(source);
                /* this.pageMap.addLayer(layer)*/
                this.pageMap.getLayers().push(layer);

            },


           


            
          


        }

    };
</script>
<style lang='scss'>

  .map {
    width: 100%;
    height: 800px;
  }
  @-webkit-keyframes rotation {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  .image_css {
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
  }


  
  .popup {
    width: 200px;
    background-color: white;
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgb(177, 177, 177);
    .info {
      font-size: 14px;
      text-align: left;
      ul {
        padding-left: 0;
      }
    }
  }
</style>