gis中点线面的绘制是常用功能。一般在交通项目中会用来绘制限行区,公安项目会用来绘制辖区,以及在资源搜索时,会用到点选、圈选、多边形选等。
1、HTML——用到了iview框架的下拉框组件
<template>
<div class="box">
<div class="operation">
<Dropdown style="margin-left: 15px" trigger="click" @on-click="typeSelectChange">
<span>
绘制
<Icon type="ios-arrow-down"></Icon>
</span>
<DropdownMenu slot="list">
<DropdownItem name="Point">点</DropdownItem>
<DropdownItem name="LineString">线</DropdownItem>
<DropdownItem name="Box">矩形</DropdownItem>
<DropdownItem name="Polygon">多边形</DropdownItem>
<DropdownItem name="Circle">圆</DropdownItem>
<DropdownItem name="clear">清除</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div class="info" ref="infoEl">
</div>
<div id="map"></div>
</div>
</template>
2、JavaScript——底图用的是arcgis蓝色地图;并将绘制的坐标显示在页面;采取的是不连续绘制。
<script>
/* eslint-disable */
import {Map, View} from 'ol';
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import TileGrid from 'ol/tilegrid/TileGrid';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {Icon, Style,Stroke,Fill,Circle} from 'ol/style';
import Draw from "ol/interaction/Draw";
import {createBox} from "ol/interaction/Draw";
import {fromLonLat} from 'ol/proj';
export default {
name: "home",
components:{
},
data(){
return {
}
},
mounted(){
let center = [108.946994, 34.261361];
// arcgiS图层
let arcgisLayer = new Tile({
source: new XYZ({
url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
}),
});
// 矢量图层
this.vectorLayer = new VectorLayer({
source: new VectorSource(),
style: new Style({
stroke: new Stroke({
width: 2,
color: [242,114,60, 1],
lineDash:[1,2,3,4,5,6],
}),
fill: new Fill({
color: [242,114,60, 0.2],
}),
image: new Circle({
// 点的颜色
fill: new Fill({
color: [242,114,60, .5]
}),
stroke: new Stroke({
color: [242,114,60, 1]
}),
// 圆形半径
radius: 5
}),
})
})
this.map = new Map({
target: "map",
layers: [arcgisLayer,this.vectorLayer],
view: new View({
center: center,
zoom: 12,
projection: "EPSG:4326",
}),
});
},
methods:{
typeSelectChange(value) {
this.map.removeInteraction(this.draw);
if (value === 'clear') {
this.vectorLayer.getSource().clear();
this.$refs.infoEl.innerHTML = "";
}else{
if(value === "Box"){
this.draw = new Draw({
source: this.vectorLayer.getSource(),
geometryFunction: createBox(),
type: "LineString",
stopClick: true, //绘制时禁用点击事件
style:this.getDrawingStyle(),
})
}else{
this.draw = new Draw({
source: this.vectorLayer.getSource(),
type: value,
stopClick: true, //绘制时禁用点击事件
style:this.getDrawingStyle(),
})
}
this.draw.on("drawend",(e)=>{
console.log(window.e=e,window.d=this.draw);
if(this.draw.type_ === "Circle"){
let circleCenter = e.feature.getGeometry().getCenter();
let circleRadius = e.feature.getGeometry().getRadius();
circleRadius = fromLonLat([circleRadius,circleRadius],"EPSG:3857")[0];
this.$refs.infoEl.innerHTML = "圆心:" + circleCenter+"<br/>半径:"+circleRadius;
}else{
let coordinates = e.feature.getGeometry().getCoordinates();
this.$refs.infoEl.innerHTML = "坐标:"+coordinates;
}
this.map.removeInteraction(this.draw);
});
this.map.addInteraction(this.draw);
}
},
getDrawingStyle(){
return new Style({
stroke: new Stroke({
width: 2,
color: [239,176,19, 1],
lineDash:[1,2,3,4,5,6],
}),
fill: new Fill({
color: [239,176,19, 0.2],
}),
image: new Circle({
// 点的颜色
fill: new Fill({
color: [239,176,19, .5]
}),
stroke: new Stroke({
color: [239,176,19, 1]
}),
// 圆形半径
radius: 5
}),
})
},
},
};
</script>
3、css
<style scoped lang="less">
.box {
width: 100%;
height: 100%;
position: relative;
.operation{
position: absolute;
z-index: 1;
top: 10px;
left: 10px;
display: flex;
background: #fff;
color: #000;
border-radius: 2px;
box-shadow: 1px 2px 1px rgba(0,0,0,.15);
padding:5px 15px 5px 10px;
}
.info{
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
background: #fff;
color: #000;
max-width: 200px;
word-break: break-all;
}
#map{
width:100%;
height: 100%;
/deep/ .ol-control{
display:none;
}
}
}