标注图层的使用

发布时间：2018-07-18 版权：

一、打开标注图层

 

    在左侧有个按钮，点击后出现抽屉：标注图层



 

    在抽屉的底部有一个保存按钮，点击将保存当前选中的kml对象



 

    下图为kml文件中的图元展示，该级别为Folder级，用于存放Placemark以及其他Folder，根据不同Placemark的类型又有集中操作可选择



 

二、点操作



    修改属性：里面包括了点的名称以及描述

    删除：删除该图元

 

三、线操作



    线条圆滑：可以对线段进行圆滑处理，但对线的点数有要求，建议只对轨迹线段进行圆滑

    修改属性：里面包括了名称，描述，宽度，颜色等属性值的修改

    编辑：可以对这条线段进行重新编辑

    删除：删除该图元

 

四、面操作



    下载离线地图：可以下载该图元覆盖区域的瓦片地图，下载速度较慢，建议使用桌面版瓦片地图下载

    修改属性：里面包括了名称，描述，宽度，颜色，填充颜色等属性值的修改

    编辑：可以重新编辑该图形

    删除：删除该图元

 

    点击顶部红色栏返回：回到该kml的上一级目录



 

    该级别是Document级，可以操作Folder和Placemark，Folder的操作为修改名称



 

    点击顶部红色栏返回：回到该kml的上一级目录



 

    该级别是kml集合，每个kml有两个操作，一个是保存该kml文件至指定文件夹，一个是删除该kml对象



 

 

