vue3 vite cesium&&ol

https://zouyaoji.top/vue-cesium/#/zh-CN/component/installation
npm install vite-plugin-cesium

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'; // 引入插件
import path from "path"
export default defineConfig({
  plugins: [vue(),cesium()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

<template>
  <div class="layer-cesium">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted } from 'vue';

function initMap(){
const viewer = new Cesium.Viewer('cesiumContainer');    
}
onMounted(()=>{
  initMap()
})
   
</script>

<style scoped>
.layer-cesium {
  width: 1000px;
  height: 800px;
}
</style>

=============================
public 对应/
window.CESIUM_BASE_URL = '/Cesium/';

image.png

<template>
  <div class="layer-cesium">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script setup>
window.CESIUM_BASE_URL = '/Cesium/';
// console.log(__filename)

import { Viewer } from 'cesium';
// import "cesium/Build/Cesium/Widgets/widgets.css";
import { onMounted } from 'vue';

function initMap(){
const viewer = new Viewer('cesiumContainer');    
}

onMounted(()=>{
  initMap()
})
   
</script>

<style scoped>
.layer-cesium {
  width: 1000px;
  height: 800px;
}
</style>

====================ololololololololololololol========================
npm install ol

<template>
  <div id="map" class="map"></div>
</template>


<script setup>
import { ref, onMounted } from "vue"; // vue相关方法

import GeoJSON from "ol/format/GeoJSON.js";
import Map from "ol/Map.js";
import Projection from "ol/proj/Projection.js";
import VectorTileLayer from "ol/layer/VectorTile.js";
import VectorTileSource from "ol/source/VectorTile.js";
import View from "ol/View.js";
import { Fill, Style } from "ol/style.js";
import geojsonvt from 'geojson-vt';
import { GdLayer } from "@/util/ol-lib.js";

let map;

function initMap() {
  const style = new Style({
    fill: new Fill({
      color: "#eeeeee",
    }),
  });

  const layer = new VectorTileLayer({
    background: "#1a2b39",
    style: function (feature) {
      const color = feature.get("COLOR") || "#eeeeee";
      style.getFill().setColor(color);
      return style;
    },
  });

  map = new Map({
    layers: [layer],
    target: "map",
    view: new View({
      center: [0, 0],
      zoom: 2,
    }),
  });

  const url = "https://openlayers.org/data/vector/ecoregions.json";
  fetch(url)
    .then(function (response) {
      return response.json();
    })
    .then(function (json) {
      const tileIndex = geojsonvt(json, {
        extent: 4096,
        debug: 1,
      });
      const format = new GeoJSON({
        // Data returned from geojson-vt is in tile pixel units
        dataProjection: new Projection({
          code: "TILE_PIXELS",
          units: "tile-pixels",
          extent: [0, 0, 4096, 4096],
        }),
      });
      const vectorSource = new VectorTileSource({
        tileUrlFunction: function (tileCoord) {
        //   console.log(tileCoord)
          // Use the tile coordinate as a pseudo URL for caching purposes
          return JSON.stringify(tileCoord);
        },
        tileLoadFunction: function (tile, url) {
        //   console.log(url)
          const tileCoord = JSON.parse(url);
          const data = tileIndex.getTile(
            tileCoord[0],
            tileCoord[1],
            tileCoord[2]
          );
        //   console.log(data)
          const geojson = JSON.stringify(
            {
              type: "FeatureCollection",
              features: data ? data.features : [],
            },
            replacer
          );
          const features = format.readFeatures(geojson, {
            extent: vectorSource.getTileGrid().getTileCoordExtent(tileCoord),
            featureProjection: map.getView().getProjection(),
          });
          tile.setFeatures(features);
        },
      });
      layer.setSource(vectorSource);
    });
}

  // Converts geojson-vt data to GeoJSON
const replacer = function (key, value) {
    if (!value || !value.geometry) {
      return value;
    }

    let type;
    const rawType = value.type;
    let geometry = value.geometry;
    if (rawType === 1) {
      type = "MultiPoint";
      if (geometry.length == 1) {
        type = "Point";
        geometry = geometry[0];
      }
    } else if (rawType === 2) {
      type = "MultiLineString";
      if (geometry.length == 1) {
        type = "LineString";
        geometry = geometry[0];
      }
    } else if (rawType === 3) {
      type = "Polygon";
      if (geometry.length > 1) {
        type = "MultiPolygon";
        geometry = [geometry];
      }
    }

    return {
      type: "Feature",
      geometry: {
        type: type,
        coordinates: geometry,
      },
      properties: value.tags,
    };
  };

onMounted(() => {
  initMap();
});
</script>


<style scoped>
.map {
  width: 600px;
  height: 400px;
}
</style>

maplibre

npm i maplibre-gl
https://demotiles.maplibre.org/style.json

image.png

<template>
  <div id="map" class="map"></div>
</template>


<script setup>
import { ref, onMounted } from "vue"; // vue相关方法
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import maplibre_style_file from '@/assets/maplibre-style.json'
let map;

function initMap() {
  map = new maplibregl.Map({
        container: 'map', // container id
        style: maplibre_style_file, // style URL
        center: [0, 0], // starting position [lng, lat]
        zoom: 1 // starting zoom
    });
}


onMounted(() => {
  initMap();
});
</script>


<style scoped>
.map {
  width: 600px;
  height: 400px;
}
</style>