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个解决方案. 首先得到 ...
随机推荐
- 【Android 多媒体应用】使用MediaRecoder录制,MediaPlayer播放音频数据
1.MainActivity.java import android.annotation.TargetApi; import android.app.Activity; import android ...
- Go并发原理
Go语言是为并发而生的语言,Go语言是为数不多的在语言层面实现并发的语言:也正是Go语言的并发特性,吸引了全球无数的开发者. 并发(concurrency)和并行(parallellism) 并发(c ...
- struts2学习笔记(3)struts.xml的一些常用设置
在开发中通常需要用到多个配置文件,可以通过在web.xml中添加以下代码: <include file="login.xml"></include> 将sr ...
- re.spilt
- Apollo——安装
1.安装原版ubuntu 14.04http://www.ubuntu.org.cn/download/alternative-downloads 2.安装对应ubuntu 14.04的indigo版 ...
- p2197 nim游戏
传送门 分析 我们知道最后取完的情况就是所有的a[i]异或和为0 所以只要开始的异或和不为0则先手一定可以将它转化为0 否则不行 所以如果异或和非0则先手胜 代码 #include<bits/s ...
- 使用bat一键打开java、jar、py文件
直接运行jar是没有命令行窗口的,如果想有命令行窗口,一般来说是要 win+r 运行cmd,定位到所在目录,然后用命令行执行 java -jar xxx.jar 而对于python,打开py文件也是麻 ...
- Linux下遇到的操作 (持续更新……)
1.作业让写一个输入输出重定向,管道联接.这里要讲的不是这个而是 我当时想写个程序来演示这些功能:但我发现我的虚拟机中没有装GNU不能用g++命令,然后就惊奇的发现Linux命令行可以直接联网下载安装 ...
- EIP权限工作流升级说明-2019/3/5
首页增加待办事项直接处理按钮 2,新增处理历史记录
- SoftKeyboard在AndroidStudio下的配置和运行
前文翻译的<Android下创建一个输入法>一文中提到了来自Google的输入法例程SoftKeyboard,备忘下该程序的配置和运行. 首先将SoftKeyboard导入AndroidS ...