在MapXtreme 2005中添加标注图层是非常容易的，只要知道要标准的表和相关的列，几行代码就搞定了，比想像中要容易多了。当然还有一些标注样式可以设置，可以从类库中查到相关的说明。
 
    /// <summary>

    /// 添加标注图层

    /// Design by Glacier

    /// 2008年8月6日

    /// <param name="tableName">标注的表名</param>

    /// <param name="columnName">标注的列名</param>

    /// </summary>

    public static void ShowLabelLayer(string tableName, string columnName)

    {

        MapInfo.Mapping.Map myMap = MapInfo.Engine.Session.Current.MapFactory[MapControl1.MapAlias];

        

        //新建标注图层

        LabelLayer labelLayer = new LabelLayer();

        myMap.Layers.Add(labelLayer);
        //指定要标注的数据表

        LabelSource labelSource = new LabelSource(MapInfo.Engine.Session.Current.Catalog.GetTable(tableName);

        labelLayer.Sources.Append(labelSource);

        

        //指定要标准字段所在的列

        labelSource.DefaultLabelProperties.Caption = columnName;
        //标注样式等属性

        //source.DefaultLabelProperties.Visibility.Enabled = true;

        //source.DefaultLabelProperties.Visibility.VisibleRangeEnabled = true;

        //source.DefaultLabelProperties.Visibility.VisibleRange = new VisibleRange(0.01, 10, MapInfo.Geometry.DistanceUnit.Mile);

        //source.DefaultLabelProperties.Visibility.AllowDuplicates = true;

        //source.DefaultLabelProperties.Visibility.AllowOverlap = true;

        //source.DefaultLabelProperties.Visibility.AllowOutOfView = true;

        //source.Maximum = 50;

        //source.DefaultLabelProperties.Layout.UseRelativeOrientation = true;

        //source.DefaultLabelProperties.Layout.RelativeOrientation = MapInfo.Text.RelativeOrientation.FollowPath;

        //source.DefaultLabelProperties.Layout.Angle = 33.0;

        //source.DefaultLabelProperties.Priority.Major = "index";

        //source.DefaultLabelProperties.Layout.Offset = 7;

        //source.DefaultLabelProperties.Layout.Alignment = MapInfo.Text.Alignment.BottomRight;

        //Font font = new Font("黑体", 10);

        //font.ForeColor = System.Drawing.Color.DarkBlue;

        //source.DefaultLabelProperties.Style.Font = font;

    }

一、打开标注图层

 

    在左侧有个按钮，点击后出现抽屉：标注图层



 

    在抽屉的底部有一个保存按钮，点击将保存当前选中的kml对象



 

    下图为kml文件中的图元展示，该级别为Folder级，用于存放Placemark以及其他Folder，根据不同Placemark的类型又有集中操作可选择



 

二、点操作



    修改属性：里面包括了点的名称以及描述

    删除：删除该图元

 

三、线操作



    线条圆滑：可以对线段进行圆滑处理，但对线的点数有要求，建议只对轨迹线段进行圆滑

    修改属性：里面包括了名称，描述，宽度，颜色等属性值的修改

    编辑：可以对这条线段进行重新编辑

    删除：删除该图元

 

四、面操作



    下载离线地图：可以下载该图元覆盖区域的瓦片地图，下载速度较慢，建议使用桌面版瓦片地图下载

    修改属性：里面包括了名称，描述，宽度，颜色，填充颜色等属性值的修改

    编辑：可以重新编辑该图形

    删除：删除该图元

 

    点击顶部红色栏返回：回到该kml的上一级目录



 

    该级别是Document级，可以操作Folder和Placemark，Folder的操作为修改名称



 

    点击顶部红色栏返回：回到该kml的上一级目录



 

    该级别是kml集合，每个kml有两个操作，一个是保存该kml文件至指定文件夹，一个是删除该kml对象



 

Cesium实战专栏14.自定义html标注图层
前言
实现效果
实现思路
关键代码

前言
在Cesium中可以通过entity的Lebel属性来实现文本标注的功能，但是原始的标注功能样式往往达不到我们想要的效果，比如我们需要像html元素那样可以通过css来自由的设置样式。我们可以通过自定义html标注的方式来实现可以自由定义样式的标注功能。
实现效果

实现思路
自定义html标注图层功能与自定义气泡弹框功能思路相似，通过笛卡尔坐标转为屏幕坐标，实时更新DOM元素的坐标使其保持正确的位置即可。
关键代码
  /**
   * html文本标绘基类 
   */
  class HtmlPlotBase {
      constructor(viewer, geoFeature) { //传入的点为笛卡尔坐标 
          this.properties = geoFeature.properties;
          this.coordinates = geoFeature.geometry.coordinates; //[x,y,z] 
          this.style = this.properties.style || {};

          this.position = Cesium.Cartesian3.fromDegrees(this.coordinates[0], this.coordinates[1], this.coordinates[2]);
          this.properties.plotBase = "Html";
          this.viewer = viewer;
          this.addBillboard();
      }

      //设置选中状态
      setSelected(selected) {
          this.vmInstance.isSelected = selected;
          this.setPointVisible(selected);
      }


      //添加广告牌
      addBillboard() {
          this.billboardEntity = this.viewer.entities.add({
              position: this.position,
              type: "HtmlPlot",
              plotCode: this.properties.plotCode,
              //   billboard: {
              //       image: this.style.image || "../../static/images/Plot/location.png",
              //       scaleByDistance: new Cesium.NearFarScalar(300, 1, 1200, 0.4), //设置随图缩放距离和比例
              //       distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000), //设置可见距离 10000米可见
              //       verticalOrigin: Cesium.VerticalOrigin.BOTTOM
              //   },
              point: {
                  color: Cesium.Color.DARKBLUE.withAlpha(0.4),
                  pixelSize: 6, //10
                  outlineColor: Cesium.Color.YELLOW.withAlpha(0.4),
                  outlineWidth: 2, //3 
                  scaleByDistance: new Cesium.NearFarScalar(300, 1, 1200, 0.4),
                  disableDepthTestDistance: 500,
              },
          });
      }

      //选中的时候显示point
      setPointVisible(visible) {
          if (visible) {
              this.billboardEntity.point.pixelSize = 10;
              this.billboardEntity.point.outlineWidth = 3;
              this.billboardEntity.point.outlineColor = Cesium.Color.YELLOW;
          } else {
              this.billboardEntity.point.pixelSize = 6;
              this.billboardEntity.point.outlineWidth = 2;
              this.billboardEntity.point.outlineColor = Cesium.Color.YELLOW.withAlpha(0.4);
          }
      }

      updatePosition(newPosition) {
          this.billboardEntity.position = newPosition;
          let c = Cesium.Cartographic.fromCartesian(newPosition);
          this.position = newPosition;
          this.coordinates = [Cesium.Math.toDegrees(c.longitude), Cesium.Math.toDegrees(c.latitude), c.height];
      }

      updateLabel(label) {
          this.vmInstance.label = label;
          this.properties.attr.label = label;
      }


      //转到geojson对象 用于存储操作
      toGeoJson() {
          return {
              "type": "Feature",
              "properties": this.properties,
              "geometry": {
                  "type": "Point",
                  "coordinates": this.coordinates
              }
          }
      }


      //移除标绘
      remove() {
          this.viewer.entities.remove(this.billboardEntity);
          this.viewer.cesiumWidget.container.removeChild(this.vmInstance.$el); //删除DOM
          this.viewer.scene.postRender.removeEventListener(this.postRender, this); //移除事件监听
      }
  }
  export default HtmlPlotBase;

import Vue from "vue"

import PlotBase from '../../PlotBase';
import PlotTypes from '../../PlotTypes';

import Template from "../../Templates/Simple"
let SimpleLabelVm = Vue.extend(Template)

/**
 * html简单文本标注类 
 */
class SimpleLabel extends PlotBase {
    constructor(viewer, geoFeature) {
        super(viewer, geoFeature);

        this.properties.plotType = PlotTypes.SIMPLELABEL; //标绘类型
        this.properties.plotName = "简单文本"; //标绘名称 

        //创建模板
        this.vmInstance = new SimpleLabelVm({
            propsData: {
                label: this.properties.attr.label
            }
        }).$mount(); //根据模板创建一个面板

        //注册模板的点击事件
        this.vmInstance.PlotItemClick = e => {
            //从图层对象上设置选中对象
            if (this.layer && this.layer.setSelectedPlot) {
                this.layer.setSelectedPlot(this);
            }
        }

        viewer.cesiumWidget.container.appendChild(this.vmInstance.$el); //将模板生成的内容添加到DOM上
        this.addPostRender();
    }

    //添加场景事件
    addPostRender() {
        this.viewer.scene.postRender.addEventListener(this.postRender, this);
    }

    //场景渲染事件 实时更新标签的位置 使其与笛卡尔坐标一致
    postRender() {
        if (!this.vmInstance.$el || !this.vmInstance.$el.style) return;
        const canvasHeight = this.viewer.scene.canvas.height;
        const windowPosition = new Cesium.Cartesian2();
        Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, this.position, windowPosition);
        this.vmInstance.$el.style.bottom = canvasHeight - windowPosition.y + 40 + "px";
        const elWidth = this.vmInstance.$el.offsetWidth;
        this.vmInstance.$el.style.left = windowPosition.x - (elWidth / 2) + "px";

        if (this.viewer.camera.positionCartographic.height > 2000) {
            this.vmInstance.$el.style.display = "none";
        } else {
            this.vmInstance.$el.style.display = "block";
        }
    }
}
export default SimpleLabel;

