ConvexHull.vue
<!--
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-10 16:10:56
* @LastEditTime: 2019-09-16 09:51:09
* @LastEditors: Please set LastEditors
-->
<template>
<div class="col-md-12">
<!----路径导航---->
<div class="myman_nav_route">
您现在的位置：<a href="javascript:">开发支持</a> > <a href="javascript:">Javascript API</a> > <a href="javascript:">参考手册</a> > <a href="javascript:">事件</a>
<div class="pull-right myman_nav_feedback">
<i class="glyphicon glyphicon-list-alt"></i>
用户反馈
</div>
</div>
<div> <Button type="info" id="btn03" @click="Geometry1">绘制</Button></div>
<div><textarea type="text" id="geomtext" rows="5" cols="80">POLYGON((12615854.963811828 2649848.008031188,12615454.963811828 2649448.008031188,12615954.963811828 2649448.008031188,12615854.963811828 2649448.008031188,12615554.963811828 2649848.008031188))</textarea></div>
<div> <Button type="info" id="btn03" @click="Geometry2">绘制</Button> <Button type="info" id="" @click="convexHull">运行</Button></div>
<div><textarea type="text" id="geomtext3" rows="5" cols="80">POLYGON((12615854.963811828 2649848.008031188,12615840.963811828 2649048.008031188,12615954.963811828 2649999.008031188,12615994.963811828 2649848.008031188,12615999.963811828 2649998.008031188,12615954.963811828 2649999.008031188))</textarea></div>
<!---- 中间详细内容 ---->
<div class="myman_content">
<h3 class="myman_title">ConvexHull</h3>
<small>最后更新时间: 2019年09月10日</small>
</div>
<div class="layout">
<Layout>
<Sider hide-trigger>
<span class="title">ConvexHull</span>
</Sider>
<Layout>
<Header>
<!-- 几何体1：
<Input placeholder="Enter point" style="width: auto" />
<Icon type="ios-contact" slot="prefix" />
<Button type="info" id="btn03">运行</Button> -->
<div>
几何体1: <Button type="info" id="">绘制</Button>
<Input v-model="value1" type="textarea" id="geomtext" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..." />
</div>
<div>
几何体2: <Button type="info" id="">绘制</Button> <Button type="info" id="" @click="convexHull">运行</Button>
<Input v-model="value2" type="textarea" id="geomtext3" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..." />
</div>
</Header>
<Footer>
<div id="map" style="width: 100%;height: 650px" @click="init()"></div>
</Footer>
</Layout>
</Layout>
</div>
</div>
</template>
<script>
export default {
nam: 'ConvexHull',
data () {
return {
map: null,
wktpolygon2: null,
wktpolygon: null,
wfvectorselectedstyle: null,
value1: 'POLYGON((12615854.963811828 2649848.008031188,12615454.963811828 2649448.008031188,12615954.963811828 2649448.008031188,12615854.963811828 2649448.008031188,12615554.963811828 2649848.008031188))',
value2: 'POLYGON((12615854.963811828 2649848.008031188,12615840.963811828 2649048.008031188,12615954.963811828 2649999.008031188,12615994.963811828 2649848.008031188,12615999.963811828 2649998.008031188,12615954.963811828 2649999.008031188))'
}
},
mounted () {
this.initMap()
// console.log(OpenLayers);
},
methods: {
initMap () {
OpenLayers.Layer.OFFLINEMAP = OpenLayers.Class(OpenLayers.Layer.XYZ, {
name: "MYMAP",
url: "https://nqi.gmcc.net:20443/tiles/${z}/${x}/${y}.png",
sphericalMercator: !0, //是{String} The layer attribution.
wrapDateLine: !0, //
tileOptions: null, //{Object} o此Layer创建的OpenLayers.Tile实例的可选配置选项。
isBaseLayer: true,
initialize: function (a, b, c) {
OpenLayers.Layer.XYZ.prototype.initialize.apply(this, arguments);
this.tileOptions = OpenLayers.Util
.extend({ //OpenLayers.Util.extend（目标对象，原对象）：将原对象中的所有非“undefined”属性拷贝到目标对象（包括"toString"函数）
crossOriginKeyword: "anonymous" //{Object} 此Layer创建的OpenLayers.Tile实例的可选配置选项。默认是
},
this.options && this.options.tileOptions)
},
//创建此图层的克隆
clone: function (a) {
null == a && (a = new OpenLayers.Layer.OFFLINEMAP(this.name, this.url, this.getOptions()));
return a = OpenLayers.Layer.XYZ.prototype.clone.apply(this, [a])
},
CLASS_NAME: "OpenLayers.Layer.OFFLINEMAP"
});
this.map = new OpenLayers.Map({
div: "map",
projection: "EPSG:900913",
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
uints: 'm',
center: [12615854.963811828, 2649648.008031188],
isBaseLayer: true,
numZoomLevels: [0,
16], //屏幕点:[Screen]:692,304,WGS84:113.32483033753087,23.13118398658761,level:14,Web Mercator:
resolutions: [0.0439453125, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125] });
// console.log("经纬度是："+lonlat.lon+", "+lonlat.lat);
var configIP = "https://nqi.gmcc.net:20443/tiles/${z}/${x}/${y}.png";
var mapoptions = {
name: "map",
url: configIP,
sphericalMercator: !0,
wrapDateLine: !0,
tileOptions: null,
box: true,//允许框选
numZoomLevels: 16,
isBaseLayer: true,
};
// * 集合图层,从layer中继承
var offlinemap = new OpenLayers.Layer.OFFLINEMAP(mapoptions);
this.map.addLayer(offlinemap);
/**
* jsts 例子
**/
//添加样式过滤器
var wfvectorstyle = new OpenLayers.Style({
pointRadius: 30,
fillOpacity: 0.7,
fillColor: "#00b3f9",
strokeWidth: 5,
strokeOpacity: 1,
graphicZIndex: 1,
strokeColor: "#D44927" //颜色
});
this.wfvectorselectedstyle = new OpenLayers.Style({
pointRadius: 30,
fillOpacity: 0.7,
fillColor: "green",
strokeWidth: 5,
strokeOpacity: 1,
graphicZIndex: 1,
strokeColor: "#F0D25D"
});
var wfslayer = new OpenLayers.Layer.Vector("testlayer",
{
styleMap: new OpenLayers.StyleMap({ "default": wfvectorstyle, "select": this.wfvectorselectedstyle })
});
this.map.addLayer(wfslayer);
},
toGeometryFromWkt (wkt) {
var geometry = null;
var wkt_reader;
if (wkt_reader == null) {
wkt_reader = new OpenLayers.Format.WKT(); // wkt对象
}
geometry = wkt_reader.read(wkt);
var obj = new Object();
obj.name = "name";
obj.wkt = wkt;
geometry.attributes = obj;
return geometry;
},
addFeature (wkt, layer) {
var geometry = this.toGeometryFromWkt(wkt);
$.extend(geometry.attributes, { NAME: "name", WKT: wkt }); //扩展属性
if (wkt != null) {
layer.addFeatures(geometry);
}
},
Geometry1 () {
//创建几何体1
var geomt3 = document.getElementById("geomtext3");
this.wktpolygon = geomt3.value;
var layer = this.map.getLayersBy("name", "testlayer");
this.addFeature(this.wktpolygon, layer[0]);
},
Geometry2 () {
//创建几何体2
var geomt2 = document.getElementById("geomtext");
this.wktpolygon2 = geomt2.value;
var layer = this.map.getLayersBy("name", "testlayer"); //getLayer(layerId:String):Layer 根据图层ID，获取图层对象
console.log(layer)
this.addFeature(this.wktpolygon2, layer[0]);
},
convexHull () { //提取公共的方法
// 使用WKT format读取A和B两个点
//JSTS reader, converts WKT geometry to JSTS geometry
var jsts_reader = new jsts.io.WKTReader();
//JSTS OpenLayersParser reads OpenLayers geometry to JSTS geometry / writes JSTS geometry to OpenLayers geometry
var jsts_parser = new jsts.io.OpenLayersParser();
var jsts_buffer_tolerance; //2 bzw. 100000 s. init(); //buffer
var akt_jsts_operation = 1; //buffer
////WKT转Geometry，points是一个点数组，如果为点，其长度为1，如果为线和面，长度大于1
var layer = this.map.getLayersBy("name", "testlayer");
var fts = layer[0].features;
// //转成jsts geometry 对象
var jsts_geomA = this.wktpolygon;
var jsts_geomB = this.wktpolygon2;
var jsts_geomA = jsts_parser.read(fts[0].geometry.clone());
var jsts_geomB = jsts_parser.read(fts[1].geometry.clone());
// //通过jsts空间扩展能力去算多点的外接矩形
var jsts_result_geom = jsts_geomA.convexHull(); //外接矩形
console.log(jsts_result_geom);
console.log(jsts_result_geom.shell.points[0].x)
// //转成openlayer geometry 对象
var transforgeometry = jsts_parser.write(jsts_result_geom);
var convexHullFeature = new OpenLayers.Feature.Vector('convexHullVector', {
styleMap: new OpenLayers.StyleMap(this.wfvectorselectedstyle) //设置图层样式
});
convexHullFeature.geometry = transforgeometry;
layer[0].addFeatures([convexHullFeature]);
// var difference = jsts_geomB.difference(jsts_geomA)
}
}
}
</script>
<style scoped >
#map .olControlZoom {
/*隐藏地图左上角的+-号*/
display: none;
}
.myman_content {
margin-top: 20px !important;
border-bottom: 1px solid rgb(207, 204, 204);
}
.layout {
margin-top: 20px;
}
.ivu-layout-sider,
.ivu-layout-header,
.ivu-layout-footer {
border: 1px solid #d2d6de;
height: 735px;
}
.ivu-layout-footer {
background: white;
padding: 10px 10px;
}
.ivu-layout-sider {
background: #f4f4f4 !important;
height: 900px;
}
.ivu-layout-header {
background: #f4f4f4;
height: 300px;
}
.ivu-layout.ivu-layout-has-sider {
height: 900px;
}
.title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
background-color: #f7eee8;
color: #30badf;
}
.jiheti {
display: inline-block;
}
</style>
