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);
}
}
});
}

AngularJs 中使用OpenLayer例子,手机端地图加载不显示问题的更多相关文章

  1. php中 mysql 插入特殊字符(手机端的emoji表情)出现异常

    今天在用mysql存储从微信服务器拉来的数据,出现插入数据异常,报 Incorrect string value: '\xF0\x9F\x98\x97\xF0\x9F 的错误. 最终在网上查了一下,有 ...

  2. thinkphp中怎么判断是手机端访问还是pc端访问?

    function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) r ...

  3. layUI中layDate控件兼容性问题(手机端没有效果,不显示)

    使用layDate插件发现在PC端无问题,然而在适配移动端时,发现点击input时,laydate渲染出的时间控件有时候没有反应,后发现只需在render里加入trigger: 'click',即可以 ...

  4. 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析

    以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...

  5. 11.采集手机端app企查查上司公司数据(未成功)

    ---恢复内容开始--- 采集企查查手机端app数据: 1.首先手机端安装app并usb连接电脑端,fiddler监控手机请求数据对数据进行分析抓取. 手机端界面与fiddler界面参照: 2.对获取 ...

  6. 判断是手机端还是电脑端 isMobile()

    1.在PublicController控制器中写好判断手机端方法. <?php namespace Home\Controller; use Think\Controller; class Pu ...

  7. 基于H7的中移动物联例子以及简易操作说明,方便电脑端和手机端远程查看数据

    说明: 1.操作前,务必优先看此贴里面的基础例子,先将WIFI连接到路由器上,这样才可以访问外网: https://www.cnblogs.com/armfly/p/11307803.html 2.有 ...

  8. 网络爬虫中Fiddler抓取PC端网页数据包与手机端APP数据包

    1 引言 在编写网络爬虫时,第一步(也是极为关键一步)就是对网络的请求(request)和回复(response)进行分析,寻找其中的规律,然后才能通过网络爬虫进行模拟.浏览器大多也自带有调试工具可以 ...

  9. 手机端UC浏览器,在java开发的下载功能中存在的问题?

    在java web开发中,不同浏览器对下载文件的格式有不同的要求,有时会出现视频,音频等文件无法下载的问题.我在开发中,也遇到类似的问题,觉得很苦恼. 经过百度和请教学习,得到2个解决方案. 首先得到 ...

随机推荐

  1. 通过XmlSerializer接口来生成xml文件

    xml文件我们可以用来保存一些数据.例如用来备份短信.这个例子中,我们就用XmlSerializer接口来实现一个备份短信的程序.当然了,为了程序简单化,这个程序我们并不是真的去备份短信.我们通过一个 ...

  2. oracle 调整输出的列宽、行宽

    调整列宽 col 列名 format a20 调整行宽 set linesize 150

  3. MySQL存储引擎 -- MyISAM 与 InnoDB 理论对比

    MySQL常用的两种存储引擎一个是MyISAM,另一个是InnoDB.两种存储引擎各有各的特点. 1. 区别:(1)事务处理:MyISAM是非事务安全型的.-----而非事务型的系统,一般也称为数据仓 ...

  4. 关于android studio中使用class.forname()方法动态获取类实例报NO CLASS FOUND异常的几种处理方法

    最近在做一个项目的时候需要用到反射来回调子类的方法,但是在反射过程中总是在class.forname()方法抛出NO CLASS FOUND异常,经过几部检查,问题解决,在此总结一下引起该问题的原因 ...

  5. java 矩阵转置算法

    工作中用到了行列转置,把这两种情况的算法记下来,以便后用 1.行列数相等的转置 /** * @description 矩阵转置 * @author oldmonk * @time 2017年8月18日 ...

  6. 【摘自张宴的"实战:Nginx"】nginx模块开发

    Nginx的模块不能够像Apache那样动态的加载,所以模块都要预先编译进Nginx的二进制可执行文件中. Nginx的模块有三种角色: 1. Handler(处理模块)     用于处理Http请求 ...

  7. 除了ROS ,机器人自主定位导航还能怎么做?

    博客转载自:https://www.leiphone.com/news/201609/10QD7yp7JFV9H9Ni.html 雷锋网(公众号:雷锋网)按:本文作者科技剪刀手,思岚科技技术顾问. 随 ...

  8. deb包制作(转)

    deb 包已被广泛应用但是也在不断的更新,这里介绍Ubuntu deb包安装设置使用,帮助大家安装更新Ubuntu deb包系统.制作Ubuntu deb包的三种方法 | Sean's Blog [转 ...

  9. Java50道经典习题-程序32 左移右移

    题目:取一个整数a从右端开始的4-7位.分析:比如取123456789从右端开始的4-7位即:3456(1)先使a右移4位.(2)设置一个低4位全为1,其余全为0的数.可用~(~0<<4) ...

  10. NPOI读取Excel文件

    public class ExcelOperator { public static List<DataTable> Read(string fileName) { List<Dat ...