加载 Geojson

框架支持对Geojson矢量数据的加载

支持形式

INFO

1. 加载接口 Layers.Geojson.add 中设定加载形式，1-entity，2-primitive
2. 广告版参数包括 scale-缩放比,width-宽度, height-高度, onGround-是否贴地, image-图标路径,
3. 线参数包括 width-线宽, color-颜色, onGround-是否贴地, index-层级,
4. 面参数包括 fill-填充色, outline-是否显示边框, outlineColor-边框颜色, outlineWidth-边框宽度, onGround-是否贴地, index-层级,

WARNING

1. Entity形式：支持属性挂接，支持flyTo / zoomTo跳转
2. Primitive形式：支持属性挂接，暂不支持flyTo / zoomTo跳转，如需跳转，可以通过ID绑定范围进行跳转

代码实例

vue + ts

场景初始化

let map: any
LarkExplorer.ready({
    baseUrl: './dist/resources/',
  }).then(initMap)
function initMap() {
  // 默认谷歌影像地图
  const baseImagery = LarkExplorer.BaseLayer.DefaultTdtImg
  // 默认全球地形
  const baseTerrain = LarkExplorer.BaseLayer.DefaultTerrain
  map = new LarkExplorer.Map('map', baseImagery, baseTerrain)
}

配置数据

const data: any = {
  1: {
    id: 'point-1',
    name: 'point',
    options: {
      scale: 1.0,
      width: 50,
      height: 50,
      onGround: true,
    },
  },
  2: {
    id: 'polyline-1',
    name: 'polyline',
    options: { width: 2, color: '#ff00ff', onGround: true, index: 2 },
  },
  3: {
    id: 'polygon-1',
    name: 'polygon',
    options: {
      fill: '#ff0000',
      outline: true,
      outlineColor: '#000',
      outlineWidth: 1.0,
      onGround: true,
      index: 1,
    },
  },
}

Entity形式加载

const geojson = async (type: number) => {
  const { id, options } = data[type]
  const url = 'http://localhost:8086/geojson/' + data[type].name + '.json'
  let geojson = await map.Layers.Geojson.add(url, id, 1, options)
  map.Navigation.flyToItem(geojson)
  console.log(geojson)
}

const remove = () => {
  for (const key in data) {
    if (Object.hasOwnProperty.call(data, key)) {
      const element = data[key]
      map.Layers.removeById(element.id)
    }
  }
}

运行效果 更多示例

Primitive形式加载

const data: any = {
  1: {
    id: 'point-1',
    name: 'point',
    options: {
      scale: 2.0,
      width: 50,
      height: 100,
      onGround: true,
    },
  },
  2: {
    id: 'polyline-1',
    name: 'polyline',
    options: { width: 2, color: '#ff00ff', onGround: true, index: 2 },
  },
  3: {
    id: 'polygon-1',
    name: 'polygon',
    options: {
      fill: '#ff0000',
      outline: false,
      outlineColor: '#000',
      outlineWidth: 1.0,
      onGround: true,
      index: 1,
    },
  },
}
const geojson = async (type: number) => {
  const { id, options } = data[type]
  const url = 'http://localhost:8086/geojson/' + data[type].name + '.json'
  let geojson = await map.Layers.Geojson.add(url, id, 2, options)
  console.log(geojson)
}
const remove = () => {
  for (const key in data) {
    if (Object.hasOwnProperty.call(data, key)) {
      const element = data[key]
      map.Layers.removeById(element.id)
    }
  }
}

运行效果 更多示例

自定义样式（多联级）

const data: any = {
  1: {
    id: 'point-1',
    name: 'point',
    options: {
      scale: 1.0,
      width: 50,
      height: 50,
      onGround: true,
      style: {
        key: 'Id',
        filter: [
          {
            key: '==0',
            value: {
              image: getImg('point1'),
            },
          },
          {
            key: '<10',
            value: {
              scale: 1.5,
              image: getImg('point'),
            },
          },
          {
            key: '>=100&&<500',
            value: {
              height: 80,
              width: 80,
            },
          },
        ],
      },
    },
  },
  2: {
    id: 'polyline-1',
    name: 'polyline',
    options: {
      width: 2,
      color: '#0000ff',
      onGround: true,
      index: 2,
      style: {
        key: 'Id',
        filter: [
          {
            key: '==10',
            value: {
              width: 20,
            },
          },
          {
            key: '<30||>50',
            value: {
              color: '#ff0000',
            },
          },
        ],
      },
    },
  },
  3: {
    id: 'polygon-1',
    name: 'polygon',
    options: {
      fill: '#0000ff',
      outline: true,
      outlineColor: '#000',
      outlineWidth: 1.0,
      onGround: true,
      index: 1,
      style: {
        key: 'name',
        filter: [
          { key: "!='老哈河'", value: { fill: '#ff0000', outline: false } },
        ],
      },
    },
  },
}

function getImg(name: string) {
  const url = '../assets/images/' + name + '.png'
  return new URL(url, import.meta.url).href
}

运行效果 更多示例