@gvol-org/daassdk.openlayers
v1.0.1
Published
是一套基于Datacloud 地图API的应用程序接口，您可以使用该套SDK简单快捷的调用Datacloud的地图服务。
Downloads
5
Keywords
Readme
快速上手
script 引入
html 部分
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OpenLayer测试</title>
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="../src/LayerManager/OpenLayer/ol.js"></script>
<script src="../src/LayerManager/OpenLayer/daas.geovis.ol.min.js"></script>
</head>
<body>
<div id="OpenLayer" style="width:100%,height:100%"></div>
</body>js 部分
加载数据服务
<script>
let map = new ol.Map({
target: document.getElementById('OpenLayer'),
layers: [],
controls: [],
view: new ol.View({
projection: 'EPSG:3857',
center: [0, 0],
zoom: 2.9068905956085187,
maxZoom: 20
})
})
let instance = daas.useOpenlayer(map);
//增
let layer = instance.addLayer({
name: 'yingxiang',
index: 0,
baseUrl: "https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}",
tmsIds: "w",
format: 'webp',
token: "4ea7bc4e9a2efc4e76be33d9511600dfa3b4f24bb81cb69561ab0b833d9b482c",
minimumLevel: 0,
maximumLevel: 18,
});
//显示
layer.show = true;
//修改层级
layer.index = 2;
</script>通过 npm 安装
npm i @gvol-org/openlayers ol
//入口文件
import { Map, View } from "ol";
import { useOpenlayer } from "@gvol-org/openlayers";
onMounted(() => {
// 初始化地球
let map = new Map({
target: "OpenLayer",
layers: [],
controls: [],
view: new View({
projection: "EPSG:3857",
center: [0, 0],
zoom: 2.9068905956085187,
maxZoom: 20,
}),
});
let instance = useOpenlayer(map);
//增
let layer = instance.addLayer({
name: "yingxiang",
index: 1,
baseUrl: "https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}",
tmsIds: "w",
format: "webp",
token: "4ea7bc4e9a2efc4e76be33d9511600dfa3b4f24bb81cb69561ab0b833d9b482c",
minimumLevel: 0,
maximumLevel: 18,
});
layer.show = true;
});