import Vue from "vue"

import PlotBase from '../../PlotBase';
import PlotTypes from '../../PlotTypes';

// import HtmlPlotEvent from "../HtmlPlotBase/HtmlPlotEvent"
import Template from "../../Templates/Gradients"
let GradientsLabelVm = Vue.extend(Template)

/**
 * html简单文本标绘类 
 */
class GradientsLabel extends PlotBase {
    constructor(viewer, geoFeature) {
        super(viewer, geoFeature);

        this.properties.plotType = PlotTypes.GRADIENTSLABEL; //标绘类型
        this.properties.plotName = "渐变文本"; //标绘名称 

        //创建模板
        this.vmInstance = new GradientsLabelVm({
            propsData: {
                label: this.properties.attr.label
            }
        }).$mount(); //根据模板创建一个面板


        //注册模板的点击事件
        this.vmInstance.PlotItemClick = e => {
            //从图层对象上设置选中对象
            if (this.layer && this.layer.setSelectedPlot) {
                this.layer.setSelectedPlot(this);
            }
        }

        viewer.cesiumWidget.container.appendChild(this.vmInstance.$el); //将模板生成的内容添加到DOM上
        this.addPostRender();
    }


    //添加场景事件
    addPostRender() {
        this.viewer.scene.postRender.addEventListener(this.postRender, this);
    }

