安装openlayers
今天和大家一起学习一下openlayers地图,我也是才开始学习openlayers,也是一个人在网上找一些博客以及在官网慢慢摸索。有不全面的希望大家可以留言指正。我也把我平时练习的项目也开源,等会附上网址。
gitee仓库:https://gitee.com/liujianqiu1/openlayers
openlayers官网:https://openlayers.org/
openlayers中文网:http://linwei.xyz/ol3-primer/ch01/index.html(这个我个人感觉写的不全)
接下来进入整体,本人使用的是vue2版本开发,vue安装我就不介绍了,下面我直接介绍安装openlayers这个地图依赖:npm install ol 安装好就可以了。
接下里就是开始使用openlayers
首先,第一点的是我们需要在.vue页面中写一个div放置地图,这里必须要说的是,div必须要设置宽和高,不然不显示,亲身踩雷。
接下来就可以写js代码实现第一个地图实例。首先第一个我们先要引入各种依赖,网上找了好多文章基本上都是直接上代码部分截图,很少有告诉我们改引入哪些依赖,我找了半天才把该需要引入的依赖引入,创作不易,麻烦给点个赞。
接下来直接上js正文
okk,我这里使用的是国内比较多的高德地图,没有使用openlayers默认的OSM地图,如果有兴趣可以使用OSM地图,但是加载的话会比较慢。接下里我们运行项目就可以看到如图所示:
最后,今天就和大家一起学习新建一个地图实例,关于openlayers我会每天都会更新一点,最新的代码也会及时推送到gitee里面,欢迎大家可以一起进行开发哦。