由于项目需要，需要是使用openlayers框架，于是开始安利一波openlayers，可以点击 https://openlayers.org/   进入他的官网下载相关资源和案例

学习的过程总是慢慢来的，先就不在vue react等一下js框架下使用了，直接上html，哈哈

首先去他官网里，https://openlayers.org/en/latest/doc/quickstart.html  进入快速开始界面，就是所谓的hello world

然后开始敲代码，在本地新建一个index.html

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <script src="./js/ol.js"></script>
  6.     <link rel="stylesheet" href="./js/ol.css" type="text/css">
  7.     <style>
  8.         .map {
  9.             height: 400px;
  10.             width: 100%;
  11.         }
  12.     </style>
  13.     <title>OpenLayers example</title>
  14. </head>
  15.  
  16. <body>
  17.     <h2>My Map</h2>
  18.     <div id="map" class="map"></div>
  19.     <script type="text/javascript">
  20.         var map = new ol.Map({
  21.         target: 'map',
  22.         layers: [
  23.           new ol.layer.Tile({
  24.             source: new ol.source.OSM()
  25.           })
  26.         ],
  27.         view: new ol.View({
  28.           center: ol.proj.fromLonLat([37.41, 8.82]),
  29.           zoom: 4
  30.         })
  31.       });
  32.     </script>
  33. </body>
  34.  
  35. </html>

然后编写以上代码，要是你直接用他官网上的cdn链接有点卡，可以先下载对应的资源本地引入

接着打开这个页面，你会看到如下界面

到此你就成功的建立了一个map

注意：一个map里必不可少的参数是target--dom节点，view视图， layers图层

接下来我们渲染一下自定义的静态图片

使用的是openlayers的 ol.layer.Image, 话不多说直接上代码，哈哈

将上面index.html中的script里的代码修改成如下界面

  1. <script type="text/javascript">
  2.         //地图设置中心，设置到成都，在本地离线地图offlineMapTiles刚好有一张zoom为4的成都瓦片
  3.         var center = ol.proj.transform([104.06667, 30.66667], 'EPSG:4326', 'EPSG:3857');
  4.         //计算静态地图映射到地图上的范围，图片像素为550*344，保持比例的情况下，把分辨率放大一些
  5.         var extent = [
  6.             center[0] - 550 * 1000 / 2,
  7.             center[1] - 344 * 1000 / 2,
  8.             center[0] + 550 * 1000 / 2,
  9.             center[1] + 344 * 1000 / 2
  10.         ];
  11.         var map = new ol.Map({
  12.             target: 'map',
  13.             view: new ol.View({
  14.                 center: center,
  15.                 zoom: 8,
  16.                 minZoom: 5,
  17.                 maxZoom: 12
  18.             })
  19.         });
  20.         //加载静态图层
  21.         map.addLayer(new ol.layer.Image({
  22.             source: new ol.source.ImageStatic({
  23.                 url: './images/1S1F.png', // 静态地图
  24.                 imageExtent: extent          //映射到地图的范围
  25.             })
  26.         }));
  27.     </script>

然后，刷新页面，你会看到如下界面

由于，签了保密协议，所以我的一下厂区的底图无法截图出来，你可以跟换ol.source.ImageStatic 中的url进行验证

