vue全局引入openlayers_vue中使用OpenLayers（一）：引入谷歌地图

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

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

})

]

});

},//绘制第一层地图

vue全局引入openlayers_vue中使用OpenLayers（一）：引入谷歌地图相关推荐

android auto谷歌地图,如何在 Android Auto 中使用 Waze 而不是谷歌地图
玩懂手机网教程,随着有车一族的用户越来越庞大,Android 独家应用程序比 iOS 少的多,大部分用户依旧使用智能手机进行导航,对比起来 Android Auto 正在面临一个逐步两难的境界. An ...
openlayers加载谷歌地图（在线demo）
最近发现可以直接访问谷歌地图了(不用梯子,不用翻墙,直接访问谷歌地图,关键是使用了gac-geo.googlecnapps.cn ),用openlayers随手写了一个,方便自己使用,感兴趣的可以访问 ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
Vue中使用Openlayers加载Geoserver发布的TileWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载Geoserver发布的ImageWMS
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图
场景 Openlayers下载与加载geoserver的wms服务显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114 ...
Vue:全局拦截所有请求，并在请求头中添加token
Vue:全局拦截所有请求,并在请求头中添加token 在实际的项目中,为了登录的安全,token是必不可少的,所以就需要前后端配合,后端生成和验证token(这方面我也写过博客,讲述后端对token的 ...
Vue如何在data中正确引入图片路径
方法一:将图片资源放入项目 /static 目录下,使用绝对或相对路径引用即可 // 文件结构 |-- src | |-- components | | |-- banner.vue |-- stat ...

vue全局引入openlayers_vue中使用OpenLayers（一）：引入谷歌地图

vue全局引入openlayers_vue中使用OpenLayers（一）：引入谷歌地图相关推荐

最新文章

热门文章