二次开发增加"添加瓦片服务"模块

图层展示添加tip
修改icon服务端口

deployment/zjyzt_gis_master_web_ui.conf → deployment/zjyzt_gis_master_web_ui hb.conf

@@ -43,7 +43,7 @@ server {
         proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header   X-Forwarded-Host $server_name;
 
-        proxy_pass http://121.43.55.7:10090/;
+        proxy_pass http://121.43.55.7:10085/;
     }
 
     # geoserver

deployment/zjyzt_gis_master_web_ui121.conf

@@ -0,0 +1,60 @@
+
+server {
+    listen  1004;
+    
+    client_max_body_size   20m;
+
+    location / {
+        root /web/zjyzt_gis_master_web_ui;
+        index  index.html index.htm;
+    }
+
+    # oauth 
+    location /proxy_oauth/ {
+        proxy_set_header   Host $host;
+        proxy_set_header   X-Real-IP $remote_addr;
+        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header   X-Forwarded-Host $server_name;
+
+        proxy_pass http://121.43.55.7:10086/;
+    }
+
+    # 数据
+    location /proxy_data/ {
+        proxy_set_header   Host $host;
+        proxy_set_header   X-Real-IP $remote_addr;
+        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header   X-Forwarded-Host $server_name;
+
+        proxy_pass http://121.43.55.7:10087/;
+    }
+
+    ## 标注
+    #location /proxy_mark/ {
+    #    proxy_set_header   Host $host;
+    #    proxy_set_header   X-Real-IP $remote_addr;
+    #    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+    #    proxy_set_header   X-Forwarded-Host $server_name;
+    #    proxy_pass http://121.43.55.7:10088/;
+    #}
+
+    # 编辑标注
+    location /proxy_icon/ {
+        proxy_set_header   Host $host;
+        proxy_set_header   X-Real-IP $remote_addr;
+        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header   X-Forwarded-Host $server_name;
+
+        proxy_pass http://121.43.55.7:10085/;
+    }
+
+    # geoserver
+    location /proxy_geoserver/ {
+        proxy_set_header   Host $host;
+        proxy_set_header   X-Real-IP $remote_addr;
+        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header   X-Forwarded-Host $server_name;
+
+        proxy_pass http://121.43.55.7:8889/;
+    }
+}

package-lock.json

@@ -18,9 +18,10 @@
         "qs": "^6.10.3",
         "vue": "^2.6.11",
         "vue-cli-plugin-style-resources-loader": "^0.1.5",
+        "vue-codemirror": "^4.0.0",
         "vue-json-viewer": "^2.2.22",
         "vue-ls": "^3.2.2",
-        "vue-router": "^3.5.2",
+        "vue-router": "^3.5.4",
         "vuex": "^3.4.0"
       },
       "devDependencies": {
@@ -4387,6 +4388,11 @@
         "node": ">= 4.0"
       }
     },
+    "node_modules/codemirror": {
+      "version": "5.65.6",
+      "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.6.tgz",
+      "integrity": "sha512-zNihMSMoDxK9Gqv9oEyDT8oM51rcRrQ+IEo2zyS48gJByBq5Fj8XuNEguMra+MuIOuh6lkpnLUJeL70DoTt6yw=="
+    },
     "node_modules/collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -14371,6 +14377,18 @@
       "resolved": "https://registry.npmmirror.com/vue-cli-plugin-style-resources-loader/-/vue-cli-plugin-style-resources-loader-0.1.5.tgz",
       "integrity": "sha512-LluhjWTZmpGl3tiXg51EciF+T70IN/9t6UvfmgluJBqxbrb6OV9i7L5lTd+OKtcTeghDkhcBmYhtTxxU4w/8sQ=="
     },
+    "node_modules/vue-codemirror": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/vue-codemirror/-/vue-codemirror-4.0.0.tgz",
+      "integrity": "sha512-rh/Q9oMNd8cBf7Tr1cGZT5+ol/p8UOqfADMPoMe4fGEGnL6QPohHw/xYJ9H587thqY6TNA4dWb5VS57wXJJm4A==",
+      "dependencies": {
+        "codemirror": "^5.32.0"
+      },
+      "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -14565,9 +14583,9 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.3.tgz",
-      "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
+      "version": "3.5.4",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.4.tgz",
+      "integrity": "sha512-x+/DLAJZv2mcQ7glH2oV9ze8uPwcI+H+GgTgTmb5I55bCgY3+vXWIsqbYUzbBSZnwFHEJku4eoaH/x98veyymQ=="
     },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
@@ -19238,6 +19256,11 @@
         "q": "^1.1.2"
       }
     },
