openLayers绘制静态底图
由于项目需要，需要是使用openlayers框架，于是开始安利一波openlayers，可以点击 https://openlayers.org/ 进入他的官网下载相关资源和案例
学习的过程总是慢慢来的，先就不在vue react等一下js框架下使用了，直接上html，哈哈
首先去他官网里，https://openlayers.org/en/latest/doc/quickstart.html 进入快速开始界面，就是所谓的hello world
然后开始敲代码，在本地新建一个index.html
<!doctype html>
<html lang="en"> <head>
<script src="./js/ol.js"></script>
<link rel="stylesheet" href="./js/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<title>OpenLayers example</title>
</head> <body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body> </html>
然后编写以上代码，要是你直接用他官网上的cdn链接有点卡，可以先下载对应的资源本地引入
接着打开这个页面，你会看到如下界面
到此你就成功的建立了一个map
注意：一个map里必不可少的参数是target--dom节点，view视图， layers图层
接下来我们渲染一下自定义的静态图片
使用的是openlayers的 ol.layer.Image, 话不多说直接上代码，哈哈
将上面index.html中的script里的代码修改成如下界面
<script type="text/javascript">
//地图设置中心，设置到成都，在本地离线地图offlineMapTiles刚好有一张zoom为4的成都瓦片
var center = ol.proj.transform([104.06667, 30.66667], 'EPSG:4326', 'EPSG:3857');
//计算静态地图映射到地图上的范围，图片像素为550*344，保持比例的情况下，把分辨率放大一些
var extent = [
center[0] - 550 * 1000 / 2,
center[1] - 344 * 1000 / 2,
center[0] + 550 * 1000 / 2,
center[1] + 344 * 1000 / 2
];
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: center,
zoom: 8,
minZoom: 5,
maxZoom: 12
})
});
//加载静态图层
map.addLayer(new ol.layer.Image({
source: new ol.source.ImageStatic({
url: './images/1S1F.png', // 静态地图
imageExtent: extent //映射到地图的范围
})
}));
</script>
然后，刷新页面，你会看到如下界面
由于，签了保密协议，所以我的一下厂区的底图无法截图出来，你可以跟换ol.source.ImageStatic 中的url进行验证
openLayers绘制静态底图的更多相关文章
- OpenLayers绘制图形
OpenLayers绘制图形 OpenLayers的显示构成由外向内为: ol.Map:地图对象. ol.layer.Vector:图层对象layer.Map含有多个layer,最终的显示效果是由 ...
- openlayers绘制点，线，圆等
由于我的业务需求是可以在底图上进行一些操作,比如绘制电子围栏等功能,于是需要使用openlayers中的画笔功能,接下来开始一波操作 还是上一篇的html页面, 直接上代码 <!doctype ...
- 【Win10开发】绘制静态UI
相信经历过Windows Insider的人对下面这个图都不会陌生,偶然看见邹欣老师领导的微软团队写了篇用xaml绘制这个静态页面,那咱也来亲手实验一番.唔...请做和放宽! 首先我们来看看xaml代 ...
- 绘制静态地图API-高德地图
1 高德静态地图链接 http://lbs.amap.com/api/webservice/guide/api/staticmaps 2 /** * User: [一秋] * Date: 2017/9 ...
- OpenLayers绘制地图，无需外网，内网访问，提高安全性。
1. 首先引入ol ,npm i --save ol 2. 创建地图 一个地图初步就这样完成了. 3. 怎么与后台进行交互? 具体参考文档:http://weilin.me/ol3-primer/ch ...
- openlayers在底图上添加静态icon
越学习openlayer你会发现openlayer是真的很强大,今天记录一下学习的成果,需求是做那种室内的CAD的场景然后里面展示人员icon并且实时展示人员的位置信息,以及点击弹出对应人员的一些位置 ...
- Android -- 自定义View小Demo，绘制钟表时间（一）
1,昨天刚看了hongyang大神推荐的自定义时钟效果(传动门:http://www.jianshu.com/users/a45d19d680af/),效果还是不错的,自己又在github上找了找,发 ...
- OpenLayers 3加载本地Google切片地图
OpenLayers 提供了ol.source.XYZ 接口用以加载切片地图. 本地切片地图是用地图切片下载器下载的Google道路图层,由于软件未激活,所以每张切片地图上都有软件作者的联系方式,请 ...
- canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式 // 贴上代码,仅供参考 ...
随机推荐
- JAVA基础系列：Object类
1. 万物皆对象 1. JVM在编译源代码时,在遇到没有继承Object的对象的时候,编译器会默认指定一个默认的父类Object 2. Object 和接口的关系,接口是否继承Object?接口没有继 ...
- 周董新歌搞崩QQ，抓取20W评论看看歌迷在说啥
9 月 16 日晚间,周董在朋友圈发布了最新单曲<说好不哭> 发布后,真的让一波人哭了 一群想抢鲜听的小伙伴直接泪奔 因为 QQ 音乐直接被搞崩了 没想到干翻 QQ 音乐的不是网易云音乐 ...
- 软件工程实践2019——idea表述及组队
时间:2019-10-08 随堂 欢迎每个有想法的同学都积极参与idea表述,用心呈现你的心中所想.你心中热爱的,希望在软工实践项目中完成的项目作品.每个愿意表达idea的同学,都有一分钟时间来呈现作 ...
- 源码详解系列(五) ------ C3P0的使用和分析（包括JNDI）
简介 c3p0是用于创建和管理连接,利用"池"的方式复用连接减少资源开销,和其他数据源一样,也具有连接数控制.连接可靠性测试.连接泄露控制.缓存语句等功能.目前,hibernate ...
- tornado的使用-日志篇
tornado的使用-日志篇
- python批量裁剪图片
"""用Pythonp批量裁剪图片""" from PIL import Imageimport matplotlib.pyplot as ...
- 我在生产项目里是如何使用Redis发布订阅的？（一）使用场景
转载请注明出处! 导语 Redis是我们很常用的一款nosql数据库产品,我们通常会用Redis来配合关系型数据库一起使用,弥补关系型数据库的不足. 其中,Redis的发布订阅功能也是它的一大亮点.虽 ...
- Easyui datagrid扩展子网格detailview增删改查详解
话不多gang,先上代码,将以下三个属性插入主网格的初始化参数中: view : detailview, //1 detailFormatter : function(index, row) { // ...
- idea中的后缀补全
IDEA有个很牛逼的功能,那就是后缀补全(Postfix Completion),这个功能可以通过后缀来使用代码补全进行模板式地补全语句,如遍历循环语句(for.foreach).使用 String. ...
- Type Erasure with Pokemon---swift的类型擦除
我感觉这个是swift的设计缺陷. 类型擦除:解决泛型类型作为公用类型的问题 是抽象的公用机制的一种实现方式. 1)类型擦除并不能解决类型不一致的兼容问题,只能解决类似继承一致性的兼容问题. 2)擦除 ...