zhangzl
/
nsgk_mobile
2
0
Fork 0
Código Issues 0 Pull requests 0 Versões 0 Wiki Atividade
Ver código fonte

地图样式修改

rongxin_prod
QI_YUJIE 1 ano atrás
pai
d40ec384a5
commit
9eb7274934
4 arquivos alterados com 431 adições e 5 exclusões
Visão unificada
Opções de diferenças
Mostrar estatísticas Baixar arquivo de patch Baixar arquivo de diferenças
  1. +4
    -2
      src/components/Map/MapGisLine.vue
  2. +424
    -0
      src/components/Map/MapGisTagDTGCopy.vue
  3. +2
    -2
      src/views/sunVillage_info/fixedAssets.vue
  4. +1
    -1
      src/views/sunVillage_info/resource.vue

+ 4
- 2
src/components/Map/MapGisLine.vue Ver arquivo

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<!-- <p class="fuTitle">地块位置绘制</p>--> <!-- <p class="fuTitle">地块位置绘制</p>-->
<div id="full-screen-acceptance" style="width: 100%;height:45vh;">
<div id="full-screen-acceptance" style="width: 100%;height:73vh;">
<div :id=this.uuidMap style="width: 100%;height: 100%"></div> <div :id=this.uuidMap style="width: 100%;height: 100%"></div>
<div id='land-btn-wrap'> <div id='land-btn-wrap'>
<!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" @click="" type="primary">画图</el-button>--> <!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" @click="" type="primary">画图</el-button>-->
@@ -366,7 +366,9 @@ export default {
color: #1E88C7; color: #1E88C7;
text-decoration: none; text-decoration: none;
text-indent: 0; text-indent: 0;
line-height: 20px;
line-height: 30px;
font-size: 28px;
margin: 5px 0 5px;
} }
#land-btn-wrap{ #land-btn-wrap{
position: relative; position: relative;


+ 424
- 0
src/components/Map/MapGisTagDTGCopy.vue Ver arquivo

@@ -0,0 +1,424 @@
<template>
<div>
<div id="full-screen-acceptance" style="width: 100%;height:73vh;">
<div :id=this.uuidMap style="width: 100%;height: 100%"></div>
<div id='land-btn-wrap' v-show="showBtn">
<input :id="this.drawPolygonMap" class="ant-btn ant-btn-red" type="button" value="标记"/>&nbsp;&nbsp;
<!--<input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消"/>&nbsp;&nbsp;-->
<input :id="this.drawResetMap" type="button" class="ant-btn ant-btn-red" value="重置标记"/>
</div>
</div>
<div id="info" style="display: none"></div>
</div>
</template>

<script>
import $ from "jquery";
import {entityGet, treeselect} from "@/api/agriculturalTrusteeship";
import Cookies from "js-cookie";

