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

本文链接：https://blog.csdn.net/yopo_AG/article/details/123248206

本章主要介绍在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>
    <!-- webgl 样式库 -->
    <link rel="stylesheet" href="<%= BASE_URL %>webgl/Cesium/Widgets/widgets.css">
    <link rel="stylesheet" href="<%= BASE_URL %>webgl/webgl/css/pretty.css">
    <!-- leaflet js 资源 -->
    <script src="<%= BASE_URL %>leaflet/include-leaflet.js"></script>
    <!-- webgl 资源 -->
    <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>
<!-- built files will be auto injected -->
</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>

效果：