pmap-cesium v0.1.3

pmap

简介

• pmap pmap是一套基于Cesium的面向应用封装的SDK，高度可配置化。

• pmapEditor 可视化配置工具,用于快速调试和定制。

配置文件

{
  "id": 0,
  "name": "北斗车联网系统地图配置(太原市测试)",
  "light": {
      "direction": [
          0.0,
          -90.0,
          0.0
      ],
      "intensity": 0.5
  },
  "camera": [114.424314, 30.606697, 15000, -15.11191710192395, -90.90855164693353, 0.9029586440633],
  "layers": [{
      "name": "ytlhz",
      "url": "https://crack.jyaitech.com/data/wuhan3dtile/tileset.json",
      "type": "3dtile",
      "scale": 1,
      "offset": [
          0.0,
          0.0,
          0.0
      ],
      "style": {
          "type": "graduaflash",
          "minheight": 0.1,
          "maxheight": 100.2,
          "gltfUpAxis": "z"
      },
      "checked": true,
      "columns": [
          {
              "name": "name",
              "title": "名称"
          }
      ],
      "isoffset": false
  },
  {
      "customfunction": true,
      "url": "http://221.235.53.36:28207/realtimeMonitoring/queryVehicleGpsList?mediaType=-1",
      "name": "车辆数据",
      "function":"getdevicestogeojson",
      "cluster": true,
      "type": "geojsonx",
      "prj": "EPSG:4326",
      "styles": [{ "type": "billboard", "mindistance": 1000,"imageurl":"imageurl" }, { "type": "model", "url": "static/models/test.gltf", "mindistance": 0, "maxdistance": 1000 }],
      "camera": [112.54216627280427, 37.7606077669049, 12000, -15.11191710192395, -90.90855164693353, 0.9029586440633],
      "offset": [
          112.40843958156897,
          32.964263795753968,
          0.0
      ],
      "checked": true,
      "columns": [
          {
              "name": "name",
              "title": "名称"
          }
      ],
      "islegend": false,
      "isoffset": false,
      "keyproperty": "id"
  },
  {
      "url": "static/waterwuhan2.geojson",
      "name": "水域",
      "type": "geojson",
      "prj": "EPSG:4326",
      "geometrytype": "polygon",
      "style": { "type": "water", "perPositionHeight": false, "mindistance": 0, "maxdistance": 1000 },
      "camera": [112.54216627280427, 37.7606077669049, 12000, -15.11191710192395, -90.90855164693353, 0.9029586440633],
      "offset": [
          112.40843958156897,
          32.964263795753968,
          0.0
      ],
      "checked": true,
      "columns": [
          {
              "name": "name",
              "title": "名称"
          }
      ],
      "islegend": false,
      "isoffset": false,
      "keyproperty": "id"
  },
  {
      "url": "static/wuhanroad1.geojson",
      "name": "路网",
      "type": "geojsonx",
      "prj": "EPSG:4326",
      "styles": [{
          "type": "trail",
          "depthfailshow": true,
          "clampToGround": true,
          "width": 10,
          "color": "rgba(13, 71, 161, 0.6)"
      }],
      "camera": [112.54216627280427, 37.7606077669049, 12000, -15.11191710192395, -90.90855164693353, 0.9029586440633],
      "offset": [
          112.40843958156897,
          32.964263795753968,
          0.0
      ],
      "checked": true,
      "columns": [
          {
              "name": "name",
              "title": "名称"
          }
      ],
      "islegend": false,
      "isoffset": false,
      "labelshow": false,
      "keyproperty": "gml_id",
      "labelproperty": "gml_id"
  }
  ],
  "imageprovider":{
    "name": "gaodemapx",
    "title": "高德纠偏",
    "style": "img", 
    "crs": "WGS84", 
    "minimumLevel": 3,
    "maximumLevel": 21,
    "value": false,
    "type": "AmapImageryProvider"
  }
}

开始

<template>
  <div id="app">
    <pmap :project="project" ></pmap>
     <!-- <toolbar ></toolbar> -->
     <mapeditor></mapeditor>
  </div>
</template>

<script>
import pmap from './components/map/map.vue'
import {testproject3} from  './components/map/api/map'
import mapeditor from "./components/map/mapeditor.vue"
// import toolbar from "./components/map/toolbar2.vue"
export default {
  name: 'App',
  components: {
    pmap,mapeditor
  },
  mounted(){ 
      this.project=JSON.parse(testproject3);
  },
  data(){
     return{
         project:undefined
     }
  }
}
</script>

pmap特性

• 兼容Cesium原生

pmapeditor特性

• UI由数据驱动生成
• Runtime修改属性