AngularJs 中使用OpenLayer例子,手机端地图加载不显示问题
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例子,手机端地图加载不显示问题的更多相关文章
- php中 mysql 插入特殊字符(手机端的emoji表情)出现异常
今天在用mysql存储从微信服务器拉来的数据,出现插入数据异常,报 Incorrect string value: '\xF0\x9F\x98\x97\xF0\x9F 的错误. 最终在网上查了一下,有 ...
- thinkphp中怎么判断是手机端访问还是pc端访问?
function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])) r ...
- layUI中layDate控件兼容性问题(手机端没有效果,不显示)
使用layDate插件发现在PC端无问题,然而在适配移动端时,发现点击input时,laydate渲染出的时间控件有时候没有反应,后发现只需在render里加入trigger: 'click',即可以 ...
- 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析
以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...
- 11.采集手机端app企查查上司公司数据(未成功)
---恢复内容开始--- 采集企查查手机端app数据: 1.首先手机端安装app并usb连接电脑端,fiddler监控手机请求数据对数据进行分析抓取. 手机端界面与fiddler界面参照: 2.对获取 ...
- 判断是手机端还是电脑端 isMobile()
1.在PublicController控制器中写好判断手机端方法. <?php namespace Home\Controller; use Think\Controller; class Pu ...
- 基于H7的中移动物联例子以及简易操作说明,方便电脑端和手机端远程查看数据
说明: 1.操作前,务必优先看此贴里面的基础例子,先将WIFI连接到路由器上,这样才可以访问外网: https://www.cnblogs.com/armfly/p/11307803.html 2.有 ...
- 网络爬虫中Fiddler抓取PC端网页数据包与手机端APP数据包
1 引言 在编写网络爬虫时,第一步(也是极为关键一步)就是对网络的请求(request)和回复(response)进行分析,寻找其中的规律,然后才能通过网络爬虫进行模拟.浏览器大多也自带有调试工具可以 ...
- 手机端UC浏览器,在java开发的下载功能中存在的问题?
在java web开发中,不同浏览器对下载文件的格式有不同的要求,有时会出现视频,音频等文件无法下载的问题.我在开发中,也遇到类似的问题,觉得很苦恼. 经过百度和请教学习,得到2个解决方案. 首先得到 ...
随机推荐
- Jquery前端选择器
----------------------祖先后代选择器------------------------------ 1.祖先 后代:根据一个元素可以取得指定的所有子元素(不管中间有多少后代)$(& ...
- 基于aspectj的aop注解操作
- 手动编译安装tmux
tmux的好处就不多说了,总之是多屏管理的神器.通常我们用系统通用的安装方式可以安装到tmux,但有时候,安装到的可能不是我们所需要的版本,又或者软件源里面没有带tmux.这个时候就需要手动编译安装了 ...
- 前端设置cookie,以及jQuerycookie的使用
- 解决ftp无法连接登录linux的办法
1. 首先安装vsftpd 命令:yum -y install vsftpd 之后开启服务:service vsftpd start 2.关闭防火墙 1) 重启后生效 开启: chkconfig ip ...
- 猪羊——HTML解析
HTML标签和属性大全见:http://www.cnblogs.com/Mr-liyang/p/5797976.html CSS样式大全:http://www.cnblogs.com/Mr-liyan ...
- JavaWeb面试题 有用
ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获取数据,然后用JavaScript来操作DOM从而更新页面的局部显示. Ajax的优点: 1.最大的一点是页面 ...
- 用fontcreator创建了一个半成品的字体
下效果,哈哈. 为啥说半成品呢?因为只制作了0到9这几个字符,其他的字母.汉字.符号啥的都没有制作,唯一感觉就是字体设计是一个非常有设计感的活儿,而且需要付出很多的精力,尤其是汉字字体,常见的有6k多 ...
- java IO的总结
1: fileChannel 没有bufferedreader快, bufferedreader 可设置缓冲大小和编码 2: bufferedreader 的readline 遇到回车也换行
- SQLite操作
创建有主键的表: create table test (pkey varchar(16) primary key, value varchar(10)); 创建有复合(即key由多个字段联合组成)主键 ...