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个解决方案. 首先得到 ...
随机推荐
- 配置镜像yum源--解决RHN not available的问题
由于RHN服务是收费的,在安装redhat系统时,自带的yum可能不能使用.中国有很多好用的镜像源,我们可以把yum源更改到国内镜像源上,步骤如下: 一.卸载本地yum #rpm –qa|grep y ...
- 关于c#里的集合的,结构体,枚举的定义,解释与应用
那么先写一下 集合 . 集合和数组很相似,数组里的类型是必须同一类型,固定长度.然而集合里的可以是不同类型,不固定长度的.所以集合运用的灵活度要更高一些. 要使用集合,必须先引用命名空间:using ...
- R: plot 绘图各种参数,以及 legend。。
################################################### 问题:基础绘图plot 18.4.30 plot函数,基础绘图的各个参数? 解决方案: ca ...
- Excel打开图片
=HYPERLINK("D:\固定资产图片\"&C2&".jpg",C2)
- SDUT 2498 AOE网上的关键路径
AOE网上的关键路径 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 一个无环的有向图称为无 ...
- STL-- vector中resize()和reserve()区别
最近写了一个小型的STL--TinySTL.发现有一些基础的东西需要记录下来,所以我打算多写一些东西,方便以后查看. 先看看<C++ Primer>中对resize()函数两种用法的介绍: ...
- C++面试笔记--const、sizeof
首先来一个关于const的全面的解释,先看一波代码,之后再进行详细的分情况解释 ; const int *a=&b;//指向一个int常量的指针 int const *a=&b;//和 ...
- SVM浅析
系列博客机器学习总结,主要参考书目<统计学习方法>--李航,涉及数学公式较多,以图片的形式表现.SVM是经典的线性分类方法,通过线性映射投射到希尔伯特空间(完备的赋范内积空间)得到了无穷维 ...
- javascript window.showModalDialog不兼容goole解决方案
window.showModalDialog不兼容goole解决方案 一.弹框方案: 1.window.open; 2.window.showModalDialog; 3.div制作窗口:(本节忽略) ...
- tomcat的日志文件权限与启动用户的权限不一致
用户work的文件权限(umask=0002)为 u=rwx,g=rwx,o=rx 但是tomcat的日志文件的权限却是:为什么会不一样呢? 这是因为tomcat在启动(catalina.sh)时会重 ...