.
This commit is contained in:
Iruka
parent
9a23fbc997
commit
5c08a56320
@ -3,6 +3,9 @@
|
||||
<web-view ref="mapRef" :webview-styles="webviewStyles" src="/static/html/index-map.html"
|
||||
@message="getMessage" />
|
||||
</view>
|
||||
<!-- 地块选择 -->
|
||||
<custom-select-land ref="landRef" :data="ijs.companys" :defaultSelect="ijs.land" @getLand="getLand"
|
||||
@select="landChange" />
|
||||
</template>
|
||||
<script>
|
||||
import store from "@/store"
|
||||
@ -66,12 +69,16 @@
|
||||
switch (parameter.action) {
|
||||
case 'onLoad': //初始化完成
|
||||
const mapkey = import.meta.env.VITE_APP_TIAN_DI_TU_KEY;
|
||||
const centerPoint = [92.00391, 35.24562]; //默认乌鲁木齐
|
||||
const centerPoint = [87.624947, 43.791789]; //默认乌鲁木齐
|
||||
that.sendHtmlData("loadMap", {
|
||||
key: mapkey,
|
||||
centerPoint: centerPoint,
|
||||
});
|
||||
break;
|
||||
case 'select-land': //初始化完成
|
||||
console.error("select-land2")
|
||||
that.$refs.landRef.open();
|
||||
break;
|
||||
case 'map-navigation': //地图导航
|
||||
const coordinate = JSON.parse(parameter.data);
|
||||
that.openAmapNavigation(coordinate[1], coordinate[0], "地块地址");
|
||||
|
||||
@ -14,16 +14,15 @@
|
||||
<div id="map">
|
||||
<!-- 头部 -->
|
||||
<div class="nav-bar">
|
||||
<div style="font-size: 0.84375rem;">地块</div>
|
||||
<div style="font-size: 0.84375rem;min-width: 60px;"
|
||||
onclick="event.stopPropagation();PageHandle.selectLand();">地块</div>
|
||||
<div style="font-size: 1.125rem;">测试地块</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<!-- 搜索 -->
|
||||
<div class="search-box" onclick="event.stopPropagation();PageHandle.openMapSearch(true)">
|
||||
<div class="search">
|
||||
<i class="iconfont icon-sousuo"></i>
|
||||
<span>查找地点</span>
|
||||
<div class="text">搜索</div>
|
||||
<!-- 工具 -->
|
||||
<div class="below">
|
||||
<div onclick="event.stopPropagation();PageHandle.toCenterPoint()">
|
||||
<i class="iconfont icon-dingwei"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图层 -->
|
||||
@ -34,108 +33,6 @@
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 工具 -->
|
||||
<div class="below">
|
||||
<div onclick="event.stopPropagation();PageHandle.toCenterPoint()">
|
||||
<i class="iconfont icon-dingwei"></i>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.navigation() ">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-luxian"></use>
|
||||
</svg>
|
||||
<span>路线</span>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerTool(this)">
|
||||
<span>圆形</span>
|
||||
<div class="markerTool paddle hide" name="circle">
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this,1)">
|
||||
<div class="btn">开始</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this,2)">
|
||||
<div class="btn">删除</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this)">
|
||||
<div class="btn">结束</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerTool(this)">
|
||||
<span>矩形</span>
|
||||
<div class="markerTool paddle hide" name="rectangle">
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this,1)">
|
||||
<div class="btn">开始</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this,2)">
|
||||
<div class="btn">删除</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this)">
|
||||
<div class="btn">结束</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerTool(this)">
|
||||
<span>多边形</span>
|
||||
<div class="markerTool paddle hide" name="polygon">
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this,1)">
|
||||
<div class="btn">开始</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this,2)">
|
||||
<div class="btn">删除</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this)">
|
||||
<div class="btn">结束</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerTool(this)">
|
||||
<span>线</span>
|
||||
<div class="markerTool paddle hide" name="polyline">
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this,1)">
|
||||
<div class="btn">开始</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this,2)">
|
||||
<div class="btn">删除</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this)">
|
||||
<div class="btn">结束</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerTool(this)">
|
||||
<span>测距</span>
|
||||
<div class="markerTool paddle hide" name="ranging">
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this,1)">
|
||||
<div class="btn">开始</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this,2)">
|
||||
<div class="btn">删除</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.markerToolHandle(this)">
|
||||
<div class="btn">结束</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div onclick="event.stopPropagation();PageHandle.deleteDrawing(this)" name="delete">
|
||||
<span>删除</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 搜索弹出 -->
|
||||
<div class="pop-up hide" id="mapsearch">
|
||||
<div class="search">
|
||||
<i class="iconfont icon-xiazai6"
|
||||
onclick="event.stopPropagation();PageHandle.openMapSearch(false)"></i>
|
||||
<input id="search-input" class="input" type="text" placeholder="查找地点111" />
|
||||
<div class="text" onclick="PageHandle.mapSearch()">搜索</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<ul>
|
||||
<li>
|
||||
<i class="iconfont icon-address"></i>
|
||||
<span>西安市</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图层弹出 -->
|
||||
<div class="switchLayer LAYER hide">
|
||||
<div class="title">
|
||||
@ -184,7 +81,6 @@
|
||||
if (res["h5"]) {
|
||||
$(".search-box").css('bottom', '1px')
|
||||
}
|
||||
postToastToApp("测试提示消息");
|
||||
postMessageToApp('onLoad');
|
||||
});
|
||||
});
|
||||
@ -231,100 +127,9 @@
|
||||
|
||||
/********************************** 页面操作 **********************************/
|
||||
var PageHandle = {
|
||||
openMapSearch(type) { //显示搜索界面
|
||||
MapUtil.closeAllPainting();
|
||||
$("#search-input").val("");
|
||||
if (type) {
|
||||
$("#mapsearch").removeClass("hide").addClass("show");
|
||||
$("#search-input").focus();
|
||||
} else {
|
||||
$("#mapsearch").removeClass("show").addClass("hide");
|
||||
}
|
||||
$("#mapsearch").find('.list').empty();
|
||||
},
|
||||
mapSearch(item) { //搜索
|
||||
const value = $("#search-input").val();
|
||||
if (value == null || value == '') {
|
||||
return;
|
||||
}
|
||||
const that = this;
|
||||
if (item && item.address && item.lonlat) {
|
||||
that.openMapSearch(false);
|
||||
const [lat, lng] = item.lonlat.split(",").map(Number);
|
||||
MapUtil.toCenterPoint(lng, lat);
|
||||
MapUtil.setCenterPoint(lng, lat);
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
keyWord: value, //搜索的关键字
|
||||
mapBound: "47.95898437500239,7.759699085623154,162.04101562500443,56.875842480765385",
|
||||
// mapBound: "73.37,21.13,135.25,53.65", //查询的地图范围
|
||||
level: 3, //目前查询的级别 String 必填 1-18级
|
||||
queryType: 1, //搜索类型 String 必填 1:普通搜索（含地铁公交） 7：地名搜索
|
||||
start: 0, //返回结果起始位（用于分页和缓存）默认0
|
||||
count: 10, //返回的结果数量（用于分页和缓存）
|
||||
};
|
||||
if (item && item.value) {
|
||||
params.specify = item.value;
|
||||
}
|
||||
const searchUrl = `https://api.tianditu.gov.cn/v2/search?` +
|
||||
`postStr=${encodeURIComponent(JSON.stringify(params))}` +
|
||||
`&type=query` +
|
||||
`&tk=${MapUtil.key}`;
|
||||
axios.get(searchUrl).then(function(response) {
|
||||
if (response.status === 200) {
|
||||
that.handleSearchResponse(response.data);
|
||||
}
|
||||
}).catch(function(error) {
|
||||
postToastToApp('搜索出错:', error.response ? error.response.data : error.message);
|
||||
});
|
||||
},
|
||||
handleSearchResponse(res) { //搜索结果处理
|
||||
if (res.resultType !== 1 && res.resultType !== 2 && res.resultType !== 3) {
|
||||
$("#mapsearch").find('.list').remove();
|
||||
return;
|
||||
}
|
||||
let cityOptions = [];
|
||||
switch (res.resultType) {
|
||||
case 1:
|
||||
cityOptions = res.pois.map(v => ({
|
||||
label: v.name,
|
||||
value: v.nid,
|
||||
address: v.address,
|
||||
lonlat: v.lonlat,
|
||||
type: 1
|
||||
}));
|
||||
break;
|
||||
case 2:
|
||||
cityOptions = res.statistics.allAdmins.map(v => ({
|
||||
label: v.adminName,
|
||||
value: v.adminCode,
|
||||
count: v.count,
|
||||
lonlat: v.lonlat,
|
||||
type: 2,
|
||||
isleaf: v.isleaf
|
||||
}));
|
||||
break;
|
||||
case 3:
|
||||
this.openMapSearch(false);
|
||||
const [lat, lng] = res.area.lonlat.split(",").map(Number);
|
||||
MapUtil.toCenterPoint(lng, lat);
|
||||
MapUtil.setCenterPoint(lng, lat);
|
||||
break;
|
||||
}
|
||||
if (cityOptions.length > 0) {
|
||||
const that = this;
|
||||
let $html = $("<ul></ul>")
|
||||
cityOptions.forEach(item => {
|
||||
var $li = $(`<li><i class="iconfont icon-address"></i><span>${item.label}</span></li>`);
|
||||
$li.click(function() {
|
||||
that.mapSearch(item);
|
||||
})
|
||||
$html.append($li);
|
||||
});
|
||||
$("#mapsearch").find('.list').empty();
|
||||
$("#mapsearch").find('.list').append($html);
|
||||
}
|
||||
selectLand() {
|
||||
console.error("select-land1");
|
||||
postMessageToApp('select-land', null);
|
||||
},
|
||||
openSwitchLayer(type) { //打开图层选择
|
||||
if (type) {
|
||||
@ -362,52 +167,7 @@
|
||||
navigation() { //导航
|
||||
postMessageToApp('map-navigation', JSON.stringify(MapUtil.centerPoint));
|
||||
},
|
||||
markerTool(dom) { //绘图工具
|
||||
// 阻止事件冒泡
|
||||
if ($(dom).find(".paddle").hasClass('show')) {
|
||||
$(dom).find(".paddle").removeClass('show').addClass('hide');
|
||||
$(dom).parent().removeClass('show').addClass('hide');
|
||||
} else {
|
||||
$(".markerTool").removeClass('show').addClass('hide');
|
||||
$(dom).find(".paddle").removeClass('hide').addClass('show');
|
||||
}
|
||||
},
|
||||
markerToolHandle(dom, type) { //绘制工具操作类型
|
||||
$(dom).parent().removeClass('show').addClass('hide');
|
||||
const key = $(dom).parent().attr("name");
|
||||
MapUtil.closeAllPainting(key);
|
||||
switch (key) {
|
||||
case "circle": //圆形工具
|
||||
MapUtil.circle(type);
|
||||
break;
|
||||
case "rectangle": //矩形工具
|
||||
MapUtil.rectangle(type);
|
||||
break;
|
||||
case "polygon": //多边形工具
|
||||
MapUtil.polygon(type);
|
||||
break;
|
||||
case "polyline": //线工具
|
||||
MapUtil.polyline(type);
|
||||
break;
|
||||
case "ranging": //测距
|
||||
MapUtil.ranging(type);
|
||||
break;
|
||||
}
|
||||
},
|
||||
deleteDrawing(dom) { //删除状态
|
||||
MapUtil.closeAllPainting();
|
||||
if ($(dom).attr('name') == 'delete') {
|
||||
//删除模式
|
||||
$(dom).attr('name', "view")
|
||||
$(dom).css('background', "red");
|
||||
MapUtil.deleteDrawing = true;
|
||||
} else {
|
||||
//查看模式
|
||||
$(dom).attr('name', "delete")
|
||||
$(dom).css('background', "#fff");
|
||||
MapUtil.deleteDrawing = false;
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -1060,12 +820,12 @@
|
||||
|
||||
.nav-bar {
|
||||
color: #fff;
|
||||
padding: 0 10px;
|
||||
padding: 40px 10px 0 10px;
|
||||
position: absolute;
|
||||
z-index: 1100;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
height: 44px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user