瓦片地图的介绍和Vue中使用Openlayer加载瓦片地图的方法使用

data() {
return {
map: null,
layers: {
      },
popupOverlay: null,
contextmenu:null,
    };
  },
initMap() {
varscaleLine=newol.control.ScaleLine({
//设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）units: "metric",
      });
consttileLayer=newol.layer.Tile({
id:'TileMap',
source: newol.source.XYZ({
url: "http://ip:port/_alllayers/{z}/{y}/{x}.png",
        }),
      });
this.map=newol.Map({
layers: [tileLayer],
view: newol.View({
center: [119, 32], //地图中心点projection: "EPSG:4326",
zoom: 20, // 缩放级别minZoom: 20, // 最小缩放级别maxZoom: 25, // 最大缩放级别constrainResolution: true, // 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊extent: [119.1223, 32.2222,119.13456, 32.33455],
        }),
//加载控件到地图容器中controls: ol.control          .defaults({
zoom: false,
          })
          .extend([scaleLine]),
target: this.$refs.olMap, // DOM容器      });
this.initContextMenu();
this.initMapEvent();
    },
initContextMenu(){
this.contextmenu=newContextMenu({
width: 170,
defaultItems: false, // defaultItems are (for now) Zoom In/Zoom Outitems: [
          {
text: '直线',
// classname: 'some-style-class', // add some CSS rulescallback: this.drawLineString// `center` is your callback function          },
          {
text: '多边形',
callback: this.drawPoly// classname: 'some-style-class', // you can add this icon with a CSS class// instead of `icon` property (see next line)// icon: 'img/marker.png',  // this can be relative or absolute// callback: marker          }
          {
text: '清除图形',
callback: this.clearAllPoly// classname: 'some-style-class', // you can add this icon with a CSS class// instead of `icon` property (see next line)// icon: 'img/marker.png',  // this can be relative or absolute// callback: marker          }
        ]
      });
this.map.addControl(this.contextmenu);
this.contextmenu.close();
    },
initMapEvent() {
this.popupOverlay=newol.Overlay({
// 设置弹窗显示位置：底部中心，可能的值是// 'bottom-left'，'bottom-center'，'bottom-right'，// 'center-left'，'center-center'，'center-right'，// 'top-left'， 'top-center'，和'top-right'。positioning: "bottom-left",
autoPan: true,
      });
this.map.addOverlay(this.popupOverlay);
letthat=this;
this.map.on("click", (e) => {
constcoordinate=e.coordinate//在点击时获取像素区域varfeatureLayer=that.map.getFeaturesAtPixel(e.pixel);
if(featureLayer!=null&&featureLayer.length>0){
varfeature=featureLayer[0];
if(!feature.data_json){
return;
          }
        }
      });
this.map.on("contextmenu", (e) => {
e.preventDefault();
this.contextmenu.enable();
      });
    },