第六章vue配置supermap iserver和地图发布-[Vue、Django、supermap iserver和gerapy的生态旅游web系统开发]

yopo_AG

2024-04-16 帮助1人

本章主要介绍在vue中配置supermap iserver及利用supermap iserver发布地图。

主要配置leaflet和webgl,先将官方提供的库放在public下：

学新通

接着配置：

//public文件夹index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="<%= BASE_URL %>js/include-web.js"></script>
<title>生态旅游资源监管系统</title>
<link rel="stylesheet" href="<%= BASE_URL %>webgl/Cesium/Widgets/widgets.css">
<link rel="stylesheet" href="<%= BASE_URL %>webgl/webgl/css/pretty.css">
<script src="<%= BASE_URL %>leaflet/include-leaflet.js"></script>
<script src="<%= BASE_URL %>webgl/js/config.js"></script>
<script src="<%= BASE_URL %>webgl/Build/Cesium/Cesium.js"></script>
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>

配置好了打开supermap-iserver服务便可直接使用，首先在服务管理中发布地图

学新通

接着在页面中配置

<template>
<div class="sc">
<div class="title">企业空间分布</div>
<div class="map" id="myMap"></div>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
onPageLoad() {
var map, layer;
// 设置访问的GIS服务地址
var url1 = "/supermap/map-company/rest/maps/.....";
// 创建地图对象
map = L.map("myMap", {
center: [34, 107.2],//第一维数字增大向下，第二维数字减小向右
maxZoom: 81,
attributionControl: false,
zoom: 8,//设置缩放比例
crs: L.CRS.TianDiTu_WGS84
});
L.supermap.tiandituTileLayer({
key: "0d6442aa9b3b7a2ad47c1a9e2f5cbf81"
}).addTo(map);
L.supermap.tiandituTileLayer({
isLabel: true,
key: "0d6442aa9b3b7a2ad47c1a9e2f5cbf81"
}).addTo(map);
L.supermap.tiledMapLayer(url1, {
transparent: true, opacity: 0.6
}).addTo(map);
document.getElementsByClassName("iclient-leaflet-logo")[0].style.display = "none";
initEditView();//配置图例和比例尺
function initEditView() {
var legendView = L.control({position: 'bottomright'});
legendView.onAdd = function () {
this._div = L.DomUtil.create('div', 'leaflet-control-clegend');
var legendimg = document.createElement('img');
legendimg.id = 'leaflet-control-clegend';
legendimg.type = 'img';
legendimg.src = require('../../assets/image/QY.png');
this._legendimg = legendimg;
this._div.appendChild(this._legendimg);
return this._div;
};
legendView.addTo(map);
var scaleView = L.control({position: 'topright'});
scaleView.onAdd = function () {
this._div = L.DomUtil.create('div', 'leaflet-control-clegend');
var scaleimg = document.createElement('img');
scaleimg.id = 'leaflet-control-clegend';
scaleimg.type = 'img';
scaleimg.src = require('../../assets/image/scale.png');
this._scaleimg = scaleimg;
this._div.appendChild(this._scaleimg);
return this._div;
};
scaleView.addTo(map);
}
var url2 = "http://localhost:8090/iserver/services/data-company/rest/data"
query();
var greenIcon = L.icon({
iconUrl: require('../../assets/image/company.png'),
iconSize: [18, 30],
});
function query() {
var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
queryParameter: {
name: "公司企业@商业监管系统",
attributeFilter: "id>=1"
},
toIndex: -1,
datasetNames: ["商业监管系统:公司企业"]
});
L.supermap
.featureService(url2)
.getFeaturesBySQL(sqlParam, function (serviceResult) {
var features = L.geoJSON(serviceResult.result.features);
var a = Object.values(features._layers);
for (var i = 0; i < a.length; i ) {
var b = Object.values(a[i]._latlng);
var boss = a[i].feature.properties['BOSS'];
var area = a[i].feature.properties['AREA'];
var location = a[i].feature.properties['LOCATION'];
var name = a[i].feature.properties['NAME'];
var type = a[i].feature.properties['TYPE'];
var assets = a[i].feature.properties['ASSETS'];
var createday = a[i].feature.properties['CREATEDAY'];
createday = createday.substr(0, createday.length - 2);
var createmonth = a[i].feature.properties['CREATEMONT'];
createmonth = createmonth.substr(0, createmonth.length - 2);
var createyear = a[i].feature.properties['CREATEYEAR'];
createyear = createyear.substr(0, createyear.length - 2);
var date = createyear '年' createmonth '月' createday '日';
var d = '[公司]:' name '<br>' '[类型:]' type '<br>' '[成立时间:]' date '<br>' '[资产]:' assets '万<br>' '[负责人]:' boss '<br>' '[区域]:' area '<br>' '[地址]:' location;
var marker = L.marker(b, {icon: greenIcon}).addTo(map)
.bindPopup(d);//点击查询功能
}
});
}
}
},
mounted() {
this.onPageLoad()
}
}
</script>

效果：

学新通

上一章-第五章：element、echarts及axios-[基于Vue、Django、supermap iserver和gerapy的生态旅游web系统开发实例]

下一章-第七章：空间查询与卷帘操作-[基于Vue、Django、supermap iserver和gerapy的生态旅游web系统开发实例]

这篇好文章是转载于：学新通技术网

第六章vue配置supermap iserver和地图发布-[Vue、Django、supermap iserver和gerapy的生态旅游web系统开发]

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