소스 검색

Task 定位

rongxin_dev
zhaodengke 2 주 전
부모
커밋
e90c2a5d98
3개의 변경된 파일118개의 추가작업 그리고 4개의 파일을 삭제
  1. BIN
      src/assets/images/location/mark.png
  2. +59
    -2
      src/components/Map/MapGisLine.vue
  3. +59
    -2
      src/components/Map/MapGisTagDTGCopy.vue

BIN
src/assets/images/location/mark.png 파일 보기

Before After
Width: 48  |  Height: 48  |  Size: 482 B

+ 59
- 2
src/components/Map/MapGisLine.vue 파일 보기

@@ -115,7 +115,7 @@ export default {
console.log('定位失败: ' + error.message); console.log('定位失败: ' + error.message);
getQueryLand().then(callback); getQueryLand().then(callback);
}, },
{ enableHighAccuracy: true, timeout: 10000 }
{ enableHighAccuracy: true, timeout: 5000 }
); );
return; return;
} }
@@ -124,6 +124,22 @@ export default {
console.log('使用地区坐标定位'); console.log('使用地区坐标定位');
getQueryLand().then(callback); getQueryLand().then(callback);
}, },
getDeptLocation(callback) {
getQueryLand().then((response) => {
if (response.code == 200) {
let InsertCode = response.data;
if (InsertCode != null) {
var lat = InsertCode.lat;
var lng = InsertCode.lng;
if(lat !=null && lng !=null && lat !="" && lng !=""){
callback(response);
return;
}
}
}
this.getCurrentLocation(callback);
});
},
//地图查看 //地图查看
drawingPaceCountryLine() { drawingPaceCountryLine() {
//加载地图编辑 //加载地图编辑
@@ -132,6 +148,45 @@ export default {
//var hc_land; //var hc_land;
var draw; // global so we can remove it later var draw; // global so we can remove it later
var vector_drawing; var vector_drawing;

var mark_layer = null;
function addMark(lng, lat) {
if(!mark_layer)
{
mark_layer = new ol.layer.Vector({
source: new ol.source.Vector(),
});
map.addLayer(mark_layer);
}
else
mark_layer.getSource().clear();

let newFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([lng, lat])), //几何信息
//name: "标注点",
});
newFeature.setStyle(new ol.style.Style({
image: new ol.style.Icon({
//设置图标偏移
anchor: [0.5, 1],
//标注样式的起点位置
anchorOrigin: "top-right",
//X方向单位:分数
anchorXUnits: "fraction",
//Y方向单位:像素
anchorYUnits: "fraction",
//偏移起点位置的方向
offsetOrigin: "top-right",
//透明度
opacity: 0.9,
//图片路径
src: require('../../assets/images/location/mark.png'),
}),
zIndex: 9999,
}));
mark_layer.getSource().addFeature(newFeature);
}