+    "codemirror": {
+      "version": "5.65.6",
+      "resolved": "https://registry.npmmirror.com/codemirror/-/codemirror-5.65.6.tgz",
+      "integrity": "sha512-zNihMSMoDxK9Gqv9oEyDT8oM51rcRrQ+IEo2zyS48gJByBq5Fj8XuNEguMra+MuIOuh6lkpnLUJeL70DoTt6yw=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -27538,6 +27561,14 @@
       "resolved": "https://registry.npmmirror.com/vue-cli-plugin-style-resources-loader/-/vue-cli-plugin-style-resources-loader-0.1.5.tgz",
       "integrity": "sha512-LluhjWTZmpGl3tiXg51EciF+T70IN/9t6UvfmgluJBqxbrb6OV9i7L5lTd+OKtcTeghDkhcBmYhtTxxU4w/8sQ=="
     },
+    "vue-codemirror": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/vue-codemirror/-/vue-codemirror-4.0.0.tgz",
+      "integrity": "sha512-rh/Q9oMNd8cBf7Tr1cGZT5+ol/p8UOqfADMPoMe4fGEGnL6QPohHw/xYJ9H587thqY6TNA4dWb5VS57wXJJm4A==",
+      "requires": {
+        "codemirror": "^5.32.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -27686,9 +27717,9 @@
       }
     },
     "vue-router": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.3.tgz",
-      "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
+      "version": "3.5.4",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.4.tgz",
+      "integrity": "sha512-x+/DLAJZv2mcQ7glH2oV9ze8uPwcI+H+GgTgTmb5I55bCgY3+vXWIsqbYUzbBSZnwFHEJku4eoaH/x98veyymQ=="
     },
     "vue-style-loader": {
       "version": "4.1.3",

package.json

@@ -18,9 +18,10 @@
     "qs": "^6.10.3",
     "vue": "^2.6.11",
     "vue-cli-plugin-style-resources-loader": "^0.1.5",
+    "vue-codemirror": "^4.0.0",
     "vue-json-viewer": "^2.2.22",
     "vue-ls": "^3.2.2",
-    "vue-router": "^3.5.2",
+    "vue-router": "^3.5.4",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/components/DataDisplay/LayerDisplay/Menu.vue

@@ -28,6 +28,7 @@
                           : true,
                     },
                   ]"
+                  :title="'单点模式'"
                   type="text"
                   size="mini"
                   circle
@@ -44,6 +45,7 @@
                           : true,
                     },
                   ]"
+                  :title="'聚合图模式'"
                   type="text"
                   size="mini"
                   circle
@@ -59,6 +61,7 @@
                           : true,
                     },
                   ]"
+                  :title="'热力图模式'"
                   type="text"
                   size="mini"
                   circle

src/components/DataLayer/LayerDetail.vue

@@ -116,22 +116,6 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
-        <!-- 颜色 -->
-        <el-col :span="11" v-if="fromDataRender.geometryType == 'Point'">
-          <el-form-item
-            label="图标颜色"
-            prop="lineColor"
-            style="margin-bottom: 10px"
-          >
-            <el-color-picker
-              v-model="fromDataRender.fillColor"
-              :disabled="!edit"
-              color-format="hex"
-            ></el-color-picker>
-          </el-form-item>
-        </el-col>
-      </el-row>
       <el-row v-if="fromDataRender.geometryType == 'Point'">
         <div class="picture_store">
           <ul>
@@ -149,6 +133,29 @@
           </ul>
         </div>
       </el-row>
+      <el-row>
+        <!-- 颜色 -->
+        <el-col
+          :span="11"
+          v-if="
+            fromDataRender.geometryType == 'Point' &&
+            fromDataRender.iconUrl != '' &&
+            fromDataRender.iconUrl.indexOf('.svg') > -1
+          "
+        >
+          <el-form-item
+            label="图标颜色"
+            prop="lineColor"
+            style="margin-bottom: 10px"
+          >
+            <el-color-picker
+              v-model="fromDataRender.fillColor"
+              :disabled="!edit"
+              color-format="hex"
+            ></el-color-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
       <el-row v-if="fromDataRender.geometryType == 'LineString'">
         <!-- 线宽 -->
         <el-col :span="13">
