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. hbase.client.RetriesExhaustedException: Can't get the locations hive关联Hbase查询报错

    特征1: hbase.client.RetriesExhaustedException: Can't get the locations 特征2: hbase日志报错如下:org.apache.zoo ...

  2. [Python Study Notes]计算器

    # ------------------------------------------------------------------------------------- # @文件: 计算器.p ...

  3. maven 配置说明

    1.坐标 1.1 每一jar文件都有一个唯一坐标.通过坐标可以精确确定是哪个jar 1.2 坐标组成 1.2.1 Group ID : 公司名.公司网址倒写 1.2.2 Artifact ID : 项 ...

  4. Lucene源码解析--Analyzer之Tokenizer

    Analyzer包含两个核心组件,Tokenizer以及TokenFilter.两者的区别在于,前者在字符级别处理流,而后者则在词语级别处理流.Tokenizer是Analyzer的第一步,其构造函数 ...

  5. Codeforces 1076E Vasya and a Tree(树状数组)或dfs

    题意:给你一颗以1为根节点的树,初始所有节点的权值为0,然后有m个操作,每个操作将点x的所有距离不超过d的节点权值+1,问经过m次操作后每个节点权值是多少? 思路:如果是一个序列,就可以直接用树状数组 ...

  6. opencv3.2 编译安装说明

    Create a temporary directory, which we denote as <cmake_binary_dir>, where you want to put the ...

  7. 并发调试和JDK8新特性

  8. p4570 [BJWC2011]元素

    传送门 分析 对法力值从大到小排序然后对编号跑线性基即可 代码 #include<iostream> #include<cstdio> #include<cstring& ...

  9. 51NOD1052 最大M字段和

    传送门 分析 一眼看去我们自然会想到dp[i][j][k]表示区间[i,j]中选k个子段的最大值.然后我们考虑降去一维.我们设dp[i][j]表示考虑了前i个数,在选了a[i]的情况下共有j个子段的最 ...

  10. tarjan进阶

    一.边双连通分量 定义 若一个无向图中的去掉任意一条边都不会改变此图的连通性,即不存在桥,则称作边双连通图.一个无向图中的每一个极大边双连通子图称作此无向图的边双连通分量. 实际求法和强连通分量差不多 ...