由于项目需要，需要是使用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绘制静态底图的更多相关文章

  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. 【CF280D】k-Maximum Subsequence Sum（大码量多细节线段树）

    点此看题面 大致题意: 给你一个序列,让你支持单点修改以及询问给定区间内选出至多\(k\)个不相交子区间和的最大值. 题意转换 这道题看似很不可做,实际上可以通过一个简单转换让其变可做. 考虑每次选出 ...

  2. android shape图形优化Button效果

    android shape可以让我们通过定义xml文件的方式创建图形,当然只能实现一些比较简单的图形(圆形,矩形,椭圆,线段),但是已经相当不错了,通过shape创建的图形作为控件的背景已经基本可以满 ...

  3. Win10 企业版ltsc 无法访问samba网络共享问题及解决！(转)

    1.本地安全策略,本地策略-安全选项,需要修改成默认的值的修改方式:查找注册表浏览到 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\LSA直接 ...

  4. LCT好题总结

    写在前面: 初探多项式之后,开始了数据结构之旅,可持久化数据结构的总结大概是咕了,只总结一些$LCT$的题 T1:水管局长数据加强版 发现题中只有删边操作,而我们只会做加边,所有考虑时光倒流 先在最后 ...

  5. 网页静态化技术Freemarkerh简介

    1.1为什么要使用网页静态化技术 网页静态化解决方案在实际开发中运用比较多,例如新闻网站,门户网站中的新闻频道或者是文章类的频道. 对于电商网站的商品详细页来说,至少几百万个商品,每个商品又有大量的信 ...

  6. 线程池之ScheduledThreadPoolExecutor线程池源码分析笔记

    1.ScheduledThreadPoolExecutor 整体结构剖析. 1.1类图介绍 根据上面类图图可以看到Executor其实是一个工具类,里面提供了好多静态方法,根据用户选择返回不同的线程池 ...

  7. RocketMQ多master迁移至多master多slave模式

    一.项目背景 由于当前生产环境RocketMQ机器使用年限较长,已经过保,并且其中一台曾经发生过异常宕机事件.并且早期网络规划较乱,生产.开发.测试等网络没有分开,公司决定对当前网络进行规划,区分各个 ...

  8. CentOS系统安装Python3

    准备: CentOS 6.4系统 Python-3.6.5.tgz 下载地址: 官网:https://www.python.org/downloads/release/python-365/ 镜像:h ...

  9. FastDFS图片服务器(分布式文件系统)学习。

    参考:https://blog.csdn.net/hiqingtian/article/details/79413471 https://blog.csdn.net/sinat_40399893/ar ...

  10. 练手WPF（一）——模拟时钟与数字时钟的制作（下）

    继续数字时钟.上一篇写好了数字笔划专用的DigitLine类.现在是时候使用它了.下面对一些主要代码进行说明. 打开MainWindow.xaml.cs文件: (1)添加字段变量 // 数字时钟字段定 ...