export default {
data() {
return {
closeMoule: null,
reduction: null,
uuidMap: this.guidProduct(),
drawPolygonMap: this.guidProduct(),
drawResetMap: this.guidProduct(),
};
},
props: ['theGeom','message','showBtn'],
methods: {
//地图加载
formSubmit(){
//父组件监听的名字必须是formSubmit
// 子组件调用父组件的方法并传参
if(this.closeMoule =="" || this.closeMoule == null){
this.$emit('formSubmit', null);
}else{
this.$emit('formSubmit', JSON.stringify(this.closeMoule));
}
},
guidProduct(){
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
},
//地图查看
pointPaceCountryDarw() {
//加载地图编辑
var that = this;
var map;
//var hc_land;
var draw; // global so we can remove it later
var vector_drawing;
//矢量标注样式设置函数，设置image为图标ol.style.Icon
function createLabelStyle() {
return new ol.style.Style({
image: new ol.style.Icon({
//设置图标偏移
anchor: [0.5, 1],
//标注样式的起点位置
anchorOrigin: "top-right",
//X方向单位：分数
anchorXUnits: "fraction",
//Y方向单位：像素
anchorYUnits: "pixels",
//偏移起点位置的方向
offsetOrigin: "top-right",
//透明度
opacity: 0.9,
//图片路径
src: require("../../assets/images/housesteadSurvey/mark.png"),
}),
text: new ol.style.Text({
textAlign: "center", //位置
textBaseline: "middle", //基准线
font: "normal 12px 微软雅黑", //文字样式
//text: "标注点", //文本内容
fill: new ol.style.Fill({
//文本填充样式（即文字颜色)
color: "#ff0000",
}),
}),
zIndex: 9999,
});
}
if (that.message != null && that.message != ""
&& that.message != undefined) {
this.closeMoule = null;
document.getElementById(that.uuidMap).innerHTML = '';
var hc_land;
var draw; // global so we can remove it later
var vector_drawing;
var projection = new ol.proj.Projection({
//地图投影类型
code: "EPSG:3857",
units: "degrees",
//extent:extent
});

var aerial = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "卫星影像图",
});

var yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",
});
//加载地图
map = new ol.Map({
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
layers: [aerial, yingxzi],
projection: projection,
target: that.uuidMap,
view: new ol.View({
//center: ol.proj.fromLonLat([115.452752, 31.789033]),
zoom: 15.9,
minZoom: 5, //地图缩小限制
maxZoom: 18.3, //地图放大限制
}),
});
//图层查询定位开始 ---------start
if(this.message.substring(0,1) =="{"){
var theGeomMap =this.message.replace("Point", "MultiPolygon");
var pointLeft = theGeomMap.replace("[", "[[[[");
var pointRight = pointLeft.replace("]", "]]]]");
hc_land = new ol.layer.Vector({
title: "add Layer",
source: new ol.source.Vector({
projection: projection,
features: new ol.format.GeoJSON().readFeatures("{\n" +
" \"type\": \"Feature\",\n" +
" \"geometry\":" + pointRight + "}"),
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
//矢量图层填充颜色，以及透明度
color: "rgba(204, 255, 204,0.3)",
}),
stroke: new ol.style.Stroke({
//边界样式
color: "#47c68f",
width: 3,
}),
}),
});
}
if(this.message.substring(0,1) =="["){
var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [[[this.message.replaceAll("\"","")]]]});
var leftJoin = zbNew.replace("\"[","[");
var rightJoin = leftJoin.replace("\"]","]");
hc_land = new ol.layer.Vector({
title: "add Layer",
source: new ol.source.Vector({
projection: projection,
features: new ol.format.GeoJSON().readFeatures("{\n" +
" \"type\": \"Feature\",\n" +
" \"geometry\":" + rightJoin + "}"),
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
//矢量图层填充颜色，以及透明度
color: "rgba(204, 255, 204,0.3)",
}),
stroke: new ol.style.Stroke({
//边界样式
color: "#47c68f",
width: 3,
}),
}),
});
}
map.addLayer(hc_land);
var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
//定位查询位置
var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
var newcenterFeature = new ol.Feature({
geometry: new ol.geom.Point(center), //几何信息
name: "标注点",
});
var sourceMapLook = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: sourceMapLook,
});
map.addLayer(vector_drawing);
newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
sourceMapLook.addFeature(newcenterFeature);
map.getView().animate({
// 只设置需要的属性即可
center: center, // 中心点
zoom: 15.9, // 缩放级别
rotation: undefined, // 缩放完成view视图旋转弧度
duration: 1000, // 缩放持续时间，默认不需要设置
});
//图层查询定位结束 ---------end
//开始绘制地图
$("#"+this.drawPolygonMap).click(function () {
map.removeLayer(hc_land);
map.removeLayer(vector_drawing);
that.closeMoule = null;
var source = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: source,
});
map.addLayer(vector_drawing);

function addInteraction() {
draw = new ol.interaction.Draw({
source: vector_drawing.getSource(),
type: "Point",
});
draw.on('drawend', function (evt) {
map.removeInteraction(draw);
var feature = evt.feature;
var geometry = feature.getGeometry();
var coordinate = geometry.getCoordinates();
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate), //几何信息
//name: "标注点",
});
newFeature.setStyle(createLabelStyle()); //设置要素样式
source.addFeature(newFeature);
that.closeMoule = coordinate;
that.reduction = coordinate;
that.formSubmit();
});
map.addInteraction(draw);
}
addInteraction();
});
//清除画图鼠标点击事件
// $("#drawRemove").click(function () {
// //map.addLayer(hc_land);
// map.removeInteraction(draw);
// //map.removeLayer(vector_drawing);
// });
//还原之前图层
$("#" + this.drawResetMap).click(function () {
if(that.reduction !=null) {
map.removeInteraction(draw);
map.removeLayer(vector_drawing);
map.addLayer(hc_land);
newcenterFeature = new ol.Feature({
geometry: new ol.geom.Point(center), //几何信息
//name: "标注点",
});
sourceMapLook = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: sourceMapLook,
});
map.addLayer(vector_drawing);
newcenterFeature.setStyle(createLabelStyle()); //设置要素样式
sourceMapLook.addFeature(newcenterFeature);
that.closeMoule = null;
that.formSubmit();
}
});
}
else{
this.closeMoule = null;
document.getElementById(that.uuidMap).innerHTML = '';
var projection = new ol.proj.Projection({
//地图投影类型
code: "EPSG:3857",
units: "degrees",
//extent:extent
});

var aerial = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "卫星影像图",
});

