init

wxzgis · Oct 9, 2020 · 6d02461 · 6d02461
1 parent 85e18dc
commit 6d02461
Show file tree

Hide file tree

Showing 21 changed files with 241 additions and 145 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "esri-loader": "^2.15.0",
     "vue": "^3.0.0",
-    "vue-class-component": "^8.0.0-0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
   },
@@ -20,6 +20,8 @@
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
+    "sass": "^1.27.0",
+    "sass-loader": "^10.0.2",
     "typescript": "~3.9.3"
   },
   "browserslist": [

diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>static/img/favicon.ico">
+    <link rel="stylesheet" href="<%= BASE_URL %>static/css/reset.css">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

diff --git a/public/static/css/reset.css b/public/static/css/reset.css
@@ -0,0 +1,9 @@
+html body {
+  margin: 0;
+  padding: 0;
+}
+
+/* 去除地图黑边框 */
+.esri-view .esri-view-surface--inset-outline:focus::after {
+  outline: unset !important;
+}
diff --git a/public/favicon.ico → public/static/img/favicon.ico b/public/favicon.ico → public/static/img/favicon.ico
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,15 @@
+import { defineComponent } from 'vue'
+import View from './components/View'
+import '@/assets/style/app.scss'
+
+export default defineComponent({
+  components: {
+    View
+  },
+  setup () {
+    return () => 
+      <div id="app">
+        <View class="view" />
+      </div>
+  }
+})
diff --git a/src/App.vue b/src/App.vue
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/style/app.scss b/src/assets/style/app.scss
@@ -0,0 +1,7 @@
+#app {
+  height: 100vh;
+
+  .view {
+    height: inherit;
+  }
+}
diff --git a/src/assets/style/view.scss b/src/assets/style/view.scss
@@ -0,0 +1,3 @@
+.view {
+  height: 50vh;
+}
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/View.tsx b/src/components/View.tsx
@@ -0,0 +1,32 @@
+import {
+  defineComponent,
+  getCurrentInstance,
+  onMounted,
+} from 'vue';
+import { useStore } from 'vuex'
+import { VIEW_DEFAULT_OPTIONS } from '@/config/esri.conf'
+import { useEsri, useEsriUtils } from '@/hooks/esri';
+
+export default defineComponent({
+  setup () {
+    const { ArcGISMap, MapView } = useEsri()
+    const store = useStore()
+
+    const { createBasemap } = useEsriUtils()
+
+    onMounted(() => {
+      const map = new ArcGISMap({
+        basemap: createBasemap('彩色中文含兴趣点版中国基础地图')
+      })
+
+      const view = new MapView({
+        map, ...VIEW_DEFAULT_OPTIONS
+      })
+
+      store.commit('setMapView', { map, view })
+    })
+
+    return () => 
+      <div id="view-container"></div>
+  }
+})
diff --git a/src/config/esri.conf.ts b/src/config/esri.conf.ts
@@ -0,0 +1,34 @@
+const ARCGIS_API_URL : string = 'https://wuxizhe.fun/arcgisjs/api/4.15'
+
+export const ESRI_CONFIG = {
+  url: `${ARCGIS_API_URL}/init.js`,
+  css: `${ARCGIS_API_URL}/esri/themes/light/main.css`,
+}
+
+export const BASEMAPS = {
+  "彩色中文含兴趣点版中国基础地图": {
+    type: "WebTileLayer",
+    url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{level}/{row}/{col}",
+  },
+  "灰色中文不含兴趣点版中国基础地图": {
+    type: "WebTileLayer",
+    url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/tile/{level}/{row}/{col}",
+  },
+  "蓝黑色中文不含兴趣点版中国基础地图": {
+    type: "WebTileLayer",
+    url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{level}/{row}/{col}",
+  },
+  "暖色中文不含兴趣点版中国基础地图": {
+    type: "WebTileLayer",
+    url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{level}/{row}/{col}",
+  }
+}
+
+export const VIEW_DEFAULT_OPTIONS = {
+  container: 'view-container',
+  zoom: 3,
+  center: [110, 10],
+  ui: {
+    components: []
+  }
+}
diff --git a/src/hooks/esri.ts b/src/hooks/esri.ts
@@ -0,0 +1,25 @@
+import { BASEMAPS } from '@/config/esri.conf';
+import { reactive } from 'vue';
+
+const esri = reactive({})
+
+export function useEsriUtils () {
+
+  return {
+    set (obj : any) {
+      Object.assign(esri, { ...obj })
+    },
+    createBasemap (name: string) {
+      const { WebTileLayer } = useEsri()
+      const basemap = (BASEMAPS as any)[name]
+      if (basemap.type === 'WebTileLayer') {
+        return { baseLayers: [ new WebTileLayer({ urlTemplate: basemap.url }) ] }
+      }
+    },
+  }
+}
+
+
+export function useEsri () {
+  return ({ ...esri } as any)
+}
diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,30 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './App'
 import router from './router'
 import store from './store'
 
-createApp(App).use(store).use(router).mount('#app')
+import { loadModules } from 'esri-loader'
+import { ESRI_CONFIG } from './config/esri.conf'
+import { useEsriUtils } from './hooks/esri'
+
+const app = createApp(App)
+
+loadModules([
+  'esri/Map',
+  'esri/views/MapView',
+  'esri/layers/WebTileLayer',
+], ESRI_CONFIG).then(([
+  ArcGISMap,
+  MapView,
+  WebTileLayer,
+]) => {
+  const { set } = useEsriUtils()
+  set({
+    ArcGISMap,
+    MapView,
+    WebTileLayer,
+  })
+
+  app.use(store).use(router).mount('#app')
+})
+