<!--
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-09-10 16:10:56
* @LastEditTime: 2019-10-22 15:12:10
* @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 class="myman_content">
<h3 class="myman_title">Intersection</h3>
<small>最后更新时间: 2019年09月10日</small>
</div>
<div class="layout">
<Layout>
<Sider hide-trigger>
<span class="title">Intersection</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="btn03" @click="Geometry1">绘制</Button></div>
<div><textarea type="text" id="geomtext" rows="1" cols="80" v-model="value1"></textarea></div>
<div> 几何体2:<Button type="info" id="btn03" @click="Geometry2">绘制</Button> <Button type="info" id="" @click="Intersection">运行</Button> </div>
<textarea type="text" id="geomtext3" rows="1" cols="80" v-model="value2"></textarea>
</Header>
<!-- 12615854.96 12615884.06,12615844.26 12615874.66,12615784.06 12615834.06,12615894.16 12615984.06,12615854.96 12615884.06-->
<Footer>
<div id="map" style="width: 100%;height: 650px" @click="init()"></div>
</Footer>
</Layout>
</Layout>
</div>
</div>
</template>
<script>
// import { Intersections, read } from './mapconfig'
import { initMap, CreatMap, addFeature, JstsUtils } from './mapCommon.js'
export default {
nam: 'Intersection',
data () {
return {
map: null,
wktpolygon2: null,
wktpolygon: null,
wfvectorselectedstyle: null,
value1: 'POLYGON((12615854.963811828 2649848.008031188,12615454.963811828 2649448.008031188,12615554.963811828 2649848.008031188,12615854.963811828 2649848.008031188))',
value2: 'POLYGON((12615854.963811828 2649448.008031188,12615400.963811828 2649958.008031188,12617194.963811828 2649448.008031188))'
}
},
mounted () {
self = this;
initMap();
CreatMap(self);
},
methods: {
Geometry1 (layer) {
//创建几何体1
// var geomt3 = document.getElementById("geomtext3");
this.wktpolygon = this.value1;
addFeature(this.wktpolygon, self.map.layers, 1);
},
Geometry2 (layer) {
//创建几何体2
// var geomt2 = document.getElementById("geomtext");
this.wktpolygon2 = this.value2;
addFeature(this.wktpolygon2, self.map.layers, 2);
},
Intersection (par1) { //提取公共的方法
var convexHullFeature = new OpenLayers.Feature.Vector('convexHullVector')
convexHullFeature.geometry = JstsUtils({ name: "intersection", firstwkt: this.value1, secondwkt: this.value2 });
// convexHullFeature.geometry = this.commonFunction.Intersections(this.map, this.value1, this.value2, "testlayer", 'intersection', this.wfvectorselectedstyle);
var feature = convexHullFeature.geometry.toString()
console.log("面积:" + convexHullFeature.geometry.getArea() + "平方米")
addFeature(feature, self.map.layers, 3)
}
}
}
</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>
mapCommon.js:
/* eslint-disable no-throw-literal */
/* eslint-disable camelcase */
/* eslint-disable no-undef */
let initMap = (name, url) => {
// debugger
OpenLayers.Layer.OFFLINEMAP = OpenLayers.Class(OpenLayers.Layer.XYZ, {
name: 'MYMAP',
// eslint-disable-next-line no-template-curly-in-string
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) {
a == null && (a = new OpenLayers.Layer.OFFLINEMAP(this.name, this.url, this.getOptions()))
// eslint-disable-next-line no-return-assign
return a = OpenLayers.Layer.XYZ.prototype.clone.apply(this, [a])
},
CLASS_NAME: 'OpenLayers.Layer.OFFLINEMAP'
})
}
let CreatMap = (_this) => {
// var _this = this
console.log('223')
console.log(_this)
// debugger
// console.log(_this.map)
console.log('22oooo3')
// debugger
_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);
// eslint-disable-next-line no-template-curly-in-string
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 polystyle = null
initStyle()
function initStyle () {
polystyle = new OpenLayers.Style({
pointRadius: 3.5,
fillOpacity: 0.7,
fillColor: 'black',
strokeWidth: 1,
strokeOpacity: 1,
graphicZIndex: 1
})
var rules = []
rules.push(new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: 'COLOR',
value: 1
}),
symbolizer: {
fillOpacity: 0.5,
fillColor: 'blue',
strokeWidth: 0.5,
strokeOpacity: 0.5,
strokeColor: 'white'
}
}))
rules.push(new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: 'COLOR',
value: 2
}),
symbolizer: {
fillOpacity: 0.5,
fillColor: 'yellow',
strokeWidth: 0.5,
strokeOpacity: 0.5,
strokeColor: 'white'
}
}))
rules.push(new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: 'COLOR',
value: 3
}),
symbolizer: {
fillOpacity: 0.5,
fillColor: 'red',
strokeWidth: 10,
strokeOpacity: 0.5,
strokeColor: 'pink'
}
}))
polystyle.rules = rules
}
// 添加样式过滤器
var wfvectorstyle = new OpenLayers.Style({
pointRadius: 30,
fillOpacity: 0.7,
fillColor: '#00b3f9',
strokeWidth: 5,
strokeOpacity: 1,
graphicZIndex: 1,
strokeColor: 'red' // 颜色
})
this.wfvectorselectedstyle = new OpenLayers.Style({
pointRadius: 10,
fillOpacity: 0.1,
fillColor: 'green',
strokeWidth: 5,
strokeOpacity: 1,
graphicZIndex: 1,
strokeColor: '#F0D25D'
})
var wfslayer = new OpenLayers.Layer.Vector('testlayer', {
styleMap: new OpenLayers.StyleMap({
'default': polystyle,
'select': this.wfvectorselectedstyle
})
})
this.layer = wfslayer
_this.map.addLayer(wfslayer)
}
let toGeometryFromWkt = (wkt) => {
var geometry = null
var wkt_reader
if (wkt_reader == null) {
wkt_reader = new OpenLayers.Format.WKT() // wkt对象
}
geometry = wkt_reader.read(wkt)
// eslint-disable-next-line no-new-object
var obj = new Object()
obj.name = 'name'
obj.wkt = wkt
geometry.attributes = obj
return geometry
}
let addFeature = (wkt, layer, i) => {
// debugger;
var geometry = toGeometryFromWkt(wkt)
$.extend(geometry.attributes, {
NAME: 'name',
WKT: wkt,
'COLOR': i
}) // 扩展属性
console.log(geometry)
if (wkt != null) {
this.layer.addFeatures(geometry)
}
}
let JstsUtils = (param) => {
var firstgeom = null
var secondgeom = null
var jsts_firstgeom = null
var jsts_secondgeom = null
var jsts_result_geom = null
var jsts_reader = new jsts.io.WKTReader()
// eslint-disable-next-line camelcase
// eslint-disable-next-line no-undef
var jsts_parser = new jsts.io.OpenLayersParser()
if (param.firstwkt) {
firstgeom = toGeometryFromWkt(param.firstwkt)
jsts_firstgeom = jsts_parser.read(firstgeom.geometry.clone())
}
if (param.secondwkt) {
secondgeom = toGeometryFromWkt(param.secondwkt)
jsts_secondgeom = jsts_parser.read(secondgeom.geometry.clone())
}
// 空间分析功能
switch (param.name) {
case 'buffer':
// 缓冲区
jsts_result_geom = jsts_firstgeom.buffer(parseFloat(param.radius == null ? 0.0 : param.radius))
break
case 'union':
jsts_result_geom = jsts_firstgeom.union(jsts_secondgeom)
break
case 'intersection':
jsts_result_geom = jsts_firstgeom.intersection(jsts_secondgeom)
break
case 'symDifference':
jsts_result_geom = jsts_firstgeom.symDifference(jsts_secondgeom)
break
case 'getBoundary':
jsts_result_geom = jsts_firstgeom.getBoundary()
break
case 'getCentroid':
jsts_result_geom = jsts_firstgeom.getCentroid()
break
case 'convexHull':
jsts_result_geom = jsts_firstgeom.convexHull()
break
default:
throw 'data format error!'
}
// //转成openlayer geometry 对象
return jsts_parser.write(jsts_result_geom)
}
export {
initMap,
CreatMap,
toGeometryFromWkt,
addFeature,
JstsUtils
}
export default {}