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. 初识QuartusII 9.0（破解，半加器的仿真，综合：上）

    由于在意大利期间,用的xilinx公司的ZYBO板子,相应的软件用ISE,SDK.回国买了altera公司的板子,自然也要学习国内较流行的软件(TB大西瓜家,因此相关例程也是大部分引用他家).Quar ...

  2. TensorFlow(三)：非线性回归

    import tensorflow as tf import numpy as np import matplotlib.pyplot as plt # 非线性回归 # 使用numpy生成200个随机 ...

  3. infiniband RDMA对比

  4. XFTP 乱码

  5. python 根据时间戳获取秒🐱

    print("当前时间: ",time.strftime('%Y.%m.%d %H:%M:%S ',time.localtime(time.time()))) import tim ...

  6. vue点击父组件里面的列表动态传值到子组件

    <template> <div> 爸爸 <div style="background-color:yellow;margin-top:10px" v- ...

  7. 会话技术cookie与session

    目录 会话技术cookie 会话技术 cookie 服务器怎样把Cookie写 给客户端 服务器如何获取客户端携带的cookie session session简介 Session如何办到在一个ser ...

  8. Java-JUC（零）：Java:现有线程T1/T2/T3，如何确保T1执行完成之后执行T2，T3在T2执行完成之后执行。

    要实现多个线程执行完成先后,就要知道如何实现线程之间的等待,java线程等待实现是join.java的jdk中join方法实现如下: public final synchronized void jo ...

  9. Win+数字快速启动/切换指定程序

    Windows键+数字,可以快速启动任务栏上的程序 按下按下Win+4桌面将切换到排序第4的程序:页也就是谷歌浏览器. 今天刚发现这个小功能.   文章来源:外星人来地球 欢迎关注,有问题一起学习欢迎 ...

  10. PM2用法简介【命令行启动 --env 参数设置使用问题】

    环境切换 正式开发中分为不同的环境(开发环境.测试环境.生产环境),我们需要根据不同的情景来切换各种环境 pm2通过在配置文件中通过env_xx来声明不同环境的配置,然后在启动应用时,通过--env参 ...