@gvol-org/daassdk.openlayers NPM

快速上手

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;
});

@everything-registry/sub-chunk-380

1.0.1

1 year ago

1.0.0

1 year ago