Home Explore Help
Sign In
iTopmap
/
vue-cdutDigitalMap
6
1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

修改了slogan在手机端的监听

xicheng79 3 years ago
parent
c7735a7830
commit
53f7a6e01d
41 changed files with 459 additions and 13 deletions
Unified View Show Diff Stats
  1. 2 1
      build/utils.js
  2. 1 1
      dist/index.html
  3. 0 0
      dist/static/css/app.08a6e93eeabceb4a35b6f1f88d770a51.css
  4. 0 0
      dist/static/css/app.08a6e93eeabceb4a35b6f1f88d770a51.css.map
  5. 0 0
      dist/static/css/app.b5bdf979f934b4471d5400da0bbeb750.css
  6. 0 0
      dist/static/css/app.b5bdf979f934b4471d5400da0bbeb750.css.map
  7. BIN
      dist/static/fonts/element-icons.535877f.woff
  8. BIN
      dist/static/fonts/element-icons.732389d.ttf
  9. BIN
      dist/static/img/card-background.94471dc.png
  10. BIN
      dist/static/img/card-background.png
  11. BIN
      dist/static/img/card-img.png
  12. 1 0
      dist/static/img/close.svg
  13. BIN
      dist/static/img/info.png
  14. BIN
      dist/static/img/layerselect.png
  15. 32 0
      dist/static/img/logo.svg
  16. 30 0
      dist/static/img/more.svg
  17. BIN
      dist/static/img/src=http___bpic.588ku.com_original_origin_min_pic_18_04_12_f70d2ded9a68f2cb8552281732529e05.jpg!r650&refer=http___bpic.588ku.jpg
  18. BIN
      dist/static/img/如许亭.jpg
  19. BIN
      dist/static/img/岭南阁.JPG
  20. BIN
      dist/static/img/岭南阁.png
  21. 0 0
      dist/static/js/0.97a8e4043d185a917e1d.js
  22. 0 0
      dist/static/js/0.97a8e4043d185a917e1d.js.map
  23. 0 0
      dist/static/js/app.16a208ffa86cb8fbee3b.js
  24. 0 0
      dist/static/js/app.16a208ffa86cb8fbee3b.js.map
  25. 0 0
      dist/static/js/app.97f08f6e958cf48b8b5d.js
  26. 0 0
      dist/static/js/app.97f08f6e958cf48b8b5d.js.map
  27. 3 2
      dist/static/js/axios-config.js
  28. 98 0
      dist/static/js/clusterDisplay.js
  29. 137 0
      dist/static/js/drawFeature.js
  30. 0 2
      dist/static/js/manifest.3ad1d5771e9b13dbdad2.js
  31. 0 0
      dist/static/js/manifest.3ad1d5771e9b13dbdad2.js.map
  32. 2 0
      dist/static/js/manifest.9beacb73ba6d0692f259.js
  33. 0 0
      dist/static/js/manifest.9beacb73ba6d0692f259.js.map
  34. 88 0
      dist/static/js/ol.js
  35. 19 0
      dist/static/js/slogan.js
  36. 45 0
      dist/static/js/startDrawShape.js
  37. 0 0
      dist/static/js/vendor.7f4345dec93c3f4d6320.js
  38. 0 0
      dist/static/js/vendor.7f4345dec93c3f4d6320.js.map
  39. 0 0
      dist/static/js/vendor.a6c31f9f03e3d815c061.js
  40. 0 0
      dist/static/js/vendor.a6c31f9f03e3d815c061.js.map
  41. 1 7
      src/components/map.vue

+ 2 - 1
build/utils.js
View File 

