vue加载openlayers入门教程(超简单)
Vue加载OpenLayer很简单,很简单,很简单第一步:创建vue项目第二步很简单,很简单,很简单学会了vue,开始测试mapbox的搭配,学会了mapbox,有整了一下openlayer的导入,刚开始简直崩溃,一脸懵逼,怎么导包都导不进去,试了无数次的npm install ol的那种,而且贼慢,后来自己研究了一下,超简单的那种!简单写一下。。。。第一步:创建vue项目cmd运行vue ui里
·
Vue加载OpenLayer
很简单,很简单,很简单
学会了vue,开始测试mapbox的搭配,学会了mapbox,有整了一下openlayers的导入,刚开始简直崩溃,一脸懵逼,怎么导包都导不进去,试了无数次的npm install ol的那种,而且贼慢,后来自己研究了一下,超简单的那种!简单写一下。。。。
第一步:创建vue项目
cmd运行
vue ui
里面的设置自己根据需要加载一下就ok,最主要的是在依赖的地方导入ol运行依赖就这个东西,搞得我头疼了半天。
第二步 加载openlayer
接下来就是普通的vue项目的加载了
<template>
<div id="map"></div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { transform } from "ol/proj";
import OSM from "ol/source/OSM";
export default {
data() {
return {};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
new Map({
target: "map",
layers: [
new TileLayer({
source: new XYZ({
url:
"https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=key",
}),
}),
new TileLayer({
source: new XYZ({
url:
"https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=key",
}),
isGroup: true,
name: "天地图文字标注",
}),
// new TileLayer({
// source: new OSM(),
// }),
],
view: new View({
projection: "EPSG:4326",
center: [103.3, 35.5],
zoom: 4,
}),
});
},
},
};
</script>
<style lang="scss" scoped>
#map {
height: 100%;
width: 100%;
margin: 0;
// background-color: antiquewhite;
}
</style>
这里也不需要在main.js中import
效果图:
更多推荐
已为社区贡献1条内容
所有评论(0)