OpenLayers绘制地图,无需外网,内网访问,提高安全性。
1. 首先引入ol ,npm i --save ol
2. 创建地图
一个地图初步就这样完成了。
3. 怎么与后台进行交互?
具体参考文档:http://weilin.me/ol3-primer/ch12/12-01-01.html
然后就是配置:
其中的view center 设置就是显示某一局部的中心,就是限制显示局部区域。
4. 自定义加载图标
先定义map,然后把后台数据比如图片,经纬度等放入this.nodeData.set(name,value),
然后在其他地方就通过this.nodeData.get(name)能拿到feature。
5. 地图单击事件
let feature = map.forEachFeatureAtPixel(event.pixel, function (feature, layer) {
return feature;
});
这段代码放到点击事件内可以转换可以拿到当前feature的经纬度,图片类型,也可以拿到当前feature的id. 可以进行路由跳转等。
6. 封装feature图标
7. 地图连线和报警
let line = new Feature({
id: id,
geometry: new LineString(
[[sLongitude, sLatitude], [eLongitude, eLatitude]])
});
line.setStyle(new Style({
text: new Text({
// 默认这个字体,可以修改成其他的,格式和css的字体设置一样
font: '16px sans-serif',
text: lineName,
placement: 'line',
textBaseline: 'top',
fill: new Fill({
color: color ? color : 'blue'
})
}),
stroke: new Stroke({
width: color === 'red' ? 2 : 1,
color: color ? color : 'blue'
})
}));
// 添加到之前的创建的layer中去
this.layer.addFeature(line);
详细请参考此中文文档: http://weilin.me/ol3-primer/index.html
OpenLayers绘制地图,无需外网,内网访问,提高安全性。的更多相关文章
- linux服务器外网内网(双网络)搭建
一共有2台服务器,分别用a,b表示.a双网卡,即有外网也有内网.b只有内网环境.a,b的内网是通过交换机组建.至于外网怎么搭建我就不说了.关键说一说内网是怎么组建的. 如果你对linux不熟悉,对网卡 ...
- Flex 4.0及4.6发布的网络应用在内网内会访问很慢的解决方案
Flex 4.x 开发的程序部署在外网在能访问到www.adobe.com的时能够很快加载完成,但是部署在本地局域网,不能访问外网的服务器上,用浏览器访问应用需要加载几分钟的时间,这种等待时间客户几乎 ...
- UNIX网络编程——内网与外网间通信
QQ是一个基于TCP/UDP协议的通讯软件 发送消息的时候是UDP打洞,登陆的时候使用HTTP~因为登陆服务器其实就是一个HTTP服务器,只不过不是常用的那些,那个服务器是腾讯自行开发的!!! 一.登 ...
- 内网DMZ外网之间的访问规则
当规划一个拥有DMZ的网络时候,我们可以明确各个网络之间的访问关系,可以确定以下六条访问控制策略. 1.内网可以访问外网 内网的用户显然需要自由地访问外网.在这一策略中,防火墙需要进行源地址转换. 2 ...
- 外网win10 64位环境下 为内网win7 32位安装三方包的最靠谱手段:python64位、32位全安装。
经过一周的各种折磨,如题.以下是我的经验和教训. 我的外网是win10 64位,内网环境win7 32位.由于未知原因,anaconda无法安装!!! 其实最靠谱的安装三方包的还是whl包.但是很有可 ...
- 内网IP和外网IP
1.什么是内网内网就是局域网,比如一个公司的局域网,局域网内每台计算机的IP地址是互异的,但不同局域网内的IP是可以相同的.2.什么是外网外网就是互联网,内网的所有计算机都是连接到一个外网IP,通过外 ...
- Android根据内网外网连接情况配置服务器访问IP
新项目的app,可通过内网和外网的服务器ip进行请求访问,但是客户提供了专业终端,终端在wifi情况下走外网内网都可以,但关闭wifi则只能走4G专网,也就是只能走内网. 可前往我的小站查看:Andr ...
- 【NetWork】外网和内网
外网和内网 2019-11-16 11:22:37 by冲冲 1.内网 ① 内网的电脑们,需要经过交换机.路由器,才能访问Internet(外网). ② 因为外网IP比较紧张,现在的电脑普及使得外 ...
- QQ通信原理及QQ是怎么穿透内网进行通信的? (转)
原:http://f543711700.iteye.com/blog/978044#bc2344608 QQ是一个基于TCP/UDP协议的通讯软件 发送消息的时候是UDP打洞,登陆的时候使用HTTP~ ...
随机推荐
- 03.LinuxCentOS系统root目录LVM磁盘扩容
根目录LVM扩容操作步骤: [root@centos7 ~]# df -lh文件系统 容量 已用 可用 已用% 挂载点/dev/mapper/centos-root 50G 7.7G 43G 6% / ...
- 学Python的第七天
今天学习DBA有点乏,所以Python学的不是很多熬!!! 但是不管多苦多累Python不会放弃!! 虽然我是运维! #!/usr/bin/env python3 # -*- coding:utf-8 ...
- python3-sorted
排序也是在程序中经常用到的算法.无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小.如果是数字,我们可以直接比较,但如果是字符串或者两个dict呢?直接比较数学上的大小是没有意义的,因此,比 ...
- R reticulate 设置 python 环境
library("reticulate") use_python("/usr/bin/python", required = T) py_config() 注意 ...
- python实现Restful服务 (基于flask)(1)
参考:https://www.jianshu.com/p/6ac1cab17929 参考:https://www.cnblogs.com/alexyuyu/p/6243362.html 参考:http ...
- spring boot 参数传递(spring boot 参数传数 arg0 每一个参数 arg0#{arg0},arg1 #{arg1})
spring boot 参数传数 arg0 每一个参数 arg0#{arg0},arg1 #{arg1} @Select("select * from sys_user where nam ...
- C#中命名空间,C#程序中的一种代码组织形式,主要用来标识类的可以范围,引用using 命名空间
C# C#中命名空间,C#程序中的一种代码组织形式,主要用来标识类的可以范围 use system; use system.collect.core; namespace sss{ } using 命 ...
- Android逆向之旅---基于对so中的函数加密技术实现so加固
一.前言 今天我们继续来介绍so加固方式,在前面一篇文章中我们介绍了对so中指定的段(section)进行加密来实现对so加固 http://blog.csdn.net/jiangwei0910410 ...
- 【转】Django 模板语法
转自:https://www.cnblogs.com/love9527/p/9077863.html Django 模板语法 一.模板 只要是在html里面有模板语法就不是html文件了,这样的文件就 ...
- IP释放、更新、以及清除DNS
此篇文章会带您进行DNS释放.更新以及清除步骤,并协助您就解决您网络方面问题.请在下方选择您所使用的操作系统. Windows 8 在桌面按住Windows + X按键. 选择Command Prom ...