火星地图插件

HTML

<!-- 地图容器 -->
<div id='GEOVISContainer'></div>

初始化地图、给图层添加单击事件

<script>
import hxMap from "@/utils/hxMap"
export default {
    name: "GeovisMap",
    data() {
        return {
            
        }
    },
    mounted() {
        this.initMap();
    },
    methods: {
        //初始化地图
        initMap() {
            // 初始化地图方法
	        hxMap.initMap("GEOVISContainer", () => {
		    HaynGlobe.Layer.addLayerWTMS("http://t0.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=51b509975686843c6e10e05785d00a49")
            // 加载地形数据
		    hxMap.addDemLayer()
            // 批量添加图层
            // 我添加了一个myLayer的图层，后续所有this.myLayer都是对这个图层的操作
		    hxMap.addLayer(this, ['myLayer', 'equNameLayer'])
            hxMap.resgister.graphicClick(this.pointGroup,(graphicItem)=>{
                // 图形转换为json串=>graphicItem 图形
                let signJson = hxMap.conversion.toJson(graphicItem)
                if(signJson.properties.data&&signJson.properties.data.iconType=='alarm'){
                    this.$refs.details.openDetail(signJson.properties.data);
                }
                // 获取添加到图形中的自定义内容，参考exhibit回显方法中自定义添加的data
	            let data = hxMap.edit.getGraphicMain(graphicItem).data
	            if (data) {
	              this.jumpTo(data)
	            }
})
	}, true);
}
    },

 地图上添加标记和文字

if (item.wktPoint) {
    // 画圆点
    // layer 加入图层
    // coordinates 位置 [lon,lat,0]
    // flag 是否图形居中 1为不居中
    // keyId 设置图形keyId
    // color 颜色
    // size 圆点大小
    // data 设定图形自定义属性
    hxMap.exhibit.point(this.myLayer, shapeVal.coordinates,0,item.id,'','',item)
    // 画图片
    // layer 加入图层
    // coordinates 位置 [lon,lat,0]
    // img 图片路径
    // keyId 设置图形keyId
    // width 图形宽度
    // height 图形高度
    // data 设定图形自定义属性
    // flag 是否图形居中 1为不居中
    hxMap.exhibit.pic(this.myLayer, shapeVal.coordinates, img, data.id, 55, 55, data)
    // 画文本
    // layer 加入图层
    // coordinates 位置 [lon,lat,0]
    // text 文字内容
    // keyId 设置图形keyId
    // x x轴偏移量
    // y y轴偏移量
    // data 设定图形自定义属性
    hxMap.exhibit.text(this.myLayer, shapeVal.coordinates, data.name, '名称' + data.id)
    // 波动亮点
    // layer 加入图层
    // coordinates 位置 [lon,lat,0]
    // keyId 设置图形keyId
    // color 颜色
    // size 圆点大小
    // flag 是否图形居中 1为不居中
    // data 设定图形自定义属性
    hxMap.specialGraphics.lightPoint(this.newAlarmLayer, shapeVal.coordinates, '', '#FF0000', 20, true, data,1)
}

根据keyId删除图层中图形=>layer图层

hxMap.edit.delByKeyId(this.myLayer,"告警-"+ data.srcIndex);

为图层添加点击事件

hxMap.resgister.graphicClick(this.pointGroup,(graphicItem)=>{
	let data = hxMap.edit.getGraphicMain(graphicItem).data
	if (data) {
	  this.loadPresetByEquId(data)
	}
})

清除图层

clearMap(){
    // 清除测量数据
    hxMap.measure.measureClear();
    // 批量清空图层数据
    hxMap.clearLayer(this, ['myLayer','signGroup'])
}

移动镜头

let shapeVal = hxMap.conversion.toGeoJson(wktPoint)
hxMap.fly.flyToCenter(shapeVal.coordinates[0], shapeVal.coordinates[1],4000)