openlayers 点线面

vue页面 Demo2

<template>
        <div id="map" class="map">
            <form class="form-inline">
            <label for="type">Geometry type &nbsp;</label>
            <select id="type">
                <option value="Point">Point</option>
                <option value="LineString">LineString</option>
                <option value="Polygon">Polygon</option>
                <option value="Circle">Circle</option>
            </select>
    </form>
        </div>
</template>
<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import {Draw, Modify, Snap} from 'ol/interaction';
import {OSM, Vector as VectorSource} from 'ol/source';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
export default {
    mounted() {
        var raster = new TileLayer({
        source: new OSM(),
        });

        var source = new VectorSource();
        var vector = new VectorLayer({
        source: source,
        style: new Style({
            fill: new Fill({
            color: 'rgba(255, 255, 255, 0.2)',
            }),
            stroke: new Stroke({
            color: '#ffcc33',
            width: 2,
            }),
            image: new CircleStyle({
            radius: 7,
            fill: new Fill({
                color: '#ffcc33',
            }),
            }),
        }),
        });
        //底图
        var map = new Map({
        layers: [raster, vector],
        target: 'map',
        view: new View({
            // projection: "EPSG:4326" ,    //使用这个坐标系
            center: [116.401969,39.91737],
            zoom: 8,
            extent: [87251.34, 821101.96, 916327.09, 6636950.72],
        }),
        });

        var modify = new Modify({source: source});
        map.addInteraction(modify);

        var draw, snap; // global so we can remove them later
        var typeSelect = document.getElementById('type');

        function addInteractions() {
        draw = new Draw({
            source: source,
            type: typeSelect.value,
        });
        map.addInteraction(draw);
        snap = new Snap({source: source});
        map.addInteraction(snap);
        }

        /**
         * Handle change event.
         */
        typeSelect.onchange = function () {
        map.removeInteraction(draw);
        map.removeInteraction(snap);
        addInteractions();
        };

        addInteractions();
            },
            setup() {
                
            },
        }
</script>
 <style>
      .map {
        width: 100vw;
        height:100vh;
       
      }
    </style>

路由 index

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Demo1 from '@/Demo1/index'
import Demo2 from '@/Demo2/index'  //跳转页面
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
     component: HelloWorld
    },
    {
        path: '/demo1',
        name: 'demo1',
        component: Demo1   //页面输入这个地址
    },
    {
        path: '/demo2',
        name: 'demo2',
        component: Demo2   //页面输入这个地址
    },
    // {
    //     path: '/demo5',
    //     name: 'demo5',
    //     component: Demo5
    // }
  ]
})