geoscene for js vue 开发环境搭建及本地化部署

npm install @geoscene/core

<template>
  <div id="viewDiv" class="viewDiv "></div>
</template>
<script>
import axios from 'axios'
import WebMap from '@geoscene/core/Map.js/'
import MapView from '@geoscene/core/views/MapView.js'
import Graphic from '@geoscene/core/Graphic.js'

export default {
  name: 'projectmap',
  data() {
    return {
      loading: true,
      geosceneMap: null, //地图
      geosceneView: null //视图
    }
  },
  mounted() {
    this.createMap()
  },
  destroyed() {},
  methods: {
    createMap() {
      var me = this
      me.geosceneMap = new WebMap({
        basemap: 'tianditu-vector' // 底图图层服务,
      })

      this.geosceneView = new MapView({
        map: me.geosceneMap,
        center: [116, 39], // 经度，纬度
        zoom: 5, // 缩放级别
        container: 'viewDiv' // Div 元素,
      })
      const point = {
        type: 'point',
        longitude: -49.97,
        latitude: 41.73
      }

      const markerSymbol = {
        type: 'simple-marker',
        color: [226, 119, 40],
        outline: {
          color: [255, 255, 255],
          width: 2
        }
      }
      const pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
      })
      this.geosceneView.graphics.addMany([pointGraphic])
    },
    customColors(percentage) {}
  }
}
</script>
<style lang="scss" scoped>
.viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
</style>

You may need an appropriate loader to handle this file type.
| See https://js.geoscene.cn/4.25/geoscene/copyright.txt for details.
| */
> import{_ as t}from"../chunks/tslib.es6.js";import{isNone as i}from

npm install -D @babel/core @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining babel-loader@8

    module: {
      rules: [
        {
          test: /\.m?js$/,
          exclude: {
            and: [/node_modules/], // exclude libraries in node_modules ...
            not: [
              // except for ones that needs to be transpiled because they use modern syntax
              /@geoscene[\\/]core/
            ]
          },
          use: {
            loader: "babel-loader",
            options: {
              plugins: [
                // these are required by Webpack 4 since @geoscene/core@4.24
                ["@babel/plugin-proposal-nullish-coalescing-operator", { loose: true }],
                ["@babel/plugin-proposal-optional-chaining", { loose: true }]
              ]
            }
          }
        }
      ]
    },