AngularJs 中使用OpenLayer例子,手机端地图加载不显示问题

时间:2022-03-17 23:16:10
            var map, toolip, overlay;
            var layer = new ol.layer.Vector();
            var imgLayer = new ol.layer.Image();
            var center = ol.proj.transform([116.46, 39.92], 'EPSG:4326', 'EPSG:3857');
            var extent = [center[0] - 6290 * 1000 / 2, center[1] - 2381 * 1000 / 2, center[0] + 6290 * 1000 / 2, center[1] + 2381 * 1000 / 2];


function loadData(stationNumber, pOfficeId, pOfficeAreaId,filePath) { layer.setSource(null); //清空 imgLayer.setSource(null);//清空 vm.stationeditions = []; var date = abp.utils.formatString("{0} {1}:{2}", vm.lockDateTime, vm.selectHour, vm.selectMin); stationService.getStationStatusListByOfficeIdAndStationNo({ stationNo: vm.stationNumber, officeId: pOfficeId, startDateTime: date }).then(function (result) { vm.stationeditions = result.data.items; if (filePath != "") { var imgSource = new ol.source.ImageStatic({ url: '/File/GetPictureByPath?path=' + filePath, imageSize: [3973, 2807],//有的手机端不会自动计算,需要手动指定,否则图片不显示 imageExtent: extent }); imgLayer.setSource(imgSource); } if (vm.stationeditions.length > 0) { var vecSrouce = new ol.source.Vector(); layer.setSource(vecSrouce); $.each(vm.stationeditions, function (i, item) { var fffeacuter = getFeature(item.stationNo, item, [item.positionX, item.positionY]); layer.getSource().addFeature(fffeacuter); }); } }); } //OpenLayer function openLayerRegister() { map = new ol.Map({ interactions: ol.interaction.defaults({ altShiftDragRotate: false, pinchRotate: false }), //设置不能旋转 target: 'map', controls: ol.control.defaults({ attributionOptions: ({ collapsible: false }) }).extend([ new ol.control.ZoomToExtent({ extent: extent, label: spanNode, tipLabel: app.localize('Reset') }) ]), layers: [imgLayer, layer], view: new ol.View({ center: center, //中心点为北京 zoom: 5, //缩放级别 maxZoom: 8, minZoom: 4 }), logo: false }); overlay = new ol.Overlay({ element: document.getElementById('tooltip'), offset: [10, 0], positioning: 'bottom-left' }); map.addOverlay(overlay); map.on('pointermove', displayTooltip); map.getView().on('change:resolution', function () { var tsource = layer.getSource(); if (tsource) { var features = tsource.getFeatures(); for (var i in features) { var feature = features[i]; var style = feature.getStyle(); style.getImage().setScale(this.getZoom() / 8); feature.setStyle(style); } } }); map.on('singleclick', function (event) { var feature = map.forEachFeatureAtPixel(event.pixel, function (feature) { return feature; }); if (feature) { var c = feature.get('station'); if (c.stationStatus != 0) { vm.openBookingStation(c.id); } } }); }