20191217

unknown
Showing 6 changed files with 168 additions and 5 deletions
package-lock.json
package.json
src/components/menu/MyMenu.vue
src/components/ol/OL.vue
src/main.js
src/router/index.js
--- a/package-lock.json
View file @a544a11
+++ b/package-lock.json
View file @a544a11
@@ -211,6 +211,11 @@
      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
    },
+    "@openlayers/pepjs": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@openlayers/pepjs/-/pepjs-0.5.3.tgz",
+      "integrity": "sha512-Bgvi5c14BS0FJWyYWWFstNEnXsB30nK8Jt8hkAAdqr7E0gDdBBWVDglF3Ub19wTxvgJ/CVHyTY6VuCtnyRzglg=="
+    },
    "@supermap/iclient-common": {
      "version": "10.0.0",
      "resolved": "https://registry.npmjs.org/@supermap/iclient-common/-/iclient-common-10.0.0.tgz",
@@ -6304,8 +6309,7 @@
    },
    "js-yaml": {
      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz",
+      "resolved": "",
-      "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
      "dev": true,
      "requires": {
        "argparse": "^1.0.7",
@@ -7422,6 +7426,17 @@
      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
      "dev": true
    },
+    "ol": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-6.1.1.tgz",
+      "integrity": "sha512-0dL3i3eJqgOpqIjDKEY3grkeQnjAYfV5L/JCxhOu4SxiaizRwFrFgeas6LILRoxKa03jhQFbut2r2bbgcLGQeA==",
+      "requires": {
+        "@openlayers/pepjs": "^0.5.3",
+        "pbf": "3.2.1",
+        "pixelworks": "1.1.0",
+        "rbush": "^3.0.1"
+      }
+    },
    "omit.js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/omit.js/-/omit.js-1.0.2.tgz",
@@ -7793,6 +7808,11 @@
        "pinkie": "^2.0.0"
      }
    },
+    "pixelworks": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pixelworks/-/pixelworks-1.1.0.tgz",
+      "integrity": "sha1-Hwla1I3Ki/ihyCWOAJIDGkTyLKU="
+    },
    "pkg-dir": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
@@ -10366,6 +10386,14 @@
        "unpipe": "1.0.0"
      }
    },
+    "rbush": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+      "requires": {
+        "quickselect": "^2.0.0"
+      }
+    },
    "read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
--- a/package.json
View file @a544a11
+++ b/package.json
View file @a544a11
@@ -18,6 +18,7 @@
    "jquery": "^3.4.1",
    "mapbox-gl": "^1.6.0",
    "mapbox-gl-compare": "^0.3.0",
+    "ol": "^6.1.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
--- a/src/components/menu/MyMenu.vue
View file @a544a11
+++ b/src/components/menu/MyMenu.vue
View file @a544a11
@@ -2,7 +2,7 @@
 * @Author: jiangbotao
 * @Date: 2019-12-13 23:53:57
 * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-16 12:57:27
+ * @LastEditTime: 2019-12-17 19:54:02
 * @FilePath: \supermapvue\src\components\menu\MyMenu.vue
 -->
 <template>
@@ -47,6 +47,10 @@
            <a-menu-item key="5_3"><router-link :to="'/theme_range'">分段渲染</router-link></a-menu-item>
            <a-menu-item key="5_4"><router-link :to="'/theme_label'">注记图</router-link></a-menu-item>
        </a-sub-menu>
+        <a-sub-menu key="sub6">
+            <span slot="title"><a-icon type="up-square" /><span>OpenLayers</span></span>
+            <a-menu-item key="6_1"><router-link :to="'/map_ol'">OL</router-link></a-menu-item>
+        </a-sub-menu>
    </a-menu>
 </template>
 <style scoped>