    //场景渲染事件 实时更新标签的位置 使其与笛卡尔坐标一致
    postRender() {
        if (!this.vmInstance.$el || !this.vmInstance.$el.style) return;
        const canvasHeight = this.viewer.scene.canvas.height;
        const windowPosition = new Cesium.Cartesian2();
        Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, this.position, windowPosition);
        this.vmInstance.$el.style.bottom = canvasHeight - windowPosition.y + 40 + "px";
        const elWidth = this.vmInstance.$el.offsetWidth;
        this.vmInstance.$el.style.left = windowPosition.x - (elWidth / 2) + "px";

        if (this.viewer.camera.positionCartographic.height > 2000) {
            this.vmInstance.$el.style.display = "none";
        } else {
            this.vmInstance.$el.style.display = "block";
        }
    }
}
export default GradientsLabel;

<!--标绘简单的文本-->
<template>
  <div class="LabelPlot-container" @click="onClick" :class="{'is-selected':isSelected}">
    <div class="info-item">{{label}}</div>
  </div>
</template>
<script>
export default {
  name: "LabelPlot", //文本标绘 标绘简单的文本
  props: {
    label: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      isSelected:false
    };
  },
  methods: {
    onClick() {
      if (this.PlotItemClick) {
        this.PlotItemClick();
      }
    }
  }
};
</script>

<style   scoped>
.LabelPlot-container {
  background: #e3eee59e;
  position: absolute;
  left: 0px;
  bottom: 0px;
  cursor: default;
  padding: 5px;
  border: 1px solid #9c9944e8;
}

.is-selected{ 
  border: 2px solid yellow ;
}

.is-selected::before{ 
  border-left: 2px dashed yellow !important;
}

.LabelPlot-container:hover {
  border: 1px solid rgb(9, 255, 0);
}

.LabelPlot-container::before {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -30px;
  height: 30px;
  border-left: 1px dashed #c5e22770;
}
</style>

<!-- 渐变色文本标绘 -->
<template>
  <div class="gradients-labelPlot-container" @click="onClick" :class="{'is-selected':isSelected}">
    <div class="info-item">{{label}}</div>
  </div>
</template>
<script>
export default {
  name: "GradientsLabelPlot",  
  props: {
    label: {
      type: String,
      default: ""
    }
  },

  data() {
    return {
      isSelected: false
    };
  },

  methods: {
    onClick() {
      if (this.PlotItemClick) {
        this.PlotItemClick();
      }
    }
  }
};
</script>

<style   scoped>
.gradients-labelPlot-container {
  background-image: linear-gradient(to right, #e64dc1, #00ffc3);
  position: absolute;
  left: 0px;
  bottom: 0px;
  cursor: default;
  padding: 5px;
  border: 1px solid #9c9944e8;
}

.gradients-labelPlot-container:hover {
 border: 1px solid rgb(9, 255, 0);
}

.gradients-labelPlot-container::before {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -30px;
  height: 30px;
  border-left: 1px dashed #c5e22770;
}

.is-selected{ 
  border: 2px solid yellow ;
}

.is-selected::before{ 
  border-left: 2px dashed yellow !important;
}

</style>