调整文档

Author: yangyanggu

build/gulp/utilGulpFile.ts

@@ -45,7 +45,7 @@ const build: TaskFunction = series(
       // 不参与打包
       plugins: [
         typescript({
-          tsconfig: resolve(projRoot,'build/config/tsconfig.json')
+          tsconfig: resolve(projRoot,'/tsconfig.build.json')
         }),
         nodeResolve({
           extensions: ['.mjs', '.js', '.json', '.ts'],
@@ -59,7 +59,7 @@ const build: TaskFunction = series(
           target: 'es2017', // default, or 'es20XX', 'esnext'
           jsx: 'transform', // default, or 'preserve'
           // Like @rollup/plugin-replace
-          tsconfig: 'tsconfig.json', // default
+          tsconfig: resolve(projRoot,'/tsconfig.build.json'), // default
           // Add extra loaders
           loaders: {
             // Add .json files support

build/types-definitions.ts

@@ -11,7 +11,7 @@ import { projRoot } from './utils/paths'
 import { excludeFiles } from './utils/pkg'
 import type { SourceFile } from 'ts-morph'
 
-const TSCONFIG_PATH = path.resolve(projRoot,'build', 'config' ,'tsconfig.json')
+const TSCONFIG_PATH = path.resolve(projRoot,'tsconfig.build.json')
 
 /**
  * fork = require( https://github.com/egoist/vue-dts-gen/blob/main/src/index.ts

build/utils/paths.ts

@@ -17,5 +17,5 @@ export const buildOutput = resolve(projRoot, 'dist')
 /** dist/vue-amap */
 export const epOutput = resolve(buildOutput, 'vue-amap')
 
-export const buildTsConfigPath = resolve(projRoot, 'build/config/tsconfig.json')
+export const buildTsConfigPath = resolve(projRoot, 'tsconfig.build.json')
 

docs/.vuepress/components/examples/loca/z-marker.vue

@@ -30,12 +30,12 @@
 import {ref} from "vue";
 import {ElAmap} from "@vuemap/vue-amap";
 import {ElAmapLoca, ElAmapLocaZMarker} from "@vuemap/vue-amap-loca";
-
+const baseUrl = import.meta.env.VITE_ASSERT_BASE_URL;
 const zoom = ref(16);
 const center = ref([116.597005,39.914388]);
 const pitch = ref(55)
 
-const sourceUrl = ref('/json/zmarker.json');
+const sourceUrl = ref(`${baseUrl}/json/zmarker.json`);
 const layerStyle = ref({
   unit: 'meter',
   content: (index, feat) => {

docs/.vuepress/components/examples/three/three-gltf-cache.vue

@@ -19,7 +19,7 @@
         <el-amap-three-gltf
           v-for="item in positions"
           :key="item.id"
-          url="/gltf/sgyj_point_animation.gltf"
+          :url="baseUrl + '/gltf/sgyj_point_animation.gltf'"
           :position="item.lnglat"
           :use-model-cache="true"
           :scale="[10,10,10]"
@@ -39,13 +39,17 @@ import {
   ElAmapThreeLightAmbient,
 } from '@vuemap/vue-amap-extra';
 
+type PositionType = {lnglat: number[], id: string}[]
+
 const zoom = ref(18);
 const center = ref([121.59996, 31.197646]);
 const rotation = ref({x: 90, y: 0, z: 0});
-const positions = ref([]);
+const positions = ref<PositionType>([]);
+
+const baseUrl = import.meta.env.VITE_ASSERT_BASE_URL;
 
 onBeforeMount(() => {
-  const array = [];
+  const array: PositionType = [];
   const position = [121.59996, 31.197646];
   for (let i = 0; i < 1000; i++) {
     const lnglat = [position[0] + Math.random() * 0.01, position[1] + Math.random() * 0.01];

docs/.vuepress/components/examples/three/three-gltf.vue

@@ -30,15 +30,15 @@
         />
         <el-amap-three-light-spot :position="{x:0, y:1, z:0}" />
         <el-amap-three-gltf
-          url="/gltf/sgyj_point_animation.gltf"
+          :url="baseUrl + '/gltf/sgyj_point_animation.gltf'"
           :position="position"
           :scale="[10,10,10]"
           :rotation="rotation"
           :visible="visible"
           @init="init"
         />
         <el-amap-three-gltf
-          url="/gltf/car2.gltf"
+          :url="baseUrl + '/gltf/car2.gltf'"
           :position="carPosition"
           :scale="[10,10,10]"
           :rotation="rotation"
@@ -77,6 +77,8 @@ import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass.js';
 import {ShaderPass} from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import {DotScreenShader} from 'three/examples/jsm/shaders/DotScreenShader.js';
 
+const baseUrl = import.meta.env.VITE_ASSERT_BASE_URL;
+
 const zoom = ref(18);
 const center = ref([121.59996, 31.197646]);
 const visible = ref(true);
@@ -87,7 +89,7 @@ const moveAnimation = ref({duration: 1000, smooth: true});
 const carAngle = ref(90);
 const hdrOptions = ref({
   urls: ['px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr'],
-  path: '/hdr/'
+  path: `${baseUrl}/hdr/`
 });
 let carInterval = -1;
 

docs/.vuepress/components/examples/three/three-layer-event.vue

@@ -39,7 +39,7 @@
         />
         <el-amap-three-light-spot :position="{x:0, y:1, z:0}" />
         <el-amap-three-gltf
-          url="/gltf/sgyj_point_animation.gltf"
+          :url="baseUrl + '/gltf/sgyj_point_animation.gltf'"
           :position="position"
           :scale="[10,10,10]"
           :rotation="rotation"
@@ -70,14 +70,16 @@ import {
   ElAmapThreeLightSpot
 } from '@vuemap/vue-amap-extra';
 
+const baseUrl = import.meta.env.VITE_ASSERT_BASE_URL;
+
 const zoom = ref(18);
 const center = ref([121.59996, 31.197646]);
 const visible = ref(true);
 const position = ref([121.59996, 31.197646]);
 const rotation = ref({x: 90, y: 0, z: 0});
 const hdrOptions = ref({
   urls: ['px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr'],
-  path: '/hdr/'
+  path: `${baseUrl}/hdr/`
 });
 const meshPosition = [121.59896, 31.197646];
 

docs/.vuepress/components/examples/three/three-video.vue

@@ -47,6 +47,8 @@ import {ref} from "vue";
 import {ElAmap} from "@vuemap/vue-amap";
 import {ElAmapLayerThree, ElAmapThreeLightAmbient, ElAmapThreeVideo} from "@vuemap/vue-amap-extra";
 
+const baseUrl = import.meta.env.VITE_ASSERT_BASE_URL;
+
 const videoDestroy = ref(true);
 const center = ref([116.306206, 39.975468]);
 const zoom = ref(15);
@@ -66,18 +68,18 @@ const videoOption = ref({
   height: 246
 });
 const alwaysFront = ref(true);
-const canvas = ref<HTMLCanvasElement>(null);
-let context: CanvasRenderingContext2D = null;
+const canvas = ref<HTMLCanvasElement>();
+let context: CanvasRenderingContext2D;
 
 const clickMap = (e) => {
   console.log('click map: ', e);
 }
 const initMap = (map) => {
   console.log('init map: ', map);
   canvas.value = document.createElement('canvas') as any;
-  canvas.value.width = 512;
-  canvas.value.height = 512;
-  context = canvas.value.getContext('2d');
+  canvas.value!.width = 512;
+  canvas.value!.height = 512;
+  context = canvas.value?.getContext('2d') as CanvasRenderingContext2D;
 }
 const changeVisible = () => {
   visible.value = !visible.value;
@@ -90,7 +92,7 @@ const initLayer = (layer) => {
 }
 const init = () => {
   const image = new Image();
-  image.src = "/images/screen.jpeg";
+  image.src = `${baseUrl}/images/screen.jpeg`;
   image.onload = () => {
     context?.drawImage(image, 0, 0)
   }

docs/.vuepress/data/config.json

@@ -1 +1 @@
-{"amap":"2023-11-18","loca":"2023-08-22","extra":"2023-09-16"}
+{"amap":"2023-12-02","loca":"2023-08-22","extra":"2023-09-16"}

docs/.vuepress/plugin/demoPlugin.ts

@@ -41,10 +41,15 @@ export const containerPlugin = ():Plugin => {
     name: 'demo-plugin',
     multiple: true,
   }
-
+  const domain = 'https://vue-amap.guyixi.cn/'
   // if `render` option is not specified
   // use `before` and `after` to generate render function
   // use markdown-it-container
+  pluginObj.define = (app) => {
+    return {
+      'import.meta.env.VITE_ASSERT_BASE_URL': app.env.isDev ? '' : domain
+    }
+  }
   pluginObj.extendsMarkdown = (md, app) => {
 
     md.use(mdContainer, 'demo', {
@@ -66,7 +71,8 @@ export const containerPlugin = ():Plugin => {
             )
           }
           if (!source) throw new Error(`Incorrect source file: ${sourceFile}`)
-
+          const baseUrl = app.env.isDev ? '' : domain
+          source = source.replace('import.meta.env.VITE_ASSERT_BASE_URL', JSON.stringify(baseUrl));
           return `<vp-demo source="${encodeURIComponent(
             highlight(source, 'vue')
           )}" path="${sourceFile}" raw-source="${encodeURIComponent(