This is the 9th day of my participation in the August Wen Challenge.More challenges in August

Text layer

  • Text display Layer, inherited from Layer, can be picked with the mouse

    1. fontFamily ### collides

    2. Text font

    3. Color color

    4. FontSize fontSize

    5. Unit Specifies the unit in which the fontSize property is drawn. The default is px.

      • Draw by pixel
      • Let’s do it in meters

    6. Angle Whether the text is tilted with the map, i.e. lying flat on the map

    7. Offset Indicates the offset based on the center of the text

    8. SelectedColor indicates the selectedColor

    9. AutoSelect automatically sets selectedIndex based on mouse position, making the selected object change color, and disables selectedIndex when set to true

    var textLayer = new mapvgl.TextLayer({ // fontFamily: 'Songti SC', enablePicked: true, autoSelect: true, selectedColor: '#f00', // select the item color: '#ff0'});Copy the code

Icon in the layer

  • IconLayer
  • Simple dot Layer used to display large amounts of data, inherited from Layer. Use the mouse to Pick up the Pick
The options properties
  1. Object (Canvas DOM), String (image URL address)
  2. Width the width of the
  3. Height height
  4. Scale sets the icon scale
  5. The opacity of the opacity layer is 0-1
  6. Whether the flat icon is tilted with the map, i.e. lying flat on the map
var layer = new mapvgl.IconLayer({ width: 200 , height: 200 , offset: [0, -153 / 8], opacity: 1, icon: 'https://img0.baidu.com/it/u=2027730681, 1224762729 & FM = 26 & FMT = auto&gp = 0. JPG', enablePicked: // Select selectedColor: '#ff0000', // select autoSelect: OnClick: (e) => {// Click the event console.log('click', e); }, onDblClick: e => { console.log('double click', e); }, onRightClick: e => { console.log('right click', e); }});Copy the code

We can watch farts again

Mouse pick mouse interaction behavior, support hover and click

The options parameter
  1. EnablePicked Whether to enable the mouse eventonClickwithonMousemoveEvent that also supports changing the color of the picked object.
  2. SelectedIndex Manually specifies the index of the selected data item so that the object represented by the data item changes color. -1 indicates that no element is selected
  3. OnClick onClick({Object}pickObject) Returns data if the click is on the selected Object
  4. OnRightClick event that returns data if it right-clicks on a selectable object