@@ -336,7 +343,8 @@ export default {
     // 图片选中
     selectedMark(item) {
       if (this.edit) {
-        this.fromDataRender.iconUrl = systemConfig.iconPrefix + item.iconUuidName;
+        this.fromDataRender.iconUrl =
+          systemConfig.iconPrefix + item.iconUuidName;
         this.iconList = this.iconList.map(function (imgItem) {
           imgItem.active = false;
           if (imgItem.id == item.id) {
@@ -351,7 +359,7 @@ export default {
     addModel(data) {
       let that = this;
       // 上传loading
-      const loading = this.$createLoading("图层新增中，请勿刷新！")
+      const loading = this.$createLoading("图层新增中，请勿刷新！");
       api
         .addModel(data)
         .then((result) => {
@@ -379,7 +387,7 @@ export default {
     updateModel(data) {
       let that = this;
       // 上传loading
-      const loading = this.$createLoading("图层更新中，请勿刷新！")
+      const loading = this.$createLoading("图层更新中，请勿刷新！");
       api
         .updateModel(data)
         .then((result) => {

src/components/SecondaryDevelopment/AddTileService.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-container>
+    <el-row class="first_level_title">集成方式和步骤</el-row>
+    <el-row v-for="(str, index) in content.way" :key="index">
+      <el-col class="text"> {{ index + 1 }}. {{ str }} </el-col>
+    </el-row>
+    <el-row class="first_level_title">代码示例</el-row>
+    <div>
+      <codemirror :value="code" :options="cmOptions"> </codemirror>
+    </div>
+    <el-row class="first_level_title">效果展示</el-row>
+    <el-carousel height="550px">
+      <el-carousel-item v-for="(item, index) in imageArr" :key="index">
+        <el-image :src="item.image" :preview-src-list="item.srcList"></el-image>
+      </el-carousel-item>
+    </el-carousel>
+  </el-container>
+</template>
+
+<script>
+// 引入组件
+import { codemirror } from "vue-codemirror";
+// 引入高亮样式
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/base16-light.css";
+// 引入语言
+import "codemirror/mode/javascript/javascript.js";
+
+// 引入图片
+import showImg from "@/assets/images/SecondaryDevelopment/addtiles.jpg";
+
+export default {
+  components: {
+    codemirror,
+  },
+  data() {
+    return {
+      imageArr: [
+        {
+          image: showImg,
+          srcList: [showImg],
+        },
+      ],
+      content: {
+        // 集成方式和步骤
+        way: [
+          "加载瓦片服务是基于OpenLayer二维地图开发引擎进行加载的，请确保开发环境处于OpenLayer地图开发环境下进行加载；",
+          "在网页中引入OpenLayer开发包的样式文件和引擎代码文件后，创建地图容器（即创建一个展示地图的页面元素），根据引擎中相关代码接口，实现功能。",
+        ],
+        // 方法说明
+        step: ["", "", ""],
+      },
+      code: `import Map from "ol/Map";
+import View from "ol/View";
+import TileLayer from "ol/layer/Tile";
+import XYZ from "ol/source/XYZ";
+
+let tilelayer = new TileLayer({
+    source: new XYZ({
+        url: url, // 此处的url为需要加载的地图服务的地址
+        crossOrigin: 'anonymous',
+    }),
+    visible:true
+});
+
+var map = new Map({
+    target: 'map', 
+    layers: [
+        tilelayer
+    ],
+    view: new View({
+        // projection: 'EPSG:4326',
+        // center: [116.334228, 39.072511],
+        center:[13410926.774433982,3715530.4937355495],
+        zoom: 12,
+    }),
+    controls: defaults({
+        zoom:false,
+        attributionOptions: {
+            collapsible: false
+        }
+    })
+});`,
+      cmOptions: {
+        mode: "text/javascript",
+        theme: "base16-light",
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.el-container {
+  display: block;
+  width: 100%;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  background: #ffffff;
+  overflow: hidden;
+  overflow-y: auto;
+  .el-row {
+    line-height: 40px;
+    &::before {
+      display: unset;
+    }
+  }
+
+  .first_level_title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .text {
+    font-size: 16px;
+  }
+  .second_text {
+    text-indent: 20px;
+  }
+  .el-table {
+    line-height: 23px;
+  }
+  ::v-deep .CodeMirror-line {
+    font-size: 16px;
+    line-height: 30px;
+  }
+}
+</style>

src/store/index.js

@@ -254,6 +254,11 @@ export default new Vuex.Store({
               name: "MeasureTool",
               index: "3", permission: 83,
             },
+            {
+              label: "加载瓦片服务",
+              name: "AddTileService",
+              index: "4", permission: 84,
+            },
           ],
         },
         {

src/views/SecondaryDevelopment.vue

@@ -12,6 +12,7 @@
         <ManualDrawingTool v-if="showIndex == '1'"></ManualDrawingTool>
         <GraphicsDrawingTool v-if="showIndex == '2'"></GraphicsDrawingTool>
         <MeasureTool v-if="showIndex == '3'"></MeasureTool>
+        <AddTileService v-if="showIndex == '4'"></AddTileService>
       </el-main>
     </el-container>
   </div>
@@ -36,6 +37,7 @@ export default {
     ManualDrawingTool: () => import("@/components/SecondaryDevelopment/ManualDrawingTool.vue"),
     GraphicsDrawingTool: () => import("@/components/SecondaryDevelopment/GraphicsDrawingTool.vue"),
     MeasureTool: () => import("@/components/SecondaryDevelopment/MeasureTool.vue"),
+    AddTileService: () => import("@/components/SecondaryDevelopment/AddTileService.vue"),
   },
   created() {
     let that = this;

vue.config.js

@@ -83,7 +83,7 @@ module.exports = {
       //   }
       // },
       '/proxy_icon/': {
-        target: 'http://121.43.55.7:10090',
+        target: 'http://121.43.55.7:10085',
         changeOrigin: true,
         pathRewrite: {
           '^/proxy_icon': ''