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 latervar 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// }]
})

openlayers 点线面相关推荐

openlayers绘制自定义点线面样式,带清除功能Vue版
openlayers绘制自定义点线面样式,带清除功能初学openlayers 有不足之处还望轻喷,多谢项目用的是vue,elementUI,以及scss 啊-本来点线面都录制了一个gif图,因为某 ...
OpenLayers学习笔记高级篇（一、openlayers画点线面）
话不多说直接上代码: <!doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <me ...
openlayers入门添加百度地图绘制点线面
1.构建一个地图容器 <div id="map" class="map"></div> 2.创建一个地图 2.1初始化一个openlay ...
Openlayers 添加 WKT WKB GeoJson 格式点线面数据
Openlayers 添加 WKT WKB GeoJson 格式点线面数据 OpenLayers 教程 Openlayers 添加 WKT WKB GeoJson 格式点线面数据在线示例 OpenL ...
OpenLayers 在Vue中画点线面
VUE代码如下 <template><div id="map" ref="rootmap"><div style="po ...
OpenLayers实现交互绘制点线面
实现OpenLayers交互绘制这快内容是临时添加进来的,算是提前写完这篇博文,可能存在问题,请大家批评指正,谢谢! 这一部分主要是讲解利用按钮在OpenLayers上进行交互绘制的一个实现过程,代 ...
html点线面制作,openlayers 添加点线面 Demo（可直接运行）
Document 几何图形类型: 无点线多边形圆正方形 var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ ...
开源GIS（九）——openlayers中简单要素的添加与geojson数据修改添加
目录一.引言二.简单要素点线面的添加 1.创建feature 2.创建style,添加source.style到layer 3.添加layer到map 三.WFS获取geojson数据并修改四. ...
Openlayers 图形要素 Feature 移动和编辑
Openlayers 图形要素 Feature 移动和编辑 OpenLayers 教程 Openlayers 图形要素 Feature 移动和编辑在线示例 OpenLayers 教程 Openlay ...

openlayers 点线面

vue页面 Demo2

路由 index

openlayers 点线面相关推荐

最新文章

热门文章