测试地图

README.md

 # pudong-elevator
 
-（新）浦东新区电梯加装电梯地图
+（新）浦东新区电梯加装地图

package.json

@@ -9,6 +9,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "vue": "^3.0.5"
   },
   "devDependencies": {
@@ -19,6 +20,7 @@
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.4.1",
+    "node-xlsx": "^0.16.1",
     "prettier": "^2.2.1",
     "stylus": "^0.54.8",
     "vite": "^2.1.0"

src/App.vue

 <template>
-  <Map />
+  <Main />
 </template>
 
 <script>
@@ -15,7 +15,5 @@ export default {
   font-family Avenir, Helvetica, Arial, sans-serif
   -webkit-font-smoothing antialiased
   -moz-osx-font-smoothing grayscale
-  text-align center
   color #2c3e50
-  margin-top 60px
 </style>

src/assets/styles/normalize.css

+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

src/components/map.vue

@@ -3,19 +3,13 @@
 </template>
 
 <script>
-import { onMounted } from '@vue/runtime-core'
+import { onMounted, ref } from 'vue'
 const { aimap } = window
-
-export default {
-  name: 'Map',
-  setup() {
-    const map = ref(null)
-    const initMap = () => {
-      this.map.value = new aimap.Map({
+const DefaultMapConfig = {
   container: 'map',
   center: [121.544379, 31.221517], //初始化显示地图中心点//界浜村
-        zoom: 10, //初始化显示级别
-        pitch: 10, //初始化地图倾斜角度
+  zoom: 15, //初始化显示级别
+  pitch: 50, //初始化地图倾斜角度
   bearing: 0, //初始化地图旋转角度
   minZoom: 1, //地图缩放允许显示的最小层级
   maxZoom: 20, //地图缩放允许显示的最大层级
@@ -24,13 +18,117 @@ export default {
     [180, 85],
   ], //禁止地图拖动发生轮循
   style: 'aimap://styles/aimap/cy-darkblue-v2',
+  spatialReference: 'cgcs2000',
   // localIdeographFontFamily: "'Microsoft YaHei', 'sans-serif'",
+}
+export default {
+  name: 'Map',
+  emits: ['complete', 'event'],
+  setup(_, ctx) {
+    const map = ref(null)
+    const initMap = () => {
+      aimap.accessToken = 'gt8XidVe5upHf7cirkJwwXTCWj20zfu3'
+      aimap.baseApiUrl = 'https://location-dev.newayz.com'
+      map.value = new aimap.Map(DefaultMapConfig)
+      map.value.addControl(new aimap.CompassControl()) // 罗盘控件
+      map.value.on('loadcomplete', () => ctx.emit('complete'))
+    }
+    const zoomIn = (duration = 500, animate = true) => {
+      map.value.zoomIn({
+        duration,
+        animate,
+        easing: (t) => t,
+      })
+    }
+    const zoomOut = (duration = 500, animate = true) => {
+      map.value.zoomOut({
+        duration,
+        animate,
+        easing: (t) => t,
+      })
+    }
+    const zoomTo = (zoom = 15, duration = 500, animate = true) => {
+      map.value.zoomTo(zoom, {
+        duration,
+        animate,
+        easing: (t) => t,
+      })
+    }
+    const focus = (name, zoom = 15) => {
+      // if (!x || !y) {
+      //   console.error('地图focus方法需要x、y坐标')
+      //   return
+      // }
+      map.value.flyTo({
+        // center: [x, y],
+        filter: name,
+        zoom,
+        speed: 1.2,
+        curve: 1.42,
+        easing: (t) => t,
+      })
+    }
+
+    const addListener = () => {}
+    const transformPointData = ({ data, size, icon }) => {
+      return {
+        data: data.map((item, index) =>
+          Object.assign({}, item, {
+            name: item.community,
+            icon: 'icon',
+            coordinates: item.location,
+          })
+        ),
+        images: [
+          {
+            id: 'icon',
+            type: icon.substring(icon.lastIndexOf('.') + 1).toLowerCase(),
+            url: icon,
+          },
+        ],
+        style: {
+          // 'text-field': '{name}',
+          // 'text-color': '#00ff00',
+          // 'text-anchor': 'bottom',
+          // 'text-offset': [0, -2],
+          // 'icon-anchor': 'bottom',
+          'icon-image': ['get', 'icon'],
+          'icon-size': size,
+        },
+      }
+    }
+    const addPoint = ({
+      data,
+      size = 0.1,
+      icon = 'http://localhost:3000/static/star1.png',
+      key,
+      labelKey,
+      color,
+    }) => {
+      const instanceLayer = new aimap.MassMarkerLayer({
+        id: 'marker1',
+        spatialReference: 'cgcs2000', //坐标系声明
+        map: map.value,
+        ...transformPointData({ data, size, icon }),
       })
+      instanceLayer.on('click', (e) => {
+        // instanceLayer.setPopup('<p>' + e.features[0].properties.name + '</p>')
+        // instanceLayer.getPopup().setLngLat(e.lngLat)
+        // instanceLayer.togglePopup()
+        ctx.emit('event', e.features[0].properties)
+      })
+      return instanceLayer
+    }
+    const removePoint = (instance) => {
+      if (instance.remove) instance.remove()
     }
+    const addLine = () => {}
+    const addBoundary = () => {}
+
     onMounted(() => {
       initMap()
     })
-    return { map }
+    return { map, zoomIn, zoomOut, zoomTo, focus, addPoint, removePoint }
   },
 }
 </script>

src/main.js

 import { createApp } from 'vue'
 import App from './App.vue'
+import '@/assets/styles/normalize.css'
 
 createApp(App).mount('#app')

src/views/main.vue

 <template>
   <div class="main">
-    <Map />
+    <Map ref="map" @complete="mapComplete" @event="hanldeMapClick" />
   </div>
 </template>
 
 <script>
-import Map from '@/components/map'
+import { ref } from 'vue'
+import Map from '@/components/map.vue'
+import axios from 'axios'
+
 export default {
   name: 'Main',
   components: { Map },
-  data() {
-    return {}
+  setup() {
+    const map = ref(null)
+    const mapComplete = async () => {
+      const { data } = await axios.get(
+        'http://localhost:3000/static/summary.json'
+      )
+      map.value.addPoint({
+        data: data.slice(0, 10),
+      })
+      // map.value.focus(12193.697, 5012.81)
+    }
+    const hanldeMapClick = (e) => {
+      console.log('click', e)
+      map.value.focus(['all', ['==', 'name', e.name]])
+    }
+    return {
+      map,
+      mapComplete,
+      hanldeMapClick,
+    }
   },
 }
 </script>
 
 <style lang="stylus" scoped>
 .main
-  width 100%
-  height 100%
+  width 100vw
+  height 100vh
 </style>

static/data-from-excel.js

+const xlsx = require('node-xlsx')
+const fs = require('fs')
+
+const extractFromFile = (file) => {
+  console.info('开始从文件提取数据')
+  const workSheetFromFile = xlsx.parse(`${__dirname}/${file}`)
+  const sheets = JSON.parse(JSON.stringify(workSheetFromFile))
+  return sheets[0].data
+}
+
+const processData = (file) => {
+  const data = extractFromFile(file)
+  if (!data || data.length === 0) {
+    console.error('没有从文件中取得数据')
+    return
+  }
+  return data
+    .map((item, index) => {
+      return {
+        street: item[1],
+        community: item[2],
+        address: `${item[3]}${item[4]}弄${item[5]}号`,
+        condition: item[6],
+        color: item[7],
+        location: [+item[8], +item[9]],
+      }
+    })
+    .slice(1)
+}
+const start = (file, output) => {
+  const data = processData(file)
+  fs.writeFile(`${__dirname}/${output}`, JSON.stringify(data), (err) => {
+    if (err) {
+      console.error('写入文件错误：', err)
+      return
+    }
+    console.info('--------  任务已完成  ---------')
+  })
+}
+
+start('summary.xlsx', 'summary.json')