部分修改，及服务器上使用修改

shuishen

2021-08-07 98ee2c764ac5324398e26d1562b75ab27a1040db

部分修改，及服务器上使用修改

 public/json/map.json

@@ -1,3 +1,4 @@
{
  "data": "http://47.49.21.207:7001/PGlS_S_TileMapSever/Maps/YX/EzMap?Serive=getImage&Type=RGB&ZoomOffset=0&Col={col}&Row={row}&Zoom={level}&V=1.0.0"
  "data": "http://47.49.21.207:7001/PGIS_S_TileMapSever/Maps/YX/EzMap?Service=getImage&Type=RGB&ZoomOffset=0&Col={x}&Row={y}&Zoom={z}&V=1.0.0"
}


 src/components/map/main.vue

@@ -11,10 +11,9 @@
         style="height: 100%"></div>
</template>
<script>
import OLCesium from 'olcs/OLCesium.js'
import 'ol/ol.css'
import OlView from 'ol/View.js'
import XYZ from 'ol/source/XYZ'
// import XYZ from 'ol/source/XYZ'
import OlLayerTile from 'ol/layer/Tile.js'
import OlMap from 'ol/Map.js'

@@ -46,15 +45,21 @@

import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import WMTS from 'ol/source/WMTS'

import WMTSTileGrid from 'ol/tilegrid/WMTS'

import Feature from 'ol/Feature.js'
import Point from 'ol/geom/Point.js'
import LineString from 'ol/geom/LineString.js'
import { Icon, Style, Fill, Stroke } from 'ol/style.js'

import start from '@/assets/img/start.png'
import { getWidth, getTopLeft } from 'ol/extent'

import axios from 'axios'
import { get as getProjection } from 'ol/proj'
import XYZ from "ol/source/XYZ";

import start from '@/assets/img/start.png'

export default {
    name: 'Map',
@@ -84,64 +89,112 @@
        }
    },
    mounted () {
        axios.get('/json/map.json').then(res => {
            this.ol2d = new OlMap({
                layers: [
                    new OlLayerTile({
                        zIndex: 4,
                        title: '影像',
                        source: new XYZ({
                            url: res.data.data // 行政区划
        // 本地开发使用
        // this.ol2d = new OlMap({
        //     layers: [
        //         new OlLayerTile({
        //             zIndex: 4,
        //             title: '影像',
        //             source: new XYZ({
        //                 url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal" // 行政区划
        //             })
        //         })
        //         // ,
        //         // new OlLayerTile({
        //         //     zIndex: 5,
        //         //     title: '道路+中文注记',
        //         //     source: new XYZ({
        //         //         url: 'http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
        //         //     })
        //         // })
        //     ],

        //     // 注意地图控件的写法
        //     controls: defaults().extend([
        //         new FullScreen(),
        //         new ScaleLine(),
        //         new MousePosition(),
        //         new Rotate(),
        //         new Attribution()
        //     ]),
        //     target: 'track_map',
        //     view: new OlView({
        //         center: [0, 0],
        //         zoom: 2,
        //         projection: 'EPSG:4326'
        //     })
        // })

        var projection = getProjection("EPSG:4326");
        var projectionExtent = projection.getExtent();
        var size = getWidth(projectionExtent) / 256;
        var resolutions = [];
        for (var z = 2; z < 19; ++z) {//计算比例尺
            resolutions[z] = size / Math.pow(2, z);
        }

        // 正式服务器上使用
        this.ol2d = new OlMap({
            layers: [
                new OlLayerTile({//矢量地图

                    source: new WMTS({
                        url: "http://47.49.21.207:7001/PGIS_S_TileMapServer/Maps/YX",
                        layer: "JX14YGJCIMGL7_L14",
                        style: "default",
                        matrixSet: "JX14YGJCIMGL7_L14",
                        format: "image/png",
                        wrapX: true,
                        tileGrid: new WMTSTileGrid({
                            origin: getTopLeft(projectionExtent),
                            //resolutions: res.slice(0, 15),
                            resolutions: resolutions,
                            matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
                        })
                    })
                    // ,
                    // new OlLayerTile({
                    //     zIndex: 5,
                    //     title: '道路+中文注记',
                    //     source: new XYZ({
                    //         url: 'http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
                    //     })
                    // })
                ],
                    }),

                // 注意地图控件的写法
                controls: defaults().extend([
                    new FullScreen(),
                    new ScaleLine(),
                    // new MousePosition(),
                    new Rotate(),
                    new Attribution()
                ]),
                target: 'track_map',
                view: new OlView({
                    center: [0, 0],
                    zoom: 2,
                    projection: 'EPSG:4326'
                })
            ],

            // 注意地图控件的写法
            controls: defaults().extend([
                new FullScreen(),
                new ScaleLine(),
                // new MousePosition(),
                new Rotate(),
                new Attribution()
            ]),
            target: 'track_map',
            view: new OlView({
                center: [115.85883507433789, 28.708432053474827],
                projection: projection,
                zoom: 11,
                maxZoom: 15,
                minZoom: 1

            })
            window.ol2d = this.ol2d

            var view = this.ol2d.getView()

            view.setCenter([115.85883507433789, 28.708432053474827])

            view.setZoom(13)

            const ol3d = new OLCesium({ map: window.ol2d })
            window.ol3d = ol3d

            this.ol2d.addLayer(this.gunAddlayer)
            this.ol2d.addLayer(this.peopleAddlayer)
            this.ol2d.addLayer(this.carAddlayer)
            this.ol2d.addLayer(this.peopleLineAddlayer)
            this.ol2d.addLayer(this.startPoint)
        })



        window.ol2d = this.ol2d

        var view = this.ol2d.getView()

        view.setCenter([115.85883507433789, 28.708432053474827])

        view.setZoom(13)


        this.ol2d.addLayer(this.gunAddlayer)
        this.ol2d.addLayer(this.peopleAddlayer)
        this.ol2d.addLayer(this.carAddlayer)
        this.ol2d.addLayer(this.peopleLineAddlayer)
        this.ol2d.addLayer(this.startPoint)

    },
    methods: {
        init3D (val) {
            window.ol3d.setEnabled(val)
        },

        addEntitys (item, icon, scale, name, type) {
            this[type].getSource().clear()


 src/config/website.js

@@ -9,7 +9,7 @@
  indexTitle: '智慧保安监管模块',
  clientId: 'saber', // 客户端id
  clientSecret: 'saber_secret', // 客户端密钥
  tenantMode: true, // 是否开启租户模式
  tenantMode: false, // 是否开启租户模式
  tenantId: "000000", // 管理组租户编号
  captchaMode: false, // 是否开启验证码模式
  lockPage: '/lock',

 src/page/login/userlogin.vue

@@ -78,9 +78,9 @@
          //租户ID
          tenantId: "000000",
          //用户名
          username: "admin",
          username: "admin1",
          //密码
          password: "admin",
          password: "123456",
          //账号类型
          type: "account",
          //验证码的值