vue中使用OpenLayers(一):引入谷歌地图
2020-02-06 08:29
525 查看
vue中使用OpenLayers(一):引入谷歌地图
第一步
npm install ol
package.json 中可以看到
第二步
引入
import "ol/ol.css"; import Map from "ol/Map"; import Feature from "ol/Feature"; import View from "ol/View"; import XYZ from "ol/source/XYZ"; import Point from "ol/geom/Point"; import { fromLonLat } from "ol/proj";//这里要注意
openlayers不仅仅是可以绘制地图,还可以绘制很多的图形和定位,所有都需要换算自己的格式,所以按照自己的需求 引入 fromLonLat 。
第三步
html中,这里要设置一个id
<div style="width: 100%;height: 100%;" id="mainDiv"></div>
methods中
initPointMap() { this.map = new Map({ target: "mainDiv",//这里是填的是上面的id view: new View({ center: fromLonLat([119.60753817138888, 30.49043631527778]),//地图加载的中心点 projection: "EPSG:3857", zoom: 12//加载地图的层级 }), layers: [ new TileLayer({ source: new XYZ({ url: "**********************",//这里是引用的本地 wrapX: true }) }) ] }); },//绘制第一层地图
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- vue2.0 中引入和使用 axios
- Raphael.js 在vue中使用说明, 以杭州市地图为例
- 如何使用万能地图下载器下载谷歌卫星大字体地图
- vue init webpack-simple 模板中全局引入Jquery正确使用方法 可保jQuery插件正常使用
- Vue.js父与子组件之间传参 父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为ht
- Vue全局组件开发,Vue.use(xxx)一次引入,全局使用 【Vue 非父子组件通信】
- 使用vue-cli搭建项目的使用,需要引入font-icon文件,报错的解决办法
- 如何使用Erdas裁剪万能地图下载器下载的谷歌卫星地图
- VUe学习之 vue引入使用
- vue轮播图插件vue-awesome-swiper的引入及使用
- vue项目中简单使用高德地图
- vue 中使用阿里iconfont (含有彩色图标,引入外部js文件)
- vue-cli引入使用less
- 单页面vue引入百度统计的使用方法!
- 怎么直接中vue组件的style使用less,不是引入less
- vue如何引入swiper和如何使用 以及相关的问题解决
- OpenLayers的使用---- 一个完全免费开源的地图JS库
- 关于自己使用vue引入百度地图定位当前城市的坑~
- Vue开发前端神器工具vue-devtools谷歌插件下载,和安装使用
- 使用OpenLayers以切片方式调用mapxtreme java渲染出的地图遇到的问题