vue框架用OpenLayers实现地图裁剪，定位

由于做大屏，公司想简单的做一个地图显示只想显示湖北省的地图
于是就有了下面的骚操作
个人记录

html

      

          

            

            
姓名：{{maptypeTab.makerObj.name}}
            
机构名称：{{maptypeTab.makerObj.orgaName}}
            
地理位置：{{maptypeTab.makerObj.loc}}
          
      
      

  

js

import 'ol/ol.css';
//初始化加载ol
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import WKT from 'ol/format/WKT';
//样式使用
//import Circle from 'ol/style/Circle';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Fill from 'ol/style/Fill';
import sourceVector from 'ol/source/Vector';
import layerVector from 'ol/layer/Vector';
import GeoJSON from 'ol/format/GeoJSON';
//加载maker需要模块
import Feature from 'ol/Feature';
import geomPoint from 'ol/geom/Point';
import Icon from 'ol/style/Icon';
import makeUrl from './assets/image/location.png'; //定位显示makerIMG
import Overlay from 'ol/Overlay';
import axios from 'axios'

//初始化地图模块
initMap() {
      let _this=this;
      let map=new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new XYZ({
              url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
            })
          })
        ],
        view: new View({ 
          center: [112.21, 31.197646],
          projection: 'EPSG:4326',
          zoom: 7
        })
      });
		//实时定位接口
        _this.$http.get('获取定位接口list（返回地点信息，经纬度）').then(res=>{   
          let addmakerArr=[]
            if(res.data){
              res.data.forEach(e=>{
                addmakerArr.push({id:e.location.id,location:[Number(e.location.longitude),Number(e.location.latitude)],loc:e.location.address,name:e.location.operateName,orgaName:e.user.orgaName})
              })
            _this.addmaker(map,addmakerArr);
            }

        }) 
      //console.log(map);
      map.on('click',(evt)=>{
        let pixel = map.getEventPixel(evt.originalEvent);
        let feature = map.forEachFeatureAtPixel(pixel,(feature)=>{
            return feature;
        });
        if(!feature){
          return;
        }
        //显示maker弹框
        if (feature.obj) {
          _this.maptypeTab.makerflag=true
          let popup_element=document.getElementById('makerAlert');
          let coordinate = feature.getGeometry().getCoordinates();
          let info_popup = new Overlay(({
                element: popup_element,
                positioning:'bottom-left',
                //autoPan: true,
                autoPanAnimation: {
                     duration: 250
                 }
             }));
             map.addOverlay(info_popup);
            if (coordinate.length !== 2) {
                coordinate = evt.coordinate;
            }
            _this.maptypeTab.makerObj=Object.assign(_this.maptypeTab.makerObj,JSON.parse(feature.obj));
            info_popup.setPosition(coordinate);
        }
      })
      //裁剪地图+边框(根据地图边框裁剪地图)      
      const geoJson = `${process.env.BASE_URL}static/420000.json`;  
        return axios
        .create()
        .get(geoJson)
        .then(res => {
          let result=res.data;
          //加边框         
          let styles = new Style({
              stroke: new Stroke({
                  color: 'blue',
                  width: 2
              }),
              fill: new Fill({
                  color: 'rgba(0, 0, 255, 0)'
              })
          });
          let vectorSource = new sourceVector({
              features: (new GeoJSON).readFeatures(result)
          });
          let vector = new layerVector({
              source: vectorSource,
              style: styles
          });
          map.addLayer(vector);
          //裁剪
          let wktOLReaderALL = new WKT();
          let boundWKTarr=result.features[0].geometry.coordinates[0],boundWKT='POLYGON ((';
          for(let i=0;i<boundWKTarr.length;i++){
              boundWKT+=boundWKTarr[i][0]+' '+boundWKTarr[i][1]+','
          }
          boundWKT+=boundWKTarr[0][0]+' '+boundWKTarr[0][1]+'))'
          let boundPolygon = wktOLReaderALL.readFeature(boundWKT).getGeometry();
          map.on('postcompose',(evt)=>{
              _this.createclip(evt.context,boundPolygon,map)
          })
        })
    },
    createclip(context,boundPolygon,map){//裁剪
        context.save();
        let coors = boundPolygon.getCoordinates();
        let pointArr = [];
        for (let i = 0; i < coors.length; i++) {
            let coorTmp = coors[i];
            let pointTmp = [];
            for (let  j = 0; j < coorTmp.length; j++) {
                pointTmp.push(map.getPixelFromCoordinate(coorTmp[j]));
            }
            pointArr.push(pointTmp);
        }
        context.globalCompositeOperation = "destination-in";
        context.beginPath();
        for (let i = 0; i < pointArr.length; i++) {
            let pointTmp = pointArr[i];
            for (let j=0; j < pointTmp.length; j++) {
                if (j == 0) {
                    context.moveTo(pointTmp[j][0], pointTmp[j][1]);
                } else {
                    context.lineTo(pointTmp[j][0], pointTmp[j][1]);
                }
            }
        }
        context.closePath();
        context.fillStyle = "#ff0000ff";
        context.fill();
        context.restore();
      },
    addmaker(map,addmakerArr){//数据格式[{id:'123',location:[lat,lon],loc:'湖北武汉',name:''},.....] 
        if(addmakerArr.length==0)
            return;          
        let makerfeatures = [];
        addmakerArr.forEach((data,index) => {
          let feature = new Feature({
              geometry: new geomPoint(data.location),
              id: index++
          });
          let style = new Style({
              image: new Icon({
                  src: makeUrl
              })
          });         
          //var html = `
123131231321313131
`;
          feature.obj = JSON.stringify(data);
          //设置样式在样式中既可以设置图标
          feature.setStyle(style);
          //添加到之前创建的layer中
          makerfeatures.push(feature);
        });       
        //第二步source添加到layer
        let makerSource = new sourceVector({
            features: makerfeatures
        });        
        let markerLayer = new layerVector({
            source: makerSource
        })
        markerLayer.setZIndex(10000);
        map.addLayer(markerLayer);
    }