var yingxzi = new ol.layer.Tile({
source: new ol.source.XYZ({
url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
}),
isGroup: true,
name: "天地图文字标注--卫星影像图",
});
//获取坐标是否存在
var Zb;
var latitude;
var longitude;
//开始定位当前位置
navigator.geolocation.getCurrentPosition(function(position) {
latitude = position.coords.latitude;// 获取纬度
longitude = position.coords.longitude;// 获取经度
});
treeselect().then(res=>{
if (res.code == 200) {
Zb = [res.data[0].lng,res.data[0].lat]
//加载地图
map = new ol.Map({
controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
layers: [aerial, yingxzi],
projection: projection,
logo: 'false',
target: that.uuidMap,
view: new ol.View({
center: ol.proj.fromLonLat(Zb),
//center: ol.proj.fromLonLat([115.452752, 31.789033]),
zoom: 15.9,
minZoom: 5, //地图缩小限制
maxZoom: 18, //地图放大限制
}),
});
}
})

//图层查询定位结束 ---------end
//开始绘制地图
$("#"+this.drawPolygonMap).click(function () {
//map.removeLayer(hc_land);
map.removeLayer(vector_drawing);
that.closeMoule = null;
map.removeInteraction(draw);
var sourceMap = new ol.source.Vector({wrapX: false});
vector_drawing = new ol.layer.Vector({
source: sourceMap,
});
map.addLayer(vector_drawing);

function addInteraction() {
draw = new ol.interaction.Draw({
source: vector_drawing.getSource(),
type: "Point",
});
draw.on('drawend', function (evt) {
map.removeInteraction(draw);
$("#drawRemove").trigger('click');
var feature = evt.feature;
var geometry = feature.getGeometry();
var coordinate = geometry.getCoordinates();
var newFeature = new ol.Feature({
geometry: new ol.geom.Point(coordinate), //几何信息
//name: "标注点",
});
newFeature.setStyle(createLabelStyle()); //设置要素样式
sourceMap.addFeature(newFeature);
that.closeMoule = coordinate;
that.formSubmit();
});
map.addInteraction(draw);
}
addInteraction();

});
//清除画图鼠标点击事件
// $("#drawRemove").click(function () {
// //map.addLayer(hc_land);
// map.removeInteraction(draw);
// //map.removeLayer(vector_drawing);
// });
//还原之前图层
$("#" + this.drawResetMap).click(function () {
map.removeInteraction(draw);
map.removeLayer(vector_drawing);
//map.addLayer(hc_land);
that.closeMoule = null;
that.formSubmit();
});
}
},
},
watch: {},
};
</script>

<style scoped>
#peaceCountryMap {
width: 100%;
height: 100%;
}
.fuTitle {
border-top: 1px solid #e9e9e9;
text-align: center;
padding: 10px 0px 0px 0px;
font-size: 18px;
color: #999;
}
.ant-btn-red {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 30px;
font-size: 28px;
margin: 5px 0 5px;
}
#land-btn-wrap{
position: relative;
width: 25%;
left: 75%;
bottom: 100%;
z-index: 2000;
padding-top: 5%;
}
</style>

+ 2
- 2
src/views/sunVillage_info/fixedAssets.vue Ver arquivo

@@ -59,7 +59,7 @@
</div> </div>
</van-popup> </van-popup>


<van-popup v-model="showMap" lock-scroll position="top" :style="{ height: '32%' }" >
<van-popup v-model="showMap" lock-scroll position="top" :style="{ height: '80%' }" >
<div style="padding: 0;text-align: center"> <div style="padding: 0;text-align: center">
<MapGisTag ref="clickLoading" :showBtn="true" :message="theGeom" v-on:formSubmit="MapTag"></MapGisTag> <MapGisTag ref="clickLoading" :showBtn="true" :message="theGeom" v-on:formSubmit="MapTag"></MapGisTag>
<div style="margin-top: 1.5vh"> <div style="margin-top: 1.5vh">
@@ -81,7 +81,7 @@
updatePermanent updatePermanent
} from "@/api/sunVillage_info/fixedAssets"; } from "@/api/sunVillage_info/fixedAssets";
import request from '@/utils/request' import request from '@/utils/request'
import MapGisTag from "@/components/Map/MapGisTagDTG";
import MapGisTag from "@/components/Map/MapGisTagDTGCopy";
export default { export default {
name: "certificateList", name: "certificateList",
components: { components: {


+ 1
- 1
src/views/sunVillage_info/resource.vue Ver arquivo

@@ -47,7 +47,7 @@
<!-- <span class="xs">已经到底啦</span>--> <!-- <span class="xs">已经到底啦</span>-->
<!-- </div>--> <!-- </div>-->


<van-popup v-model="showMap" lock-scroll position="top" :style="{ height: '52%' }" >
<van-popup v-model="showMap" lock-scroll position="top" :style="{ height: '80%' }" >
<div style="padding: 0;text-align: center"> <div style="padding: 0;text-align: center">
<MapGisLine ref="clickLoading" :message="theGeom" v-on:formSubmit="MapTag"></MapGisLine> <MapGisLine ref="clickLoading" :message="theGeom" v-on:formSubmit="MapTag"></MapGisLine>
<div style="margin-top: 1.5vh"> <div style="margin-top: 1.5vh">


Escrever Pré-visualização
Carregando…
Cancelar
Salvar