Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
f2021751 by 杨威
Options

地图定位及其样式功能

1 parent 89928441
Inline Side-by-side
Showing 6 changed files with 111 additions and 12 deletions
<template>
<template>
<div>
<div id="changemap">
<div v-for="(n,i) in layerArr" :key="i">
......@@ -15,6 +15,7 @@
</div>
</template>
<script>
import {maps} from '@/libs/map/mapUtils'
export default {
props:{
viewId:{
......@@ -28,7 +29,7 @@
{
img: "shiliang.png",
text: "矢量图",
basemap: '' //hybrid img
basemap: 'osm' //hybrid img
},
{
img: "yingxiang.png",
......@@ -40,15 +41,14 @@
},
methods: {
change(index, basemap) {
debugger
/*var view = maps.threeDView,map = null;
var view = maps[this.viewId],map = null;
if(view){
map = view.map;
}else {
console.log("mapView不存在");
}
map.basemap = basemap; // streets
index > 0 && this.layerArr.unshift(this.layerArr.splice(index, 1)[0]);*/
index > 0 && this.layerArr.unshift(this.layerArr.splice(index, 1)[0]);
}
}
};
......
......@@ -10,12 +10,16 @@
<div class="searchCondition" v-if="isShowCondition">
<ul>
<li @click="fieldName = 'ZDDM'">
<span :class="fieldName == 'ZDDM'?'active':''">
<i class="iconfont iconzongdidaima"></i>
<span>宗地代码</span>
</span>
</li>
<li @click="fieldName = 'BDCDYH'">
<span :class="fieldName == 'BDCDYH'?'active':''">
<i class="iconfont iconbudongchandanyuanhao"></i>
<span>不动产单元号</span>
</span>
</li>
</ul>
</div>
......@@ -386,7 +390,6 @@ export default {
}
}
layerAndResult.features.push(feature);
debugger
self.results.push(layerAndResult);
}
}
......@@ -439,6 +442,7 @@ export default {
border-radius: 4px;
margin-top: 6px;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.12);
position: relative;
ul{
//height: 40px;
display: inline-flex;
......@@ -454,6 +458,8 @@ export default {
i{
font-size: 24px;
margin-right: 3px;
position: relative;
top: 2px;
}
span{
font-size: 14px;
......@@ -465,6 +471,10 @@ export default {
.iconbudongchandanyuanhao{
color: #F39835;
}
.active{
border-bottom: 1.5px solid #409eff;
padding-bottom: 5px;
}
}
.searchResult{
margin-top: 3px;
......
import {loadModules} from 'esri-loader'
import {loadModules} from 'esri-loader'
import {maps} from '@/libs/map/mapUtils'
import graphicSymbol from '@/assets/json/graphicSymbol.json'
import point from "shapefile/shp/point";
......@@ -136,5 +136,45 @@ export default {
})
},
//定位到一个点上
postionToPoint(viewId,x,y){
var self = this;
loadModules([
"esri/geometry/Point",
"esri/symbols/PictureMarkerSymbol",
"esri/geometry/coordinateFormatter",
"esri/Graphic"
]).then(([
Point,
PictureMarkerSymbol,
coordinateFormatter,
Graphic
])=>{
var point = new Point({
x:x,
y:y,
});
var view = maps[viewId];
var symbol = new PictureMarkerSymbol({
url:require('@assets/images/map/postion.png'),
width:"32px",
height:'32px'
});
view.graphics.removeAll();
view.graphics.add(new Graphic({
geometry:point,
symbol:symbol
}));
view.center = point;
}).catch(err => {
console.log(err);
})
},
//清除定位图层
clearPostionLayer(viewId){
var view = maps[viewId];
view.graphics.removeAll();
}
}
}
\ No newline at end of file
......
......@@ -9,7 +9,7 @@
<i class="iconfont iconkongjianchaxun"></i>
<span>空间查询</span>
</li> -->
<li>
<li @click="pointPostion">
<i class="iconfont iconzuobiaodingwei"></i>
<span>定位</span>
</li>
......@@ -46,7 +46,19 @@
<span>清除</span>
</li>
</ul>
<div class="postionDialog" v-if="isPostion">
<el-form :inline="true" :model="postionParams" size="small">
<el-form-item label="经度:">
<el-input v-model="postionParams.x" placeholder="请输入经度"></el-input>
</el-form-item>
<el-form-item label="纬度:">
<el-input v-model="postionParams.y" placeholder="请输入经度"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="toPostion">定位</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
......@@ -73,7 +85,12 @@ export default {
selectResLayerId:"",
features:[],
resultLayers:[],
results:[]
results:[],
postionParams:{
x:"",
y:""
},
isPostion:false
}
},
methods:{
......@@ -91,6 +108,10 @@ export default {
clear(){
this.measure(this.viewId,null);
this.$parent.closeResultDialog();
this.$parent.closeBufferDialog();
//清除定位 关闭定位
this.clearPostionLayer(this.viewId);
this.isPostion = false;
},
info(){
var view = maps[this.viewId];
......@@ -140,6 +161,25 @@ export default {
throw (err);
})
});
},
//定位
pointPostion(){
//清除参数 清除图层
this.clearPostionLayer(this.viewId);
for(var key in this.postionParams){
this.postionParams[key] = "";
}
this.isPostion = true;
},
toPostion(){
if(!this.postionParams.x){
this.$message.warning("请输入经度!!!!");
return;
}else if(!this.postionParams.y){
this.$message.warning("请输入纬度!!!!");
return;
}
this.postionToPoint(this.viewId,this.postionParams.x,this.postionParams.y);
}
}
......@@ -151,7 +191,6 @@ export default {
position: relative;
display: flex;
justify-content: space-around;
line-height: 48px;
background-color: #FFFFFF;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.18);
border-radius: 4px;
......@@ -165,7 +204,7 @@ export default {
height: 24px;
line-height: 24px;
i{
font-size:16px;
font-size:20px;
color: #8C8E91;
position: relative;
top: 2px;
......@@ -182,6 +221,11 @@ export default {
cursor:pointer
}
}
.postionDialog{
position: absolute;
top: 58px;
}
}
</style>
\ No newline at end of file
......
......@@ -113,6 +113,7 @@
:value="item.dm">
</el-option>
</el-select>
<div class="towSelect">
<el-select v-model="bufferParams.selectDjzq" filterable size="small" placeholder="请选择地籍子区">
<el-option
v-for="(item,index) in djzqList"
......@@ -122,6 +123,7 @@
</el-option>
</el-select>
</div>
</div>
<div class="contentItem">
<span>缓冲距离：</span>
<el-input-number :min="0" v-model="bufferParams.distance" size="small"></el-input-number> 米
......@@ -529,6 +531,9 @@
cursor:pointer
}
}
.towSelect{
margin-left: 100px;
}
}
.buttonDiv{
text-align: center;
......