--- a/src/components/ol/OL.vue 0 → 100644
View file @a544a11
+++ b/src/components/ol/OL.vue 0 → 100644
View file @a544a11
+<!--
+ * @Author: jiangbotao
+ * @Date: 2019-12-17 19:48:20
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-17 20:36:29
+ * @FilePath: \supermapvue\src\components\ol\OL.vue
+ -->
+<template>
+  <div >
+    <div id="map"></div>
+  </div>
+</template>
+<script>
+import "ol/ol.css";
+import { Map, View } from "ol";
+import { XYZ } from 'ol/source';
+import VectorSource from "ol/source/Vector";
+import Point from "ol/geom/Point";
+import {Draw, Modify, Snap} from 'ol/interaction';
+import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
+import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
+export default {
+  data() {
+    return {
+      map: null
+    };
+  },
+  mounted() {
+    var tdt_vec = new TileLayer({
+      source: new XYZ({
+        url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
+      })
+    });
+    var tdt_cva = new TileLayer({
+      source: new XYZ({
+        url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
+      })
+    });
+    // 矢量绘制图层
+    var source = new VectorSource();
+    var vectorLayer = new VectorLayer({
+        source: source,
+        style: new Style({
+            fill: new Fill({
+                color: 'rgba(255, 0, 0, 0.2)'
+            }),
+            stroke: new Stroke({
+                color: '#ffcc33',
+                width: 2
+            }),
+            image: new CircleStyle({
+                radius: 7,
+                fill: new Fill({
+                    color: '#ffcc33'
+                })
+            })
+        })
+    });
+    this.map = new Map({
+        target: "map",
+        layers: [
+            tdt_vec, tdt_cva, vectorLayer
+        ],
+        view: new View({
+            projection: "EPSG:4326",
+            center: [120.79, 27.99],
+            zoom: 12,
+            minZoom: 10,
+            maxZoom: 18
+        })
+    });
+    var modify = new Modify({source: source});
+    this.map.addInteraction(modify);
+    modify.on('modifyend',function(e){
+        var features = e.features.getArray();
+        console.log(features);
+    });
+    var draw, snap; // global so we can remove them later
+    function addInteractions(map) {
+        draw = new Draw({
+            source: source,
+            type: 'Point'
+        });
+        draw.on('drawstart', function (e) {
+            source.clear();  // implicit remove of last feature.
+        });
+        draw.on('drawend', function(evt){
+            var feature = evt.feature;
+            var p = feature.getGeometry();
+            console.log(p.getCoordinates());
+            var coord = p.getCoordinates();
+            map.getView().animate({center: [coord[0], coord[1]]});
+        });
+        map.addInteraction(draw);
+        snap = new Snap({source: source});
+        map.addInteraction(snap);
+    }
+    /**
+     * Handle change event.
+     */
+    // typeSelect.onchange = function(map) {
+    //     map.removeInteraction(draw);
+    //     map.removeInteraction(snap);
+    //     addInteractions();
+    // };
+    addInteractions(this.map);
+  }
+};
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+#map {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: white
+}
+</style>
--- a/src/main.js
View file @a544a11
+++ b/src/main.js
View file @a544a11
@@ -2,7 +2,7 @@
 * @Author: jiangbotao
 * @Date: 2019-12-12 17:40:15
 * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-17 00:26:31
+ * @LastEditTime: 2019-12-17 20:35:13
 * @FilePath: \supermapvue\src\main.js
 */
 import Vue from 'vue'
--- a/src/router/index.js
View file @a544a11
+++ b/src/router/index.js
View file @a544a11
@@ -2,7 +2,7 @@
 * @Author: jiangbotao
 * @Date: 2019-12-12 17:40:15
 * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-15 18:08:19
+ * @LastEditTime: 2019-12-17 20:37:03
 * @FilePath: \supermapvue\src\router\index.js
 */
 import Vue from 'vue'
@@ -116,6 +116,11 @@ export default new Router({
      path: '/mvt_wzdemo',
      name: 'Theme_wzdemo',
      component: () => import('@/components/vt/Map_wzdemo')
+    },
+    {
+      path: '/map_ol',
+      name: 'Map_OL',
+      component: () => import('@/components/ol/OL')
    }
  ]
 })