20191218

+<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 WKT from "ol/format/WKT";
+import { Select, 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
+            })
+        });
+
+        ////select
+        var select = new Select();
+        this.map.addInteraction(select);
+        ////draw
+        var draw = new Draw({
+            source: source,
+            stopClick: true,
+            freehand: false,
+            type: "LineString"
+        });
+        this.map.addInteraction(draw);
+        draw.setActive(true);
+        draw.on("drawend", function(e) {
+            draw.setActive(false);
+            var feature = e.feature;
+            var wktformat = new WKT();
+            console.log("Draw: " + wktformat.writeGeometry(feature.getGeometry()));
+        });
+        ////modify
+        var modify = new Modify({
+            features: select.getFeatures()
+        });
+        this.map.addInteraction(modify);
+        modify.on("modifyend", function(e) {
+            var features = e.features.array_;
+            var wktformat = new WKT();
+            console.log("Modify: " + wktformat.writeGeometry(features[0].getGeometry()));
+        });
+    }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+#map {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: white;
+}
+</style>

@@ -61,7 +61,8 @@
             <span slot="title"><a-icon type="up-square" /><span>OpenLayers</span></span>
             <span slot="title"><a-icon type="up-square" /><span>OpenLayers</span></span>
             <a-menu-item key="7_1"><router-link :to="'/map_ol'">OL点与改变视图</router-link></a-menu-item>
             <a-menu-item key="7_1"><router-link :to="'/map_ol'">OL点与改变视图</router-link></a-menu-item>
             <a-menu-item key="7_2"><router-link :to="'/map_ol2'">OL面绘制与修改</router-link></a-menu-item>
             <a-menu-item key="7_2"><router-link :to="'/map_ol2'">OL面绘制与修改</router-link></a-menu-item>
-            <a-menu-item key="7_3"><router-link :to="'/map_ol_measure'">OL量测(未实现)</router-link></a-menu-item>
+            <a-menu-item key="7_3"><router-link :to="'/map_ol3'">OL线绘制与修改</router-link></a-menu-item>
+            <a-menu-item key="7_4"><router-link :to="'/map_ol_measure'">OL量测(未实现)</router-link></a-menu-item>
         </a-sub-menu>
         </a-sub-menu>
     </a-menu>
     </a-menu>
 </template>
 </template>

 /*
 /*
  * @Author: jiangbotao
  * @Author: jiangbotao
  * @Date: 2019-12-12 17:40:15
  * @Date: 2019-12-12 17:40:15
- * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-18 00:31:32
+ * @LastEditors  : jiangbotao
+ * @LastEditTime : 2019-12-18 20:05:46
  * @FilePath: \supermapvue\src\router\index.js
  * @FilePath: \supermapvue\src\router\index.js
  */
  */
 /*
 /*
@@ -170,6 +170,11 @@ export default new Router({
       component: () => import('@/components/ol/OL2')
       component: () => import('@/components/ol/OL2')
     },
     },
     {
     {
+      path: '/map_ol3',
+      name: 'Map_OL3',
+      component: () => import('@/components/ol/OL3')
+    },
+    {
       path: '/map_ol_measure',
       path: '/map_ol_measure',
       name: 'Map_OL_measure',
       name: 'Map_OL_measure',
       component: () => import('@/components/ol/OL_measure')
       component: () => import('@/components/ol/OL_measure')