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. Hadoop集群 能打开50070端口不能打开8088端口 web浏览器界面

    两天时间,知道现在才把这个东西解决  解决的灵感来源于百度知道一句话谢谢这个哥们 谢谢这个哥们! ​我的目录是在/home/hadoop/tmp  大家如果遇到这个问题,希望能按照我的办法去试一下 2 ...

  2. Oracle pl/sql 记录、表类型

    一.PL/SQL记录 定义: TYPE <类型名> IS RECORD <列名1 类型1,列名2 类型2,...列名n 类型n,> [NOT NULL] <列的类型> ...

  3. 第2章 netty介绍与相关基础知识

    NIO有一个零拷贝的特性.Java的内存有分为堆和栈,以及还有字符串常量池等等.如果有一些数据需要从IO里面读取并且放到堆里面,中间其实会经过一些缓冲区.我们要去读,它会分成两个步骤,第一块它会把我们 ...

  4. mybatis项目报错:java.sql.SQLException: ORA-00911: 无效字符 解决方法

    如果你用java写程序访问数据库,出现这个问题:java.sql.SQLException: ORA-00911: 无效字符 at oracle.jdbc.driver.DatabaseError.t ...

  5. Codeforces 8C 状压DP

    题意:有个人想收拾行李,而n个物品散落在房间的各个角落里(n < 24).现在给你旅行箱的坐标(人初始在旅行箱处),以及n个物品的坐标,你一次只能拿最多两个物品,并且拿了物品就必须放回旅行箱,不 ...

  6. Exception in thread "main" java.lang.ArrayIndexOutOfBoundsException: 0

    Exception in thread "main" java.lang.ArrayIndexOutOfBoundsException: 0 at ExTestDrive.main ...

  7. 51NOD1835 完全图

    传送门 分析 令f(i,j)表示i点完全图有j个联通块的方案数. 讨论有i-1个点已经固定了,我们拉出一个代表元素然后讨论它的集合大小然后组合数算一下就可以了. $$ dp(i,j) = \sum_{ ...

  8. 初识Servlet(JSP)

    Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层.  Servle ...

  9. IDEA内嵌Jetty启动SpringMvc项目

    这段时间本意是想要研究一下Netty的多线程异步NIO通讯框架,看完原理想要做下源码分析.查找资料发现Jetty框架底层支持用Netty做web请求的多线程分发处理,于是就筹备着将Jetty框架内嵌到 ...

  10. undefined reference to `clock_gettime

    下面这个错误通常是因为链接选项里漏了-lrt,但有时发现即使加了-lrt仍出现这个问题,使用nm命令一直,会发现-lrt最终指向的文件没有包含任何symbol,这个时候,可以找相应的静态库版本libr ...