@@ -47,7 +47,8 @@ exports.cssLoaders = function (options) {
 
     if (options.extract) {
 
     if (options.extract) {
 
       return ExtractTextPlugin.extract({
 
       return ExtractTextPlugin.extract({
 
         use: loaders,
 
         use: loaders,
 
-        fallback: 'vue-style-loader'
 
+        fallback: 'vue-style-loader',
 
+		publicPath: '../../' // 解决element UI打包后字体文件丢失
 
       })
 
       })
 
     } else {
 
     } else {
 
       return ['vue-style-loader'].concat(loaders)
 
       return ['vue-style-loader'].concat(loaders)

+ 1 - 1
dist/index.html
View File 

@@ -1,4 +1,4 @@
 
-<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,shrink-to-fit=no"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content="telephone=no"><meta http-equiv=X-UA-Compatible content="ie=edge"><title>成理青年</title><link href=./static/css/app.08a6e93eeabceb4a35b6f1f88d770a51.css rel=stylesheet></head><body><div class=scroll><div id=app></div></div><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.7f4345dec93c3f4d6320.js></script><script type=text/javascript src=./static/js/app.16a208ffa86cb8fbee3b.js></script></body><style>body,html{
 
+<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,shrink-to-fit=no"><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content="telephone=no"><meta http-equiv=X-UA-Compatible content="ie=edge"><link rel=icon href=static/img/logo.svg><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900"><title>成理青年</title><link href=./static/css/app.b5bdf979f934b4471d5400da0bbeb750.css rel=stylesheet></head><body><div class=scroll><div id=app></div></div><script type=text/javascript src=./static/js/manifest.9beacb73ba6d0692f259.js></script><script type=text/javascript src=./static/js/vendor.a6c31f9f03e3d815c061.js></script><script type=text/javascript src=./static/js/app.97f08f6e958cf48b8b5d.js></script></body><style>body,html{
 
       width:100%;
 
       width:100%;
 
       height:100%;
 
       height:100%;
 
       margin: 0px;
 
       margin: 0px;

File diff suppressed because it is too large
+ 0 - 0
dist/static/css/app.08a6e93eeabceb4a35b6f1f88d770a51.css


File diff suppressed because it is too large
+ 0 - 0
dist/static/css/app.08a6e93eeabceb4a35b6f1f88d770a51.css.map


File diff suppressed because it is too large
+ 0 - 0
dist/static/css/app.b5bdf979f934b4471d5400da0bbeb750.css


File diff suppressed because it is too large
+ 0 - 0
dist/static/css/app.b5bdf979f934b4471d5400da0bbeb750.css.map


BIN
dist/static/fonts/element-icons.535877f.woff
View File


BIN
dist/static/fonts/element-icons.732389d.ttf
View File


BIN
dist/static/img/card-background.94471dc.png
View File


BIN
dist/static/img/card-background.png
View File


BIN
dist/static/img/card-img.png
View File


+ 1 - 0
dist/static/img/close.svg
View File 

@@ -0,0 +1 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.41 25.41"><defs><style>.cls-1{fill:none;stroke:#000;stroke-width:2px;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><line class="cls-1" x1="0.71" y1="24.71" x2="24.71" y2="0.71"/><line class="cls-1" x1="24.71" y1="24.71" x2="0.71" y2="0.71"/></g></g></svg>

BIN
dist/static/img/info.png
View File


BIN
dist/static/img/layerselect.png
View File


+ 32 - 0
dist/static/img/logo.svg
View File 

@@ -0,0 +1,32 @@
 
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<g filter="url(#filter0_d)">
 
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65.4576 11.2656C37.0105 11.2656 13.9148 34.3612 13.9148 62.8084C13.9148 69.672 15.2591 76.2235 17.6988 82.2145C29.4901 102.484 10.1875 110.482 10.1875 110.482C10.1875 110.482 26.3908 124.428 45.2585 110.237C51.4625 112.885 58.2901 114.351 65.4576 114.351C93.9048 114.351 117 91.2556 117 62.8084C117 34.3612 93.9048 11.2656 65.4576 11.2656V11.2656ZM65.4576 22.7195C87.5834 22.7195 105.547 40.6826 105.547 62.8084C105.547 84.9342 87.5834 102.897 65.4576 102.897C43.3318 102.897 25.3687 84.9342 25.3687 62.8084C25.3687 40.6826 43.3318 22.7195 65.4576 22.7195V22.7195Z" fill="#FF8C42"/>
 
+</g>
 
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.1408 22.4219C43.6243 22.4219 25.3438 40.7024 25.3438 63.2194C25.3438 85.7359 43.6243 104.016 66.1408 104.016C88.6577 104.016 106.938 85.7359 106.938 63.2194C106.938 40.7024 88.6577 22.4219 66.1408 22.4219ZM66.1408 34.078C82.2242 34.078 95.2821 47.1359 95.2821 63.2194C95.2821 79.3023 82.2242 92.3602 66.1408 92.3602C50.0578 92.3602 36.9999 79.3023 36.9999 63.2194C36.9999 47.1359 50.0578 34.078 66.1408 34.078Z" fill="#D1FEFE"/>
 
+<path fill-rule="evenodd" clip-rule="evenodd" d="M66.1409 34.0781C50.0579 34.0781 37 47.1361 37 63.2195C37 79.3024 50.0579 92.3603 66.1409 92.3603C82.2243 92.3603 95.2822 79.3024 95.2822 63.2195C95.2822 47.1361 82.2243 34.0781 66.1409 34.0781ZM66.1409 45.7348C75.7912 45.7348 83.6256 53.5691 83.6256 63.2195C83.6256 72.8693 75.7912 80.7037 66.1409 80.7037C56.491 80.7037 48.6566 72.8693 48.6566 63.2195C48.6566 53.5691 56.491 45.7348 66.1409 45.7348Z" fill="#71CEC9"/>
 
+<g opacity="0.9" filter="url(#filter1_d)">
 
+<path d="M103.62 43.9441C112.446 43.9441 119.6 36.7897 119.6 27.9642C119.6 19.1388 112.446 11.9844 103.62 11.9844C94.7951 11.9844 87.6406 19.1388 87.6406 27.9642C87.6406 36.7897 94.7951 43.9441 103.62 43.9441Z" fill="#F51A51"/>
 
+</g>
 
+<defs>
 
+<filter id="filter0_d" x="2.1875" y="4.26562" width="122.813" height="121.343" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
 
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 
+<feOffset dy="1"/>
 
+<feGaussianBlur stdDeviation="4"/>
 
+<feComposite in2="hardAlpha" operator="out"/>
 
+<feColorMatrix type="matrix" values="0 0 0 0 0.741176 0 0 0 0 0.74902 0 0 0 0 0.733333 0 0 0 1 0"/>
 
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
 
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
 
+</filter>
 
+<filter id="filter1_d" x="79.6406" y="6.98438" width="47.9597" height="47.9597" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
 
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 
+<feOffset dy="3"/>
 
+<feGaussianBlur stdDeviation="4"/>
 
+<feComposite in2="hardAlpha" operator="out"/>
 
+<feColorMatrix type="matrix" values="0 0 0 0 0.741176 0 0 0 0 0.74902 0 0 0 0 0.733333 0 0 0 0.9 0"/>
 
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
 
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
 
+</filter>
 
+</defs>
 
+</svg>

+ 30 - 0
dist/static/img/more.svg
View File 

@@ -0,0 +1,30 @@
 
+<svg width="131" height="131" viewBox="0 0 131 131" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<g filter="url(#filter0_d)">
 
+<path fill-rule="evenodd" clip-rule="evenodd" d="M122.608 88.8701H89.8524V121.618H122.608V88.8701ZM40.7565 88.8701H8V121.618H40.7565V88.8701ZM40.7565 47.9351H8V80.6829H40.7565V47.9351ZM81.751 47.9351H48.9945V80.6829H81.751V47.9351ZM40.7565 7H8V39.7479H40.7565V7ZM122.608 7H89.8524V39.7479H122.608V7Z" fill="white"/>
 
+</g>
 
+<g filter="url(#filter1_d)">
 
+<path fill-rule="evenodd" clip-rule="evenodd" d="M82.125 23C82.125 31.8366 74.9616 39 66.125 39C57.2884 39 50.125 31.8366 50.125 23C50.125 14.1634 57.2884 7 66.125 7C74.9616 7 82.125 14.1634 82.125 23ZM122.125 64C122.125 72.8366 114.962 80 106.125 80C97.2884 80 90.125 72.8366 90.125 64C90.125 55.1634 97.2884 48 106.125 48C114.962 48 122.125 55.1634 122.125 64ZM65.125 122C73.9616 122 81.125 114.837 81.125 106C81.125 97.1634 73.9616 90 65.125 90C56.2884 90 49.125 97.1634 49.125 106C49.125 114.837 56.2884 122 65.125 122Z" fill="#E13955"/>
 
+</g>
 
+<defs>
 
+<filter id="filter0_d" x="0" y="0" width="130.608" height="130.618" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
 
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 
+<feOffset dy="1"/>
 
+<feGaussianBlur stdDeviation="4"/>
 
+<feComposite in2="hardAlpha" operator="out"/>
 
+<feColorMatrix type="matrix" values="0 0 0 0 0.741176 0 0 0 0 0.74902 0 0 0 0 0.733333 0 0 0 1 0"/>
 
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
 
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
 
+</filter>
 
+<filter id="filter1_d" x="41.125" y="0" width="89" height="131" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
 
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 
+<feOffset dy="1"/>
 
+<feGaussianBlur stdDeviation="4"/>
 
+<feComposite in2="hardAlpha" operator="out"/>
 
+<feColorMatrix type="matrix" values="0 0 0 0 0.741176 0 0 0 0 0.74902 0 0 0 0 0.733333 0 0 0 1 0"/>
 
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
 
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
 
+</filter>
 
+</defs>
 
+</svg>

BIN
dist/static/img/src=http___bpic.588ku.com_original_origin_min_pic_18_04_12_f70d2ded9a68f2cb8552281732529e05.jpg!r650&refer=http___bpic.588ku.jpg
View File


BIN
dist/static/img/如许亭.jpg
View File


BIN
dist/static/img/岭南阁.JPG
View File


BIN
dist/static/img/岭南阁.png
View File


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/0.97a8e4043d185a917e1d.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/0.97a8e4043d185a917e1d.js.map


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/app.16a208ffa86cb8fbee3b.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/app.16a208ffa86cb8fbee3b.js.map


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/app.97f08f6e958cf48b8b5d.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/app.97f08f6e958cf48b8b5d.js.map


+ 3 - 2
dist/static/js/axios-config.js
View File 

@@ -8,8 +8,8 @@
 
 export default {
 
 export default {
 
   install (Vue) {
 
   install (Vue) {
 
     // 请求前缀
 
     // 请求前缀
 
-    // Vue.prototype.$axios.defaults.baseURL = 'http://127.0.0.1:300'
 
-    Vue.prototype.$axios.defaults.baseURL = 'http://42.193.189.65:300'
 
+    Vue.prototype.$axios.defaults.baseURL = 'http://127.0.0.1:300'
 
+    // Vue.prototype.$axios.defaults.baseURL = 'http://42.193.189.65:300'
 
     // 设置超时时间
 
     // 设置超时时间
 
     Vue.prototype.$axios.defaults.timeout = 10000
 
     Vue.prototype.$axios.defaults.timeout = 10000
 
     // 请求封装
 
     // 请求封装
 
@@ -19,6 +19,7 @@ export default {
 
         method: method,
 
         method: method,
 
         headers: header || {
 
         headers: header || {
 
           'Accept': 'application/json'
 
           'Accept': 'application/json'
 
+          // 'Content-Type':'multipart/form-data'
 
         },
 
         },
 
         data: method === 'post' ? JSON.stringify(data) : {},
 
         data: method === 'post' ? JSON.stringify(data) : {},
 
         params: method === 'get' ? data : {}
 
         params: method === 'get' ? data : {}

+ 98 - 0
dist/static/js/clusterDisplay.js
View File 

@@ -0,0 +1,98 @@
 
+// import * as ol from 'ol'
 
+import ol from './ol'
 
+
 
+class createCluster {
 
+    constructor(option, map) {
 
+        this.layer = null
 
+        this.flag = false // 用于判断是否有目标图层
 
+        let layer = map.getLayers()
 
+        this.map = map
 
+
 
+        this.imgUrl = option.imgUrl //图标路径
 
+        this.layerName = option.layerName // 传入聚合的目标图层的名字
 
+        this.distance = option.distance || 10//聚合的距离默认30个像素
 
+
 
+        for (let i = 0; i < layer.array_.length; i++) {
 
+            if(layer.array_[i].className_ === this.layerName){
 
+                this.flag = true
 
+                this.layer = layer.array_[i]
 
+            }
 
+        }
 
+    }
 
+
 
+    openCluster() {
 
+        if (this.flag) {
 
+            let scale = 0.13
 
+            let features = this.layer.getSource().getFeatures()
 
+            var source = new ol.source.Vector({
 
+                features: features
 
+            });
 
+            //聚合标注数据源
 
+            var clusterSource = new ol.source.Cluster({
 
+                distance: this.distance,               //聚合的距离参数，即当标注间距离小于此值时进行聚合，单位是像素
 
+                source: source              //聚合的数据源，即矢量要素数据源对象
 
+            });
 
+            //加载聚合标注的矢量图层
 
+            let style = new ol.style.Style({
 
+                image: new ol.style.Icon({
 
+                    src: this.imgUrl,
 
+                    anchor: [0.5, 0.5],
 
+                    scale: scale,
 
+
 
+                })
 
+            })
 
+            this.layer.setSource(clusterSource)
 
+            this.layer.setStyle(style)
 
+        }
 
+    }
 
+
 
+}
 
+
 
+
 
+function openNoticeLayerCluster(noticeImgUrl,map) {
 
+    let cluster = new createCluster({
 
+        'layerName' : 'noticeLayer',
 
+        'imgUrl' : noticeImgUrl
 
+    },map)
 
+    cluster.openCluster()
 
+}
 
+
 
+function openReportLayerCluster(reportImgUrl,map) {
 
+    let cluster = new createCluster({
 
+        'layerName' : 'reportLayer',
 
+        'imgUrl' : reportImgUrl
 
+    },map)
 
+    cluster.openCluster()
 
+
 
+}
 
+
 
+function openCultureLayerCluster(cultureImgUrl,map) {
 
+    let cluster = new createCluster({
 
+        'layerName' : 'cultureLayer',
 
+        'imgUrl' : cultureImgUrl
 
+    },map)
 
+    cluster.openCluster()
 
+
 
+}
 
+
 
+function openOtherLayerCluster(otherImgUrl,map) {
 
+    let cluster = new createCluster({
 
+        'layerName' : 'otherLayer',
 
+        'imgUrl' : otherImgUrl
 
+    },map)
 
+    cluster.openCluster()
 
+
 
+}
 
+
 
+export default {openNoticeLayerCluster,openReportLayerCluster,openCultureLayerCluster,openOtherLayerCluster}
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+

+ 137 - 0
dist/static/js/drawFeature.js
View File 

@@ -0,0 +1,137 @@
 
+// import  ol from "ol";
 
+import ol from '../js/ol'
 
+
 
+
 
+class createDrawFeature {
 
+    constructor(options, map) {
 
+        this.type = options.type || "LineString" // 类型有"Point","Polygon"
 
+        this.name = options.name || undefined
 
+        this.pointRadius = options.pointRadius || 6
 
+        this.pointColor = options.pointColor || 'red'
 
+        this.lineWidth = options.lineWidth || 6
 
+        this.lineColor = options.lineColor || 'pink'
 
+        this.polWidth = options.polWidth || 6
 
+        this.polStrColor = options.polStrColor || 'yellow'
 
+        this.polColor = options.polColor || '#490b0b'
 
+        this.isHand = options.isHand || false //是否手绘
 
+        this.isMeasure = options.isMeasure || false // 默认不开启
 
+        this.alpha = options.alpha || 0.5
 
+
 
+        this.map = map
 
+        this.style = null
 
+        this.source = new ol.source.Vector({wrapX: false,zIndex:999});
 
+        this.data = []
 
+        this.labelArr = [] // 存放label
 
+        this.draw = null
 
+        this.length = 0
 
+        this.event = undefined
 
+        this.vectorLayer = new ol.layer.Vector({
 
+            source: this.source,
 
+            zIndex:999
 
+
 
+        });
 
+        this.map.addLayer(this.vectorLayer)
 
+    }
 
+
 
+    // 开启画图功能
 
+    addInteraction() {
 
+
 
+        this.draw = new ol.interaction.Draw({
 
+            source: this.source,
 
+            type: this.type,
 
+            style: this.setShapeStyle(this.type),
 
+            stopClick: !this.isMeasure,
 
+            freehand: this.isHand
 
+        });
 
+        let that = this;
 
+
 
+        this.draw.on('drawend', function (evt) {
 
+            that.positions = []
 
+            const geom = evt.feature.getGeometry();
 
+            evt.feature.setStyle(that.setShapeStyle(that.type))
 
+            geom.setProperties({type: that.type, name: that.name})
 
+            let points = geom.getCoordinates();
 
+                that.data.push({
 
+                    name: that.name,
 
+                    coordinates: points,
 
+                    type: geom.getType(),
 
+                    style: that.style[that.type],
 
+                })
 
+
 
+                that.draw.finishDrawing()
 
+        }, this);
 
+        this.map.addInteraction(this.draw);
 
+
 
+    }
 
+
 
+    setShapeStyle(type) {
 
+        let rgb = this.convertHexToRGB(this.polColor)
 
+        this.style = {
 
+            'Point': new ol.style.Style({
 
+                image: new ol.style.Circle({
 
+                    radius: this.pointRadius,
 
+                    fill: new ol.style.Fill({color: this.pointColor}),
 
+                }),
 
+            }),
 
+            'LineString': new ol.style.Style({
 
+                stroke: new ol.style.Stroke({
 
+                    width: this.lineWidth,
 
+                    color: this.lineColor,
 
+                }),
 
+            }),
 
+            'Polygon': new ol.style.Style({
 
+                stroke: new ol.style.Stroke({
 
+                    width: this.polWidth,
 
+                    color: this.polStrColor,
 
+                }),
 
+                fill: new ol.style.Fill({color: "rgba("+rgb[0]+","+rgb[1]+","+rgb[2]+","+this.alpha+")"}),
 
+            })
 
+        }
 
+        return this.style[type]
 
+    }
 
+
 
+    convertHexToRGB(str){
 
+        str = str[0] === '#' ? str.slice(1) : str
 
+        str = str.length === 3 ? str.repeat(2) : str
 
+        if ((str.length !== 6) || !(/^[0-9a-fA-F]{3,6}$/i.test(str))) return 'Invalid data'
 
+        return [parseInt(str[0] + str[1], 16), parseInt(str[2] + str[3], 16), parseInt(str[4] + str[5], 16)]
 
+    }
 
+
 
+    // 关闭画图功能
 
+    closeInteraction() {
 
+        this.map.removeInteraction(this.draw);
 
+        ol.observable.unByKey(this.event)
 
+        this.isHand = false
 
+        this.isMeasure = false
 
+    }
 
+
 
+    // 将画图数据返回给用户
 
+    getData() {
 
+        return this.data
 
+    }
 
+
 
+    //清空图层
 
+    clearShapes() {
 
+        //this.source.clear()
 
+        this.vectorLayer.getSource().clear();
 
+        // this.source = [];
 
+        // this.source.clear()
 
+        // this.map.removeLayer(this.vectorLayer)
 
+        // 清除存放overlay的数组
 
+        for (let i = 0; i < this.labelArr.length; i++) {
 
+            this.map.removeOverlay(this.labelArr[i])
 
+        }
 
+
 
+    }
 
+
 
+    deleteLastShapes() {
 
+        let features = this.source.getFeatures()
 
+        if (features.length !== 0) {
 
+            let id = features.length - 1
 
+            this.source.removeFeature(features[id])
 
+        }
 
+    }
 
+
 
+}
 
+
 
+export {createDrawFeature};

+ 0 - 2
dist/static/js/manifest.3ad1d5771e9b13dbdad2.js
View File 

@@ -1,2 +0,0 @@
 
-!function(r){var n=window.webpackJsonp;window.webpackJsonp=function(e,u,c){for(var f,i,p,a=0,l=[];a<e.length;a++)i=e[a],o[i]&&l.push(o[i][0]),o[i]=0;for(f in u)Object.prototype.hasOwnProperty.call(u,f)&&(r[f]=u[f]);for(n&&n(e,u,c);l.length;)l.shift()();if(c)for(a=0;a<c.length;a++)p=t(t.s=c[a]);return p};var e={},o={2:0};function t(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return r[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=r,t.c=e,t.d=function(r,n,e){t.o(r,n)||Object.defineProperty(r,n,{configurable:!1,enumerable:!0,get:e})},t.n=function(r){var n=r&&r.__esModule?function(){return r.default}:function(){return r};return t.d(n,"a",n),n},t.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},t.p="./",t.oe=function(r){throw console.error(r),r}}([]);
 
-//# sourceMappingURL=manifest.3ad1d5771e9b13dbdad2.js.map

File diff suppressed because it is too large
+ 0 - 0
dist/static/js/manifest.3ad1d5771e9b13dbdad2.js.map


+ 2 - 0
dist/static/js/manifest.9beacb73ba6d0692f259.js
View File 

@@ -0,0 +1,2 @@
 
+!function(e){var n=window.webpackJsonp;window.webpackJsonp=function(r,a,c){for(var i,u,f,s=0,l=[];s<r.length;s++)u=r[s],t[u]&&l.push(t[u][0]),t[u]=0;for(i in a)Object.prototype.hasOwnProperty.call(a,i)&&(e[i]=a[i]);for(n&&n(r,a,c);l.length;)l.shift()();if(c)for(s=0;s<c.length;s++)f=o(o.s=c[s]);return f};var r={},t={3:0};function o(n){if(r[n])return r[n].exports;var t=r[n]={i:n,l:!1,exports:{}};return e[n].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var n=t[e];if(0===n)return new Promise(function(e){e()});if(n)return n[2];var r=new Promise(function(r,o){n=t[e]=[r,o]});n[2]=r;var a=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,o.nc&&c.setAttribute("nonce",o.nc),c.src=o.p+"static/js/"+e+"."+{0:"97a8e4043d185a917e1d"}[e]+".js";var i=setTimeout(u,12e4);function u(){c.onerror=c.onload=null,clearTimeout(i);var n=t[e];0!==n&&(n&&n[1](new Error("Loading chunk "+e+" failed.")),t[e]=void 0)}return c.onerror=c.onload=u,a.appendChild(c),r},o.m=e,o.c=r,o.d=function(e,n,r){o.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},o.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(n,"a",n),n},o.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},o.p="./",o.oe=function(e){throw console.error(e),e}}([]);
 
+//# sourceMappingURL=manifest.9beacb73ba6d0692f259.js.map

File diff suppressed because it is too large
+ 0 - 0
dist/static/js/manifest.9beacb73ba6d0692f259.js.map


+ 88 - 0
dist/static/js/ol.js
View File 

@@ -0,0 +1,88 @@
 
+/*
 
+ * @Description: ol
 
+ * @Author: Napier
 
+ * @LastEditors: Napier
 
+ * @LastEditTime: 2021-09-06 12:20:24
 
+ */
 
+
 
+import View from 'ol/View'
 
+import Map from 'ol/Map'
 
+import Feature from 'ol/Feature'
 
+import Overlay from 'ol/Overlay'
 
+import Tile from 'ol/layer/Tile'
 
+import Image from 'ol/layer/Image'
 
+import Vector from 'ol/layer/Vector'
 
+import XYZ from 'ol/source/XYZ'
 
+import WMTS from 'ol/source/WMTS'
 
+import VectorSource from 'ol/source/Vector'
 
+import WFS from 'ol/format/WFS'
 
+import GeoJSON from 'ol/format/GeoJSON'
 
+import OSM from 'ol/source/OSM.js'
 
+import TileWMS from 'ol/source/TileWMS.js'
 
+import ImageWMS from 'ol/source/ImageWMS.js'
 
+import Point from 'ol/geom/Point'
 
+import Style from 'ol/style/Style'
 
+import Stroke from 'ol/style/Stroke'
 
+import Fill from 'ol/style/Fill'
 
+import {transform, fromLonLat, toLonLat} from 'ol/proj'
 
+import ImageStyle from 'ol/style/Image'
 
+import Icon from 'ol/style/Icon'
 
+import Draw from 'ol/interaction/Draw'
 
+import Circle from 'ol/style/Circle'
 
+import ZoomToExtent from 'ol/control/ZoomToExtent'
 
+import { buffer } from 'ol/extent'
 
+import {unByKey} from 'ol/Observable'
 
+
 
+let ol = {
 
+  View: View,
 
+  Map: Map,
 
+  Feature: Feature,
 
+  Overlay: Overlay,
 
+  observable: {
 
+    unByKey: unByKey
 
+  },
 
+  geom: {
 
+    Point: Point
 
+  },
 
+  layer: {
 
+    Tile: Tile,
 
+    Image: Image,
 
+    Vector: Vector,
 
+  },
 
+  control: {
 
+    ZoomToExtent: ZoomToExtent
 
+  },
 
+  source: {
 
+    Vector: VectorSource,
 
+    WMTS: WMTS,
 
+    OSM: OSM,
 
+    TileWMS: TileWMS,
 
+    ImageWMS: ImageWMS,
 
+    XYZ: XYZ,
 
+  },
 
+  format: {
 
+    WFS: WFS,
 
+    GeoJSON: GeoJSON,
 
+  },
 
+  style: {
 
+    Style: Style,
 
+    Stroke: Stroke,
 
+    Fill: Fill,
 
+    Image: ImageStyle,
 
+    Icon: Icon,
 
+    Circle: Circle,
 
+  },
 
+  interaction: {
 
+    Draw: Draw
 
+  },
 
+  proj: {
 
+    transform: transform,
 
+    fromLonLat: fromLonLat,
 
+    toLonLat: toLonLat,
 
+  },
 
+  extent: {
 
+    buffer: buffer
 
+  }
 
+}
 
+
 
+export default ol

+ 19 - 0
dist/static/js/slogan.js
View File 

@@ -0,0 +1,19 @@
 
+<div class="slogan-div"><p class="slogan">{{ slogon }}</p></div>
 
+<style scoped>
 
+.slogan-div {
 
+  height: 224px;
 
+  width:145px;
 
+  writing-mode: vertical-lr; /*设置文字纵向*/
 
+
 
+  box-sizing:border-box; /*固定div大小*/
 
+
 
+  background-color: #87BF96;
 
+  line-height: 45px;
 
+  font-size:24px;
 
+  font-family: "Source Han Sans CN";
 
+}
 
+.slogan{
 
+  margin-top: 30px;
 
+  color: #475837;
 
+}
 
+</style>

+ 45 - 0
dist/static/js/startDrawShape.js
View File 

@@ -0,0 +1,45 @@
 
+import {createDrawFeature} from "./drawFeature"
 
+
 
+ let drawShapeMap = new Map();
 
+
 
+function drawPoint(color,map){
 
+    let option = {
 
+        type:'Point',
 
+        pointColor:color
 
+    }
 
+
 
+    let shape = new createDrawFeature(option,map)
 
+    drawShapeMap.set('drawShape', shape)
 
+
 
+    shape.addInteraction()
 
+
 
+}
 
+
 
+function drawLine(color,map){
 
+    let option = {
 
+        type:'LineString',
 
+        lineColor:color
 
+    }
 
+    // if (!drawShapeMap.get('drawShape')) {
 
+    //     let shape = new createDrawFeature(option,map)
 
+    //     drawShapeMap.set('drawShape', shape)
 
+
 
+    //     shape.addInteraction()
 
+    // }
 
+    let shape = new createDrawFeature(option,map)
 
+    drawShapeMap.set('drawShape', shape)
 
+
 
+    shape.addInteraction()
 
+}
 
+
 
+function closeDrawShape() {
 
+    if (drawShapeMap.get('drawShape')) {
 
+        let shape = drawShapeMap.get('drawShape')
 
+        shape.closeInteraction()
 
+        shape.clearShapes()
 
+        return shape.getData()
 
+    }
 
+
 
+}
 
+
 
+export default{drawPoint,drawLine,closeDrawShape}

File diff suppressed because it is too large
+ 0 - 0
dist/static/js/vendor.7f4345dec93c3f4d6320.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/vendor.7f4345dec93c3f4d6320.js.map


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/vendor.a6c31f9f03e3d815c061.js


File diff suppressed because it is too large
+ 0 - 0
dist/static/js/vendor.a6c31f9f03e3d815c061.js.map


+ 1 - 7
src/components/map.vue
View File 

@@ -911,22 +911,16 @@ export default {
 
      */
 
      */
 
     sloganListener: function () {
 
     sloganListener: function () {
 
       var that = this
 
       var that = this
 
-
 
       // 获取放置地图的div
 
       // 获取放置地图的div
 
       var mapDiv = document.getElementById('mapview')
 
       var mapDiv = document.getElementById('mapview')
 
-
 
-      // let slogan = document.getElementsByClassName('slogan-div')
 
-
 
       // 当鼠标滚轮事件发生时，执行一些操作
 
       // 当鼠标滚轮事件发生时，执行一些操作
 
       function onMouseWheel (ev) {
 
       function onMouseWheel (ev) {
 
         window.setTimeout(function () {
 
         window.setTimeout(function () {
 
           let zoom = map.getView().getZoom()
 
           let zoom = map.getView().getZoom()
 
           console.log('zoom:' + zoom)
 
           console.log('zoom:' + zoom)
 
           if (zoom > 15.3) {
 
           if (zoom > 15.3) {
 
-            // slogan[0].style.display = 'none'
 
             that.slogan.isShow = false
 
             that.slogan.isShow = false
 
           } else {
 
           } else {
 
-            // slogan[0].style.display = 'inline'
 
             that.slogan.isShow = true
 
             that.slogan.isShow = true
 
           }
 
           }
 
           // FF 和 Chrome
 
           // FF 和 Chrome
 
@@ -938,7 +932,7 @@ export default {
 
       }
 
       }
 
       addEvent(mapDiv, 'mousewheel', onMouseWheel)
 
       addEvent(mapDiv, 'mousewheel', onMouseWheel)
 
       addEvent(mapDiv, 'DOMMouseScroll', onMouseWheel)
 
       addEvent(mapDiv, 'DOMMouseScroll', onMouseWheel)
 
-
 
+      addEvent(mapDiv, 'touchmove', onMouseWheel)
 
       function addEvent (obj, xEvent, fn) {
 
       function addEvent (obj, xEvent, fn) {
 
         if (obj.attachEvent) {
 
         if (obj.attachEvent) {
 
           obj.attachEvent('on' + xEvent, fn)
 
           obj.attachEvent('on' + xEvent, fn)

Some files were not shown because too many files changed in this diff