openlayer初步加载地图

vue项目搭好后，直接用node js安装ol,

安装好后可以看看安装的版本；我用的是5..2的版本

然后看官网相对应版本的文档，都是英文文档;

官方文档：    http://openlayers.org/en/latest/apidoc/

　　然后引入所需要的js;

　　    

先加载出地图：

　　 

　　　

效果图：

　　

　　使用离线地图时，重点注意的是：坐标系的问题，在写代码的时候坐标必须要和下载的离线地图的坐标系要保持一致；如果不一致，中心坐标会和地图偏移很远

　　 我用的是EPSG：3857的，所以center中心坐标 不是大家了解的经纬度的写法;

　　

这一点代码就可加载出地图；

因为业务需求；我所做的是要在地图上加点，画线，保存在数据库，然后可以通过点击点或者线在地图弹出popu框来展示相关信息， 对于画好的点、线点击还可以修改保存；

后面对地图的一些操作我会分享出来；

openlayers集成到vue开发的更多相关文章

  1. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  2. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  3. 面试官：自己搭建过vue开发环境吗？

    开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...

  4. 2019 Vue开发指南：你都需要学点啥？

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://dzone.com/articles/vue-development-in-2019 ...

  5. 1.WIN10下搭建vue开发环境

    WIN10下搭建vue开发环境 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. ...

  6. vue-multi-module【多模块集成的vue项目，多项目共用一份配置，可以互相依赖，也可以独立打包部署】

    基于 vue-cli 2 实现,vue 多模块.vue多项目集成工程 Github项目地址 : https://github.com/BothEyes1993/vue-multi-module 目标: ...

  7. 初探webpack之从零搭建Vue开发环境

    初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...

  8. 基于Vue开发的门户网站展示和后台数据管理系统

    基于Vue的前端框架有很多,这几年随着前端技术的官方应用,总有是学不完的前端知识在等着我们,一个人的精力也是有限,不可能一一掌握,不过我们学习很大程度都会靠兴趣驱动,或者目标导向,最终是可以以点破面, ...

  9. vue开发体验

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

随机推荐

  1. Allure自动化测试报告之修改allure测试报告logo

    1.安装allure 2.进入 /usr/local/Cellar/allure/2.10.0/libexec/config 3.在allure.yml添加 - custom-logo-plugin ...

  2. Spring Cloud Gateway（五）：路由定位器 RouteLocator

    本文基于 spring cloud gateway 2.0.1 1.简介 直接 获取 路 由 的 方法 是 通过 RouteLocator 接口 获取. 同样, 该 顶 级 接口 有多 个 实现 类, ...

  3. Lucene4.2源码解析之fdt和fdx文件的读写——fdx文件存储一个个的Block，每个Block管理着一批Chunk，通过docID读取到document需要完成Segment、Block、Chunk、document四级查询，引入了LZ4算法对fdt的chunk docs进行了实时压缩/解压

    前言 通常在搜索打分完毕后,IndexSearcher会返回一个docID序列,但是仅仅有docID我们是无法看到存储在索引中的document,这时候就需要通过docID来得到完整Document信 ...

  4. python中的with的用法，上下文管理器

    with是从Python2.5引入的一个新的语法,它是一种上下文管理协议,目的在于从流程图中把 try,except 和finally 关键字和 资源分配释放相关代码统统去掉,简化try….excep ...

  5. python人生如初见之初见yield

    今天学习爬虫Scrapy框架搭建的时候,了解了yield的用法.了解一个东西,无外乎 WHAT? HOW? WHY? WHAT yield英文意思是屈服,退位,放弃.额...其实它是Python中的一 ...

  6. 咏南中间件D7客户端演示

    咏南中间件D7客户端演示 咏南中间件MORMOT(http.sys)支持D6.D7等老版本开发客户端.客户端使用TClientDataSet内存表控件,数据序列使用TynSerial类.

  7. markdown中如何设置字体为红色?

    答: 语法如下: <font color='red'> text </font>

  8. Python 3.x 引入了函数注释

    Python 3.x 引入了函数注释,以增强函数的注释功能,下面是一个普通的自定义函数:   def dog(name, age, species):   return (name, age, spe ...

  9. 用户Ip地址和百度地图api接口获取用户地理位置（经纬度坐标，城市）

    <?php   //获取用户ip(外网ip 服务器上可以获取用户外网Ip 本机ip地址只能获取127.0.0.1) function getip(){     if(!empty($_SERVE ...

  10. 03--STL算法（常用算法）

    一:常用的查找算法 (一)adjacent_find():邻接查找 在iterator对标识元素范围内,查找一对相邻重复元素,找到则返回指向这对元素的第一个元素的迭代器.否则返回past-the-en ...