<template>
|
<div id="map">
|
<van-search
|
class="search"
|
show-action
|
v-model="value"
|
placeholder="请输入搜索位置 例:xx市xx县xx"
|
@focus="focusHander"
|
@blur="blurHander"
|
@search="searchHander"
|
input-align="center"
|
>
|
<template #action>
|
<div @click="searchHander">搜索</div>
|
</template>
|
</van-search>
|
|
<l-map
|
:ref="map"
|
:style="{ width: '100%', height: height + 'px' }"
|
:zoom="zoom"
|
:maxZoom="maxZoom"
|
:minZoom="minZoom"
|
:center="center"
|
>
|
<!-- <l-tile-layer :url="url"></l-tile-layer> -->
|
<l-polygon
|
ref="ppp"
|
:lat-lngs="polygon.latlngs"
|
:visible="ispolygon"
|
:color="polygon.color"
|
:fillColor="polygon.color"
|
></l-polygon>
|
<l-marker :lat-lng="flightArr"></l-marker>
|
</l-map>
|
|
<div class="footer">
|
<div class="header-fot">
|
<ul>
|
<li>周长：{{ perimeter }}米</li>
|
<li :key="area">面积：{{ area }}亩</li>
|
</ul>
|
</div>
|
</div>
|
<div class="restoration" @click="recoverHander">
|
<img src="../assets/dingwei.png" />
|
</div>
|
<div class="affirm" @click="verifyHeader">确认</div>
|
|
<van-notice-bar class="hint" :scrollable="false">
|
<van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
|
<van-swipe-item>操作提示：拖动调整地块边界</van-swipe-item>
|
<van-swipe-item>操作提示：点击左侧按钮绘制、编辑、删除地块</van-swipe-item>
|
<van-swipe-item>操作提示：点击左上角按钮回到初始位置</van-swipe-item>
|
</van-swipe>
|
</van-notice-bar>
|
<canvas id="aa" data-rule="nonzero"></canvas>
|
<canvas id="bb"></canvas>
|
|
<van-popup v-model="redactShow" round position="bottom" :style="{ height: '430px' }">
|
<div class="list-one">设置颜色</div>
|
<div class="list-two">点击色块为地块设置不同颜色以区分不同作物或农事状态</div>
|
<ul class="list-three">
|
<li
|
v-for="(item, index) in colorArr"
|
:key="index"
|
@click="selectColor(item)"
|
:style="{
|
background: color === item ? '#e9e9e9' : item,
|
borderColor: item,
|
}"
|
></li>
|
</ul>
|
<div class="list-four">
|
<div class="four-box">
|
<van-field
|
v-model="value1"
|
label="地块名称"
|
label-class="labelstyle"
|
@input="setValue"
|
maxlength="30"
|
input-align="right"
|
placeholder="请输入地块名称"
|
/>
|
<div class="border"></div>
|
</div>
|
<div class="four-box">
|
<van-field
|
v-model="value2"
|
label="地块面积"
|
label-class="labelstyle"
|
:readonly="true"
|
input-align="right"
|
/>
|
<div class="border"></div>
|
</div>
|
<div class="four-box" @click="groupingChange">
|
<van-field
|
v-model="value3"
|
label="地块分组"
|
label-class="labelstyle"
|
:readonly="true"
|
input-align="right"
|
/>
|
<div class="border"></div>
|
</div>
|
</div>
|
<div class="list-five">
|
<p @click="revocation">取消</p>
|
<p @click="submit">提交</p>
|
</div>
|
</van-popup>
|
|
<div class="shade" v-show="groupingShow">
|
<div class="shade-box">
|
<van-radio-group v-model="radio" class="shade-list">
|
<van-radio
|
v-for="(item, index) in groupList"
|
:key="index"
|
@click="choosegroup(item.id, item.groupName)"
|
:name="item.id"
|
checked-color="#42b03f"
|
class="individual"
|
>{{ item.groupName }}</van-radio>
|
<van-radio
|
name="5"
|
@click="choosegroup('true')"
|
checked-color="#42b03f"
|
class="individual"
|
>
|
<input
|
class="input-box"
|
type="text"
|
placeholder="请输入新组名称"
|
v-model="newgroupName"
|
/>
|
</van-radio>
|
</van-radio-group>
|
<div class="fot">
|
<p @click="cancel">取消</p>
|
<p @click="affirm">确定</p>
|
</div>
|
</div>
|
</div>
|
|
<div class="mask" v-show="isSearch" @click="closeSearch">
|
<div class="search_box" v-show="searchArr.length > 0">
|
<p @click="historyHander(item)" v-for="(item, i) in searchArr" :key="i">{{ item }}</p>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
// https://hs.djiplant.com/maptest?redact=1&plotId=1131&token=584d7063-43e5-4a0c-90ee-67a9f68d152f#/draw
|
import { Icon } from "leaflet"
|
delete Icon.Default.prototype._getIconUrl
|
Icon.Default.mergeOptions({
|
iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"), //leaflet/dist/images/marker-icon-2x.png
|
iconUrl: require("leaflet/dist/images/marker-icon.png"),
|
shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
|
})
|
import { latLng } from "leaflet"
|
import {
|
LMap,
|
LTileLayer,
|
LPolyline,
|
LTooltip,
|
LMarker,
|
LPopup,
|
LPolygon,
|
} from "vue2-leaflet"
|
import "@/common/js/leaflet-geoman.min.js"
|
import "@/utils/ChineseTmsProviders.js"
|
import "@/utils/leaflet.mapCorrection.js"
|
import "jweixin-module"
|
// var wx = require("jweixin-module");
|
export default {
|
name: "draw",
|
components: {
|
LMap,
|
LTileLayer,
|
LMarker,
|
LPopup,
|
LPolygon,
|
LTooltip,
|
LPolyline,
|
},
|
data () {
|
return {
|
map: "map",
|
zoom: 17,
|
maxZoom: 18,
|
minZoom: 1,
|
center: L.latLng(31.34534554915163, 120.40351663678561),
|
plotCenter: [], //地块中心
|
flightArr: [31.34534554915163, 120.40351663678561],
|
url: "https://mt3.google.cn/maps/vt?lyrs=s,h@189&gl=cn&x={x}&y={y}&z={z}&scale=1.2",
|
attribution:
|
'© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
|
latlngArr: [], //绘制的地块的坐标
|
area: 0, //多边形面积
|
perimeter: 0, //周长
|
height: 888,
|
width: 888,
|
polygon: {
|
color: "",
|
latlngs: [],
|
},
|
ispolygon: false,
|
value: "", //搜索数据
|
address: "", //搜索地点
|
redactShow: false, //编辑弹出开关
|
colorArr: [
|
"#f50b09",
|
"#3753ff",
|
"#41b240",
|
"#fcff00",
|
"#00feff",
|
"#ff9700",
|
],
|
color: "#f50b09",
|
value1: "一号地块",
|
value2: "",
|
value3: "默认组 >",
|
radio: 0,
|
imgUrl: "",
|
imageUrl: "",
|
groupingShow: false,
|
groupName: "",
|
newgroupName: "",
|
groupList: [], //地块分组
|
farmlandC: "", //地块位置
|
district_c: "",
|
province: "",
|
city: "",
|
district: "",
|
groupId: 0,
|
isgroup: false,
|
plotId: 0,
|
myFarm: {},
|
submitbool: false,
|
searchArr: [], //历史搜索
|
isSearch: false, //历史搜索开关
|
}
|
},
|
created () {
|
console.log(this.$route.query)
|
var h = document.documentElement.clientHeight || document.body.clientHeight
|
this.height = h
|
var w = document.documentElement.clientWidth || document.body.clientWidth
|
this.width = w
|
document.getElementsByTagName("title")[0].innerText = "绘制地块"
|
|
if (this.$route.query.tab == 1) {
|
this.plotId = this.$route.query.id
|
this.getPlot()
|
} else if (this.$route.query.tab == 0) {
|
var lat = this.getQueryString("lat")
|
var lng = this.getQueryString("lng")
|
// var lat = 33.49408765;
|
// var lng = 120.09025433;
|
var kk = this.WgsToGcj(lng, lat)
|
this.flightArr = kk
|
this.center = L.latLng(kk[0], kk[1])
|
// this.center = L.latLng(lat, lng);
|
// this.flightArr = [lat, lng];
|
}
|
if (this.getQueryString("redact") == 1) {
|
//编辑
|
this.plotId = this.getQueryString("plotId")
|
this.getPlot()
|
} else if (this.getQueryString("redact") == 0) {
|
//绘制
|
var lat = this.getQueryString("lat")
|
var lng = this.getQueryString("lng")
|
var kk = this.WgsToGcj(lng, lat)
|
this.flightArr = kk
|
this.center = L.latLng(kk[0], kk[1])
|
} else if (this.getQueryString("redact") == 3) {
|
//飞手给农户绘制
|
var lat = this.getQueryString("lat")
|
var lng = this.getQueryString("lng")
|
var kk = this.WgsToGcj(lng, lat)
|
this.flightArr = kk
|
this.center = L.latLng(kk[0], kk[1])
|
}
|
},
|
mounted () {
|
this.$nextTick(() => {
|
var layer
|
|
this.$refs.map.mapObject.pm.setLang("zh")
|
var options = {
|
templineStyle: { color: "#00CFAA" },
|
hintlineStyle: {},
|
pathOptions: {
|
color: "#00CFAA",
|
fillColor: "#00CFAA",
|
},
|
}
|
this.$refs.map.mapObject.pm.enableDraw("Polygon", options)
|
this.$refs.map.mapObject.pm.disableDraw("Polygon")
|
var myMap = this.$refs.map.mapObject
|
L.tileLayer
|
.chinaProvider("TianDiTu.Satellite.Map", {
|
key: "571f5bd0cbfe5d42d05ccf49916d69db",
|
maxZoom: 18,
|
minZoom: 1,
|
})
|
.addTo(myMap)
|
L.tileLayer
|
.chinaProvider("TianDiTu.Satellite.Annotion", {
|
key: "571f5bd0cbfe5d42d05ccf49916d69db",
|
maxZoom: 18,
|
minZoom: 1,
|
})
|
.addTo(myMap)
|
if (this.$route.query.tab == "1" || this.getQueryString("redact") == 1) {
|
this.ispolygon = true
|
this.$refs.map.mapObject.pm.addControls({
|
position: "topleft",
|
drawMarker: false,
|
drawPolygon: false,
|
editPolygon: true,
|
drawPolyline: false,
|
deleteLayer: false,
|
cutPolygon: false,
|
drawCircleMarker: false,
|
drawRectangle: false,
|
drawCircle: false,
|
})
|
// 地块的事件
|
this.$refs.ppp.mapObject.on("pm:markerdragend", (e) => {
|
console.log("顶点拖到结束", e.target)
|
this.clearCanvas()
|
this.getlatlng(e.target._latlngs[0])
|
this.draw(e.target._rings)
|
this.submitbool = true
|
})
|
this.$refs.ppp.mapObject.on("pm:dragend", (e) => {
|
console.log("拖动图层", e.target)
|
this.clearCanvas()
|
this.getlatlng(e.target._latlngs[0])
|
this.draw(e.target._rings)
|
this.submitbool = true
|
})
|
this.$refs.ppp.mapObject.on("pm:vertexremoved", (e) => {
|
console.log("删除点", e.target)
|
this.clearCanvas()
|
this.getlatlng(e.target._latlngs[0])
|
this.draw(e.target._rings)
|
this.submitbool = true
|
})
|
} else if (
|
this.$route.query.tab == "0" ||
|
this.getQueryString("redact") == 0 ||
|
this.getQueryString("redact") == 3
|
) {
|
this.ispolygon = false
|
this.$refs.map.mapObject.pm.addControls({
|
position: "topleft",
|
drawMarker: false,
|
drawPolygon: true,
|
editPolygon: true,
|
drawPolyline: false,
|
deleteLayer: true,
|
cutPolygon: false,
|
drawCircleMarker: false,
|
drawRectangle: false,
|
drawCircle: false,
|
})
|
|
this.$refs.map.mapObject.on("pm:create", (e) => {
|
this.$refs.map.mapObject.pm.addControls({
|
drawPolygon: false,
|
})
|
layer = e.layer
|
layer.on("pm:vertexremoved", (res) => {
|
console.log("删除点", res.sourceTarget._latlngs[0])
|
this.getlatlng(res.sourceTarget._latlngs[0])
|
this.clearCanvas()
|
})
|
layer.on("pm:markerdragend", (res) => {
|
console.log("顶点拖到结束", res.sourceTarget._latlngs[0])
|
this.clearCanvas()
|
this.getlatlng(res.sourceTarget._latlngs[0])
|
//绘制canvas
|
this.draw(res.sourceTarget._rings)
|
})
|
layer.on("pm:dragend", (res) => {
|
console.log("拖动图层", res.sourceTarget._latlngs[0])
|
this.clearCanvas()
|
this.getlatlng(res.sourceTarget._latlngs[0])
|
//绘制canvas
|
this.draw(res.sourceTarget._rings)
|
})
|
console.log("绘制完成", e)
|
this.getlatlng(e.layer._latlngs[0])
|
//执行绘制canvas地块轮廓
|
this.draw(layer._rings)
|
})
|
this.$refs.map.mapObject.on("pm:remove", (e) => {
|
console.log("删除图层")
|
this.clearCanvas()
|
this.area = 0
|
this.perimeter = 0
|
myMap.pm.addControls({
|
drawPolygon: true,
|
})
|
})
|
}
|
})
|
},
|
methods: {
|
// 获取坐标
|
getlatlng (list) {
|
var arr = []
|
var arr1 = []
|
for (var i = 0; i < list.length; i++) {
|
var lat = list[i].lat
|
var lng = list[i].lng
|
var Flatlng = this.WgsToGcjF(lng, lat)
|
arr.push([lat, lng])
|
arr1.push({ lati: Flatlng[0], longi: Flatlng[1] })
|
}
|
arr1.push(arr1[0])
|
this.latlngArr = arr1
|
//计算面积周长
|
var areaArr = arr
|
areaArr.push(areaArr[0])
|
this.area = (this.computeSignedArea(list) * 0.0015).toFixed(2)
|
this.value2 = (this.computeSignedArea(list) * 0.0015).toFixed(2) + "亩"
|
var line = turf.lineString(areaArr)
|
this.perimeter = (turf.length(line) * 1000).toFixed(2)
|
},
|
// 绘制图片
|
draw (arr) {
|
var newArr = []
|
var minX = []
|
var minY = []
|
var oldminX = []
|
var oldminY = []
|
var clipArea = {} //裁剪范围
|
for (var i = 0; i < arr[0].length; i++) {
|
var x = arr[0][i].x
|
var y = arr[0][i].y
|
oldminX.push(x)
|
oldminY.push(y)
|
}
|
// 最小值如果小于0 就把所有的都加上最小值得绝对值 使最小值在0点
|
if (Math.min.apply(null, oldminX) < 0) {
|
oldminX.forEach((item) => {
|
minX.push(item + Math.abs(Math.min.apply(null, oldminX)))
|
})
|
} else {
|
minX = oldminX
|
}
|
if (Math.min.apply(null, oldminY) < 0) {
|
oldminY.forEach((item) => {
|
minY.push(item + Math.abs(Math.min.apply(null, oldminY)))
|
})
|
} else {
|
minY = oldminY
|
}
|
|
for (var n = 0; n < minY.length; n++) {
|
newArr[n] = [minX[n], minY[n]]
|
}
|
|
clipArea.x = Math.min.apply(null, minX)
|
clipArea.y = Math.min.apply(null, minY)
|
clipArea.w = Math.max.apply(null, minX) - Math.min.apply(null, minX)
|
clipArea.h = Math.max.apply(null, minY) - Math.min.apply(null, minY)
|
|
var aa = document.getElementById("aa")
|
aa.width = Math.max.apply(null, minX)
|
aa.height = Math.max.apply(null, minY)
|
var brush = aa.getContext("2d")
|
var rule = aa.getAttribute("data-rule")
|
brush.strokeStyle = "#00CFAA"
|
brush.lineWidth = 2
|
|
brush.moveTo(newArr[0][0], newArr[0][1])
|
newArr.forEach((item, i, arr) => {
|
brush.lineTo(item[0], item[1])
|
})
|
brush.closePath()
|
brush.fillStyle = "#00CFAA"
|
brush.fill(rule)
|
brush.stroke()
|
var that = this
|
function startClip (area) {
|
var canvas = document.getElementById("bb")
|
canvas.width = area.w
|
canvas.height = area.h
|
|
var data = brush.getImageData(area.x, area.y, area.w, area.h)
|
var context = canvas.getContext("2d")
|
context.beginPath()
|
context.putImageData(data, 0, 0)
|
return canvas.toDataURL("image/png", 1)
|
}
|
var url = startClip(clipArea)
|
console.log(url)
|
this.imgUrl = url
|
|
// var link = document.createElement("a");
|
// link.download = "image-group.jpeg";
|
// link.href = this.imgUrl;
|
// link.click();
|
},
|
// 清除画布
|
clearCanvas () {
|
document.getElementById("aa").height = this.height
|
document.getElementById("bb").height = this.height
|
},
|
// 确认按钮
|
verifyHeader () {
|
if (this.latlngArr.length == 0) {
|
if (
|
this.$route.query.tab == 0 ||
|
this.getQueryString("redact") == 0 ||
|
this.getQueryString("redact") == 3
|
) {
|
this.$toast.fail("请先绘制地块！")
|
return
|
}
|
}
|
this.redactShow = true
|
this.$http.get(
|
"/api-s/farm/sysFarmGroup/myGroup",
|
"json",
|
{
|
userId: this.getQueryString("userId")
|
? this.getQueryString("userId")
|
: "",
|
orgCode: this.getQueryString("orgCode")
|
? this.getQueryString("orgCode")
|
: "",
|
},
|
(res) => {
|
this.groupList = res.data.result
|
}
|
)
|
},
|
// 选择颜色
|
selectColor (val) {
|
this.color = val
|
},
|
// 获取地块名
|
setValue (val) {
|
this.value1 = val
|
},
|
// 搜索位置
|
searchHander () {
|
this.isSearch = false
|
if (this.address == "") {
|
return
|
}
|
this.searchArr.push(this.address)
|
localStorage.setItem("searchHistory", JSON.stringify(this.searchArr))
|
this.$jsonp(
|
"https://api.map.baidu.com/geocoding/v3/?callback=renderReverse&output=json",
|
{
|
address: this.address,
|
ret_coordtype: "gcj02ll",
|
}
|
).then((res) => {
|
var lat = res.result.location.lat
|
var lng = res.result.location.lng
|
// this.flightArr = [lat, lng];
|
var kk = this.WgsToGcj(lng, lat)
|
this.flightArr = kk
|
this.center = L.latLng(kk[0], kk[1])
|
})
|
},
|
// 搜索位置 值
|
blurHander (e) {
|
this.address = e.target.value
|
},
|
// 搜索框获焦时拿历史
|
focusHander () {
|
this.isSearch = true
|
let arr = JSON.parse(localStorage.getItem("searchHistory"))
|
// 去重
|
arr = Array.from(new Set(arr))
|
this.searchArr = arr
|
},
|
// 选择历史搜索值
|
historyHander (val) {
|
this.address = val
|
this.searchHander()
|
},
|
closeSearch () {
|
this.isSearch = false
|
},
|
// 选择分组
|
choosegroup (i, val) {
|
if (i === "true") {
|
this.isgroup = true
|
} else {
|
this.groupId = i
|
this.groupName = val
|
this.value3 = this.groupName + " >"
|
this.isgroup = false
|
}
|
},
|
// jsonp
|
renderReverse (e) {
|
console.log(e)
|
},
|
// 取消提交
|
revocation () {
|
this.redactShow = false
|
},
|
// 提交绘制的地块
|
submit () {
|
this.redactShow = false
|
let dizhi = this.latlngArr[0].lati + "," + this.latlngArr[0].longi
|
this.geographic(dizhi)
|
},
|
pushgroup () {
|
var toast1 = this.$toast.loading({
|
message: "提交中...",
|
duration: 0,
|
forbidClick: true,
|
})
|
|
this.$http.post(
|
"/api-s/farm/sysFarmland/add",
|
"json",
|
{
|
description: JSON.stringify(this.latlngArr),
|
groupId: Number(this.groupId),
|
farmland: this.value1,
|
area: Number(this.area),
|
girth: Number(this.perimeter),
|
col: this.color,
|
imageUrl: this.imageUrl,
|
farmlandC: this.farmlandC,
|
districtC: this.district_c,
|
province: this.province,
|
city: this.city,
|
district: this.district,
|
userId:
|
this.getQueryString("redact") == 3
|
? this.getQueryString("userId")
|
: "",
|
orgCode:
|
this.getQueryString("redact") == 3
|
? this.getQueryString("orgCode")
|
: "",
|
},
|
(res) => {
|
toast1.clear()
|
this.$toast.success("提交成功")
|
if (this.$route.query.tab == 0) {
|
this.$router.push({ path: "groundchunk" })
|
} else {
|
setTimeout(() => {
|
wx.miniProgram.navigateBack()
|
}, 1500)
|
}
|
}
|
)
|
},
|
pushgroup1 () {
|
var toast1 = this.$toast.loading({
|
message: "提交中...",
|
duration: 0,
|
forbidClick: true,
|
})
|
this.$http.put(
|
"/api-s/farm/sysFarmland/edit",
|
"json",
|
{
|
description: JSON.stringify(this.latlngArr),
|
groupId: Number(this.groupId),
|
farmland: this.value1,
|
area: Number(this.area),
|
girth: Number(this.perimeter),
|
col: this.color,
|
imageUrl: this.imageUrl,
|
id: this.plotId,
|
farmlandC: this.farmlandC,
|
districtC: this.district_c,
|
province: this.province,
|
city: this.city,
|
district: this.district,
|
},
|
(res) => {
|
toast1.clear()
|
this.$toast.success("提交成功")
|
if (this.$route.query.tab == 1) {
|
this.$router.push({ path: "groundchunk" })
|
} else {
|
setTimeout(() => {
|
wx.miniProgram.navigateBack()
|
}, 1500)
|
}
|
}
|
)
|
},
|
geographic (val) {
|
this.$jsonp(
|
"https://api.map.baidu.com/reverse_geocoding/v3/?callback=renderReverse&output=json",
|
{
|
coordtype: "wgs84ll",
|
location: val,
|
}
|
).then((res) => {
|
console.log(res)
|
this.farmlandC = res.result.formatted_address
|
this.district_c = res.result.addressComponent.adcode
|
this.province = res.result.addressComponent.province
|
this.city = res.result.addressComponent.city
|
this.district = res.result.addressComponent.district
|
if (this.$route.query.tab == 1 || this.getQueryString("redact") == 1) {
|
if (this.submitbool) {
|
this.$http.post(
|
"/api-f/files/uploadBase64",
|
"fromdata",
|
{
|
imageString: this.imgUrl,
|
fileSource: "ALIYUN",
|
},
|
(res) => {
|
this.imageUrl = res.data.result.url
|
this.pushgroup1()
|
}
|
)
|
} else {
|
this.pushgroup1()
|
}
|
} else if (
|
this.$route.query.tab == 0 ||
|
this.getQueryString("redact") == 0 ||
|
this.getQueryString("redact") == 3
|
) {
|
this.$http.post(
|
"/api-f/files/uploadBase64",
|
"fromdata",
|
{
|
imageString: this.imgUrl,
|
fileSource: "ALIYUN",
|
},
|
(res) => {
|
console.log(res)
|
console.log("res")
|
this.imageUrl = res.data.result.url
|
this.pushgroup()
|
}
|
)
|
}
|
})
|
},
|
// 修改地块分组
|
groupingChange () {
|
this.groupingShow = true
|
},
|
// 取消修改分组
|
cancel () {
|
this.groupingShow = false
|
this.radio = 0
|
this.groupName = ""
|
},
|
// 确定修改分组
|
affirm () {
|
this.groupingShow = false
|
if (this.isgroup) {
|
this.$http.post(
|
"/api-s/farm/sysFarmGroup/add",
|
"json",
|
{
|
groupName: this.newgroupName,
|
userId: this.getQueryString("userId")
|
? this.getQueryString("userId")
|
: "",
|
orgCode: this.getQueryString("orgCode")
|
? this.getQueryString("orgCode")
|
: "",
|
},
|
(res) => {
|
this.$http.get(
|
"/api-s/farm/sysFarmGroup/myGroup",
|
"json",
|
{
|
userId: this.getQueryString("userId")
|
? this.getQueryString("userId")
|
: "",
|
orgCode: this.getQueryString("orgCode")
|
? this.getQueryString("orgCode")
|
: "",
|
},
|
(res) => {
|
this.groupList = res.data.result
|
|
this.groupList.forEach((item) => {
|
if (item.groupName == this.newgroupName) {
|
this.groupId = item.id
|
this.radio = item.id
|
this.groupName = this.newgroupName
|
this.value3 = this.groupName + " >"
|
this.newgroupName = ""
|
}
|
})
|
}
|
)
|
}
|
)
|
}
|
},
|
// 获取地块
|
getPlot () {
|
this.$http.get(
|
"/api-s/farm/sysFarmland/queryById",
|
"json",
|
{
|
id: this.plotId,
|
},
|
(res) => {
|
console.log(res)
|
this.myFarm = res.data.result
|
this.polygon.color = this.myFarm.col
|
this.color = this.myFarm.col
|
this.area = this.myFarm.area
|
this.imageUrl = this.myFarm.imageUrl
|
this.perimeter = this.myFarm.girth
|
this.value1 = this.myFarm.farmland
|
this.value2 = this.myFarm.area + "亩"
|
this.value3 = this.myFarm.groupName + " >"
|
this.groupName = this.myFarm.groupName
|
this.radio = this.myFarm.groupId
|
this.groupId = this.myFarm.groupId
|
var list = JSON.parse(this.myFarm.description)
|
this.latlngArr = list
|
var arr = []
|
list.forEach((item, i) => {
|
var lat = item.lati
|
var lng = item.longi
|
var kk = this.WgsToGcj(lng, lat)
|
arr.push(kk)
|
// arr.push([lat, lng]);
|
})
|
var parameters = turf.polygon([arr])
|
var center = turf.centerOfMass(parameters)
|
this.plotCenter = center.geometry.coordinates
|
this.center = L.latLng(this.plotCenter)
|
this.flightArr = this.plotCenter
|
this.polygon.latlngs = arr
|
}
|
)
|
},
|
// 获取url信息
|
getQueryString (name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i")
|
var r = window.location.search.substr(1).match(reg)
|
if (r != null) {
|
return unescape(r[2])
|
}
|
return null
|
},
|
// 回到最初定位
|
recoverHander () {
|
this.center = L.latLng(33.16414997464715, 106.32244430387807)
|
if (this.$route.query.tab == "1" || this.getQueryString("redact") == 1) {
|
setTimeout(() => {
|
this.center = L.latLng(this.plotCenter)
|
this.flightArr = this.plotCenter
|
}, 1)
|
} else {
|
var lat = this.getQueryString("lat")
|
var lng = this.getQueryString("lng")
|
var kk = this.WgsToGcj(lng, lat)
|
setTimeout(() => {
|
this.center = L.latLng(kk[0], kk[1])
|
// this.center = L.latLng(lat, lng);
|
this.flightArr = kk
|
}, 1)
|
}
|
},
|
computeSignedArea (path) {
|
let radius = 6371009
|
let len = path.length
|
if (len < 3) return 0
|
let total = 0
|
let prev = path[len - 1]
|
let prevTanLat = Math.tan((Math.PI / 2 - (prev.lat / 180) * Math.PI) / 2)
|
let prevLng = (prev.lng / 180) * Math.PI
|
for (let i in path) {
|
let tanLat = Math.tan(
|
(Math.PI / 2 - (path[i].lat / 180) * Math.PI) / 2
|
)
|
let lng = (path[i].lng / 180) * Math.PI
|
total += this.polarTriangleArea(tanLat, lng, prevTanLat, prevLng)
|
prevTanLat = tanLat
|
prevLng = lng
|
}
|
return Math.abs(total * (radius * radius))
|
},
|
polarTriangleArea (tan1, lng1, tan2, lng2) {
|
let deltaLng = lng1 - lng2
|
let t = tan1 * tan2
|
return 2 * Math.atan2(t * Math.sin(deltaLng), 1 + t * Math.cos(deltaLng))
|
},
|
// 转为高德坐标
|
CalDev (WgLon, WgLat) {
|
var ee = 0.00669342162296594323
|
var a = 6378245.0
|
if (this.IsOutOfChina(WgLon, WgLat)) {
|
return { Lon: 0, Lat: 0 }
|
}
|
var Lat = this.CalLat(WgLon - 105.0, WgLat - 35.0)
|
var Lon = this.CalLon(WgLon - 105.0, WgLat - 35.0)
|
var RadLat = (WgLat / 180.0) * Math.PI
|
var Magic = Math.sin(RadLat)
|
Magic = 1 - ee * Magic * Magic
|
var sqrtMagic = Math.sqrt(Magic)
|
Lat = (Lat * 180.0) / (((a * (1 - ee)) / (Magic * sqrtMagic)) * Math.PI)
|
Lon = (Lon * 180.0) / ((a / sqrtMagic) * Math.cos(RadLat) * Math.PI)
|
return { Lon: Lon, Lat: Lat }
|
},
|
IsOutOfChina (Lon, Lat) {
|
if (Lon < 72.004 || Lon > 137.8347) {
|
return true
|
}
|
if (Lat < 0.8293 || Lat > 55.8271) {
|
return true
|
}
|
return false
|
},
|
CalLat (X, Y) {
|
var ResultLat =
|
-100.0 +
|
2.0 * X +
|
3.0 * Y +
|
0.2 * Y * Y +
|
0.1 * X * Y +
|
0.2 * Math.sqrt(Math.abs(X))
|
ResultLat +=
|
((20.0 * Math.sin(6.0 * X * Math.PI) +
|
20.0 * Math.sin(2.0 * X * Math.PI)) *
|
2.0) /
|
3.0
|
ResultLat +=
|
((20.0 * Math.sin(Y * Math.PI) + 40.0 * Math.sin((Y / 3.0) * Math.PI)) *
|
2.0) /
|
3.0
|
ResultLat +=
|
((160.0 * Math.sin((Y / 12.0) * Math.PI) +
|
320 * Math.sin((Y * Math.PI) / 30.0)) *
|
2.0) /
|
3.0
|
return ResultLat
|
},
|
CalLon (X, Y) {
|
var ResultLon =
|
300.0 +
|
X +
|
2.0 * Y +
|
0.1 * X * X +
|
0.1 * X * Y +
|
0.1 * Math.sqrt(Math.abs(X))
|
ResultLon +=
|
((20.0 * Math.sin(6.0 * X * Math.PI) +
|
20.0 * Math.sin(2.0 * X * Math.PI)) *
|
2.0) /
|
3.0
|
ResultLon +=
|
((20.0 * Math.sin(X * Math.PI) + 40.0 * Math.sin((X / 3.0) * Math.PI)) *
|
2.0) /
|
3.0
|
ResultLon +=
|
((150.0 * Math.sin((X / 12.0) * Math.PI) +
|
300.0 * Math.sin((X / 30.0) * Math.PI)) *
|
2.0) /
|
3.0
|
return ResultLon
|
},
|
WgsToGcj (Longitude, Latitude) {
|
var Dev = this.CalDev(Longitude, Latitude)
|
var RetLat = Latitude - Dev.Lat
|
var RetLon = Longitude - Dev.Lon
|
return [RetLat, RetLon]
|
},
|
WgsToGcjF (Longitude, Latitude) {
|
var Dev = this.CalDev(Longitude, Latitude)
|
var RetLat = Latitude + Dev.Lat
|
var RetLon = Longitude + Dev.Lon
|
return [RetLat, RetLon]
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
@import '../common/css/leaflet-geoman.css';
|
.notice-swipe {
|
height: 40px;
|
line-height: 40px;
|
}
|
.footer {
|
position: fixed;
|
z-index: 888;
|
bottom: 0;
|
width: 100%;
|
height: 50px;
|
background: #000000;
|
.header-fot {
|
width: 100%;
|
height: 50px;
|
ul {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
li {
|
height: 12px;
|
line-height: 12px;
|
font-size: 12px;
|
color: #fff;
|
}
|
}
|
}
|
}
|
|
.affirm {
|
width: 75px;
|
height: 34px;
|
background: #00cfaa;
|
border-radius: 3px;
|
font-size: 16px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: rgba(255, 255, 255, 1);
|
line-height: 34px;
|
letter-spacing: 4px;
|
padding-left: 4px;
|
position: fixed;
|
right: 10px;
|
bottom: 70px;
|
z-index: 888;
|
}
|
.hint {
|
width: 268px;
|
height: 24px;
|
background: rgba(0, 0, 0, 0.64);
|
border-radius: 12px;
|
font-size: 11px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
text-align: center;
|
line-height: 24px;
|
color: rgba(255, 255, 255, 1);
|
position: fixed;
|
z-index: 999;
|
top: 10%;
|
left: 50%;
|
margin-left: -134px;
|
}
|
#aa {
|
position: fixed;
|
z-index: -1;
|
top: 0;
|
left: 0;
|
}
|
#bb {
|
position: fixed;
|
z-index: -1;
|
top: 0;
|
left: 0;
|
}
|
|
.restoration {
|
position: fixed;
|
z-index: 888;
|
left: 10px;
|
top: 60px;
|
width: 30px;
|
height: 30px;
|
border-radius: 5px;
|
background: #fff;
|
img {
|
width: 30px;
|
height: 30px;
|
}
|
}
|
|
.list-one {
|
width: 100%;
|
height: 33px;
|
color: #191919;
|
font-size: 16px;
|
line-height: 33px;
|
text-align: center;
|
}
|
.list-two {
|
width: 100%;
|
height: 28px;
|
color: #636363;
|
font-size: 12px;
|
line-height: 28px;
|
}
|
.list-three {
|
height: 66px;
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 20px;
|
li {
|
width: 36px;
|
height: 36px;
|
border-radius: 50%;
|
border-width: 4px;
|
border-style: solid;
|
}
|
}
|
.list-four {
|
width: 100%;
|
.four-box {
|
width: 100%;
|
height: 66px;
|
font-size: 18px;
|
font-weight: 900;
|
.border {
|
width: 346px;
|
border-top: 1px solid #e2e2e2;
|
margin: 0 auto;
|
}
|
.labelstyle {
|
font-size: 14px;
|
font-weight: 400;
|
}
|
}
|
}
|
.list-five {
|
width: 100%;
|
height: 56px;
|
display: flex;
|
justify-content: space-around;
|
p {
|
width: 160px;
|
height: 46px;
|
border-radius: 6px;
|
font-size: 16px;
|
line-height: 46px;
|
&:nth-child(1) {
|
color: #353535;
|
background: #eaeaea;
|
}
|
&:nth-child(2) {
|
color: #f8fffe;
|
background: #00cfaa;
|
}
|
}
|
}
|
|
.shade {
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.6);
|
position: fixed;
|
z-index: 3000;
|
top: 0;
|
.shade-box {
|
width: 320px;
|
height: 270px;
|
background: #fff;
|
position: absolute;
|
border-radius: 5px;
|
top: 30%;
|
left: 50%;
|
margin-left: -160px;
|
.shade-list {
|
width: 260px;
|
height: 178px;
|
margin: 20px auto;
|
overflow-y: scroll;
|
.individual {
|
height: 44px;
|
font-size: 16px;
|
.input-box {
|
height: 44px;
|
border: none;
|
border-bottom: 1px solid #00cfaa;
|
}
|
}
|
}
|
.fot {
|
width: 100%;
|
height: 50px;
|
border-top: 1px solid #ececec;
|
display: flex;
|
justify-self: start;
|
p {
|
font-size: 16px;
|
width: 100%;
|
height: 50px;
|
line-height: 50px;
|
&:nth-child(1) {
|
color: #747474;
|
border-right: 1px solid #ececec;
|
}
|
&:nth-child(2) {
|
color: #00cfaa;
|
}
|
}
|
}
|
}
|
}
|
.search {
|
z-index: 1002;
|
height: 44px;
|
}
|
.mask {
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.6);
|
position: fixed;
|
z-index: 1001;
|
top: 44px;
|
.search_box {
|
width: 100%;
|
height: 120px;
|
background: #fff;
|
overflow-y: scroll;
|
p {
|
font-size: 14px;
|
height: 40px;
|
line-height: 40px;
|
color: #909090;
|
border-top: 1px solid #f3f3f3;
|
}
|
}
|
}
|
</style>
|