openLayers绘制静态底图的更多相关文章

  1. OpenLayers绘制图形

    OpenLayers绘制图形   OpenLayers的显示构成由外向内为: ol.Map:地图对象. ol.layer.Vector:图层对象layer.Map含有多个layer,最终的显示效果是由 ...

  2. openlayers绘制点，线，圆等

    由于我的业务需求是可以在底图上进行一些操作,比如绘制电子围栏等功能,于是需要使用openlayers中的画笔功能,接下来开始一波操作 还是上一篇的html页面, 直接上代码 <!doctype ...

  3. 【Win10开发】绘制静态UI

    相信经历过Windows Insider的人对下面这个图都不会陌生,偶然看见邹欣老师领导的微软团队写了篇用xaml绘制这个静态页面,那咱也来亲手实验一番.唔...请做和放宽! 首先我们来看看xaml代 ...

  4. 绘制静态地图API-高德地图

    1 高德静态地图链接 http://lbs.amap.com/api/webservice/guide/api/staticmaps 2 /** * User: [一秋] * Date: 2017/9 ...

  5. OpenLayers绘制地图，无需外网，内网访问，提高安全性。

    1. 首先引入ol ,npm i --save ol 2. 创建地图 一个地图初步就这样完成了. 3. 怎么与后台进行交互? 具体参考文档:http://weilin.me/ol3-primer/ch ...

  6. openlayers在底图上添加静态icon

    越学习openlayer你会发现openlayer是真的很强大,今天记录一下学习的成果,需求是做那种室内的CAD的场景然后里面展示人员icon并且实时展示人员的位置信息,以及点击弹出对应人员的一些位置 ...

  7. Android -- 自定义View小Demo，绘制钟表时间（一）

    1,昨天刚看了hongyang大神推荐的自定义时钟效果(传动门:http://www.jianshu.com/users/a45d19d680af/),效果还是不错的,自己又在github上找了找,发 ...

  8. OpenLayers 3加载本地Google切片地图

    OpenLayers  提供了ol.source.XYZ 接口用以加载切片地图. 本地切片地图是用地图切片下载器下载的Google道路图层,由于软件未激活,所以每张切片地图上都有软件作者的联系方式,请 ...

  9. canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

随机推荐

  1. CF 938G Shortest Path Queries

    又到了喜闻乐见的写博客清醒时间了233,今天做的依然是线段树分治 这题算是经典应用了吧,假的动态图(可离线)问题 首先不难想到对于询问的时间进行线段树分治,这样就可以把每一条边出现的时间区间扔进线段树 ...

  2. ajax.readyState和HTTP状态码的提示

    ajax.readyState 0 -(未初始化)还没有调用send()方法 1 -(载入)已调用send()方法,正在发送请求 2 -(载入完成)send()方法执行完成,已经接收到全部响应内容 3 ...

  3. Pytorch数据类型转换

    Pytorch数据类型转换 载入模块生成数据 import torch import numpy as np a_numpy = np.array([1,2,3]) Numpy转换为Tensor a_ ...

  4. centos 文本文件编码转换

    iconv -f utf-8 -t gbk   shtel_single_utf8.mlf > shtel_single_gbk.mlf

  5. POJ-2661Factstone Benchmark

    Factstone Benchmark Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5577   Accepted: 25 ...

  6. 【MySQL配置参数】sync_binlog和innodb_flush_log_at_trx_commit

    sync_binlog和innodb_flush_log_at_trx_commit这2个参数都是MySQL中,配置日志持久化时机的,但有很大不同,做下对比分析总结. 1.MySQL服务器配置参数:s ...

  7. 钉钉SDK使用。

    (1)到 https://open-doc.dingtalk.com/microapp/faquestions/vzbp02 下载SDK (2)引入 using DingTalk.Api; using ...

  8. VSCode搭建django项目

    之前我们使用VSCode搭建C#项目,今天写一篇关于django项目的搭建,其实以其说是搭建django框架,不如说是如何通过vscode开发django项目:django官网:https://www ...

  9. PhaseScorer:感慨高手写的代码就是精炼

    看懂了PhaseScorer的算法后,回想起前面看的算法和代码,感慨高手写的代码总是那么精炼,没有一句废话,多一句不行,少一句不行.明天来了写下PhaseScorer算法的实现:todo

  10. Vue监控器watch的全面解析

    前言 前面讲到了计算属性computed,这次讲的是监控器watch,主要任务就是监控变量的变化 正文 watch是一个对象,键是需要观察的表达式,值是对应回调函数.值也可以是方法名,或者包含选项的对 ...