if (that.message != null && that.message != "" if (that.message != null && that.message != ""
&& that.message != undefined) { && that.message != undefined) {
document.getElementById(that.uuidMap).innerHTML = ''; document.getElementById(that.uuidMap).innerHTML = '';
@@ -359,6 +414,7 @@ export default {
}else { }else {
Zb =[115.452752, 31.789033]; Zb =[115.452752, 31.789033];
} }
addMark(lng,lat);
map.getView().animate({ map.getView().animate({
// 只设置需要的属性即可 // 只设置需要的属性即可
center: ol.proj.fromLonLat(Zb), // 中心点 center: ol.proj.fromLonLat(Zb), // 中心点
@@ -398,7 +454,7 @@ export default {
}); });
//获取坐标是否存在 //获取坐标是否存在
var Zb; var Zb;
this.getCurrentLocation((response) => {
this.getDeptLocation((response) => {
if (response.code == 200) { if (response.code == 200) {
let InsertCode = response.data; let InsertCode = response.data;
if (InsertCode != null) { if (InsertCode != null) {
@@ -524,6 +580,7 @@ export default {
}else { }else {
Zb =[115.452752, 31.789033]; Zb =[115.452752, 31.789033];
} }
addMark(lng,lat);
map.getView().animate({ map.getView().animate({
// 只设置需要的属性即可 // 只设置需要的属性即可
center: ol.proj.fromLonLat(Zb), // 中心点 center: ol.proj.fromLonLat(Zb), // 中心点


+ 59
- 2
src/components/Map/MapGisTagDTGCopy.vue 파일 보기

@@ -111,7 +111,7 @@
console.log('定位失败: ' + error.message); console.log('定位失败: ' + error.message);
getQueryLand().then(callback); getQueryLand().then(callback);
}, },
{ enableHighAccuracy: true, timeout: 10000 }
{ enableHighAccuracy: true, timeout: 5000 }
); );
return; return;
} }
@@ -120,6 +120,22 @@
console.log('使用地区坐标定位'); console.log('使用地区坐标定位');
getQueryLand().then(callback); getQueryLand().then(callback);
}, },
getDeptLocation(callback) {
getQueryLand().then((response) => {
if (response.code == 200) {
let InsertCode = response.data;
if (InsertCode != null) {
var lat = InsertCode.lat;
var lng = InsertCode.lng;
if(lat !=null && lng !=null && lat !="" && lng !=""){
callback(response);
return;
}
}
}
this.getCurrentLocation(callback);
});
},
//地图查看 //地图查看
pointPaceCountryDarw() { pointPaceCountryDarw() {
//加载地图编辑 //加载地图编辑
@@ -128,6 +144,45 @@
//var hc_land; //var hc_land;
var draw; // global so we can remove it later var draw; // global so we can remove it later
var vector_drawing; var vector_drawing;

var mark_layer = null;
function addMark(lng, lat) {
if(!mark_layer)
{
mark_layer = new ol.layer.Vector({
source: new ol.source.Vector(),
});
map.addLayer(mark_layer);
}
else
mark_layer.getSource().clear();

let newFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([lng, lat])), //几何信息
//name: "标注点",
});
newFeature.setStyle(new ol.style.Style({
image: new ol.style.Icon({
//设置图标偏移
anchor: [0.5, 1],
//标注样式的起点位置
anchorOrigin: "top-right",
//X方向单位:分数
anchorXUnits: "fraction",
//Y方向单位:像素
anchorYUnits: "fraction",
//偏移起点位置的方向
offsetOrigin: "top-right",
//透明度
opacity: 0.9,
//图片路径
src: require('../../assets/images/location/mark.png'),
}),
zIndex: 9999,
}));
mark_layer.getSource().addFeature(newFeature);
}

//矢量标注样式设置函数,设置image为图标ol.style.Icon //矢量标注样式设置函数,设置image为图标ol.style.Icon
function createLabelStyle() { function createLabelStyle() {
return new ol.style.Style({ return new ol.style.Style({
@@ -399,6 +454,7 @@
}else { }else {
Zb =[115.452752, 31.789033]; Zb =[115.452752, 31.789033];
} }
addMark(lng,lat);
map.getView().animate({ map.getView().animate({
// 只设置需要的属性即可 // 只设置需要的属性即可
center: ol.proj.fromLonLat(Zb), // 中心点 center: ol.proj.fromLonLat(Zb), // 中心点
@@ -440,7 +496,7 @@
//获取坐标是否存在 //获取坐标是否存在
var Zb; var Zb;
//开始定位当前位置 //开始定位当前位置
this.getCurrentLocation(res => {
this.getDeptLocation(res => {
if (res.code == 200) { if (res.code == 200) {
let lat = res.data.lat; let lat = res.data.lat;
let lng = res.data.lng; let lng = res.data.lng;
@@ -601,6 +657,7 @@
}else { }else {
Zb =[115.452752, 31.789033]; Zb =[115.452752, 31.789033];
} }
addMark(lng,lat);
map.getView().animate({ map.getView().animate({
// 只设置需要的属性即可 // 只设置需要的属性即可
center: ol.proj.fromLonLat(Zb), // 中心点 center: ol.proj.fromLonLat(Zb), // 中心点


불러오는 중...
취소
저장