pmap-cesium
v0.1.3
Published
<a href=""> <img src="https://img.shields.io/npm/v/pmap-cesium.svg"> </a>
Downloads
3
Readme
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修改属性