1

public/index.html

@@ -6,6 +6,12 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+
+     <!--引入样式文件，ip需要根据现场部署情况进行修改，不可下载到本地-->
+     <link rel="stylesheet" href="http://25.212.131.183:30012/narimap/developer/examples/css/narimap.css" />
+     <!--引入 js 文件，ip需要根据现场部署情况进行修改，不可下载到本地-->
+     <script src="http://25.212.131.183:30012/narimap/libs/narimap.umd.min.js"></script>
+
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>

src/router/index.js

@@ -31,6 +31,10 @@ import Layout from "@/layout";
 // 公共路由
 export const constantRoutes = [
   {
+    path: "/narimap",
+    component: () => import("@/views/map-view/MapView.vue"),
+  },
+  {
     path: "/redirect",
     component: Layout,
     hidden: true,

src/views/map-view/MapView.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="common-wrapper">
+
+      <div class="map-wrapper">
+        <div id="MapContainer" style="width: 100%;height: 100%;"></div>
+      </div>
+
+    </div>
+</template>
+
+<script>
+import narimapMixin from './mixins/narimap-mixin';
+
+export default {
+
+    name: 'MapView',
+
+    mixins: [
+      narimapMixin
+    ],
+
+    props: {
+
+    },
+
+    components: {
+
+    },
+
+    data() {
+        return {
+            
+        }
+    },
+
+    created() {
+
+    },
+
+    mounted() {
+      this.initNarimap()
+    },
+
+    computed: {
+
+    },
+
+    methods: {
+
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.common-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .map-wrapper {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/map-view/mixins/narimap-mixin.js

@@ -0,0 +1,103 @@
+export default {
+    data() {
+        return {
+          elecMap: null,
+          centerPt: [112.58588674467717, 26.87326582010502],
+          orgNo: '43404',
+          
+          pointArray: [],
+        }
+    },
+
+    // mounted() {
+    //     this.initNarimap()
+    //   },
+
+    methods: {
+      //初始化地图
+      async initNarimap() {
+        this.setNarimapPublicKey()
+        const narimapInstance = await this.narimapLogin()
+
+
+        narimapInstance.on('click', (e) => {
+          console.log(e);
+        })
+        narimapInstance.on('load', () => {
+          // this.initPsrmap(narimapInstance)
+        })
+      },
+      setNarimapPublicKey() {
+        narimap.publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCp3ZJQkNCJlxDagH/aKYHNL+xXFiF26F8xpIeLFZ8jCIznG3BPUmqB+X4dF8tgAPZvoIr8V5jQOeutHi8hZvHBpIeMEnDoYZsA4TmJeicUKxdxpB9HoYlAKEy6/AinbjkTh1troLEij6CGnX9joqREBygzgz0TbrNmSWQAr0WUCQIDAQAB'
+      },
+      async narimapLogin() {
+        const vm = this
+         await new Promise((resolve, reject) => {
+          narimap.Require(['PSRMap'], () => {
+            if (narimap.Config.examples.notlogin) {
+              vm.initMap('现场定制化底图参数');
+            } else {
+              //电网GIS地图服务登录
+              narimap.SGAuth.login()
+                .then((result) => {
+                  if (result.success) {
+                    console.log('登录成功');
+                  } else {
+                    console.log('登录失败', result);
+                  }
+
+                  resolve()
+                })
+                .catch((err) => {
+                  console.log('错误', err);
+                });
+            }
+          });
+        })
+
+        const narimapInstance = vm.initMap(narimap.Config.styles.sjBase);
+        return narimapInstance
+      },
+      initMap(styleurl) {
+        const narimapInstance = new narimap.Map({
+          // 地图绑定的DOM元素ID
+          container: "MapContainer",
+          // 地图样式
+          style: styleurl,
+          // 默认缩放层级
+          zoom: 7,
+          // 地图中心点
+          // center: process.env.NODE_ENV === 'development' ? [112.950437505898, 28.571406204592] : [111.6928724, 29.034552],
+          center: this.centerPt,
+          // 地图默认字体
+          localIdeographFontFamily: "Microsoft YoHei",
+          fullExtent: narimap.Config.examples.fullExtent,
+          waterMark: { text: " ", opacity: 0.0001 },
+          controls: [],
+          // //行政区边界
+          // adminBoundary: {
+          //     initOrgIds: 4307, //省份机构ID
+          //     theme: "admin_background",
+          //     mask: {
+          //       show: true,
+          //       color: "rgba(0, 128, 255, 0.5)",
+          //     },
+          //   },
+        })
+
+
+        this.narimapInstance = narimapInstance
+        return narimapInstance
+      },
+      initPsrmap(narimapInstance) {
+        const psrmap = new narimap.PSRMap(narimapInstance)
+        psrmap.addPSR([900,901,902,903])
+        //添加电网要素点击事件
+        psrmap.on("click", (features) => {
+          console.log(features)
+        })
+
+        return psrmap;
+      }
+    }
+}