vue页面 Demo2
<template>
<div id="map" class="map">
<form class="form-inline">
<label for="type">Geometry type </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
// }
]
})