zxl-map v1.0.38

zxl-map 公共地图组件

组件安装

npm install zxl-map

组件使用

<template>
    <zxl-map
        ref="map"
        :show-tool-bar="false" <!--是否显示工具条-->
        :show-search-box="false" <!--是否显示搜索框-->
        :show-eagle-eye="false" <!--是否显示鹰眼图-->
        :show-lng-lat="false" <!--是否显示经纬度-->
        :sceneConfig="sceneConfig" <!--场景配置-->
        :points="points" <!--动态绘制点-->
        :init3DModel="init3DModel" <!--初始三维模型-->
        @doSearch="doSearch"
        @showDetail="showDetail"
    />
</template>

<script>
export default {
    data() {
        return {
            sceneConfig: {
                defaultCenter: {
                    heading: 6.250662033929313,
                    pitch: -0.44332176076166263,
                    roll: 6.283185307179586,
                    x: 104.36727635586206,
                    y: 28.7737225791012,
                    z: 2232.3921507203486
                }
            },
            points: [
                { id: '1', type: '1', name: '人员', lnglat: '104.37485,28.81644' },
                { id: '2', type: '2', name: '房屋', lnglat: '104.36914,28.82' },
                { id: '3', type: '3', name: '物联', lnglat: '104.36252,28.8235' },
                { id: '4', type: '4', name: '事件1', lnglat: '104.38041,28.81267' },
                { id: '5', type: '4', name: '事件2', lnglat: '104.38397,28.81304' }
            ],
            init3DModel: {
                type: 's3m',
                url: ''
            }
        }
    },
    methods: {
        doSearch(searchKey) {

        },
        showDetail(data) {

        }
    }
}

</script>

常用方法

• 全图

this.$refs.map.goHome()

• 定位

this.$refs.map.flyTo(x, y)

• 截屏

this.$refs.map.screenshot()

• 画多边形

this.$refs.map.drawPolygon(polygon, {id: '', name: ''})

• 画文字

this.$refs.map.drawText(text, {id: '', name: ''})

• 画光墙

this.$refs.map.drawWall(polygon)