代码拉取完成,页面将自动刷新
主要是对唯杰地图常用的功能做了一定程度的封装,方便其他工程共用
如果此工程需要在其他项目中引用,可进入packages/common
运行 npm run build
在 html 中引入vjcommon.min.js
即可,或npm install vjcommon
通过import vjcommon from 'vjcommon'
引入
如果是monorepo
项目,可直接通过引用项目源码目录的方式进行引入
此项目源码地址:
https://github.com/vjmap/vjmap-common
vjcommon.min.js
即可 https://vjmap.com/demo/js/vjmap/vjcommon.min.js
npm install vjcommon
通过 import vjcommon from 'vjcommon'
引入如相关绘图、CAD图编辑、选择实体等
// 选择实体
await vjcommon.selectFeatures(map, true, true, false, true);
// 修改CAD图
await vjcommon.modifyCadEntity(map, draw, updateMapStyleObj);
// 绘制文本
await vjcommon.drawText(map, draw, {}, { text: "vjmap"});
const config = {
"mapSources": [
{
"id": "geojson_Z7cLnslC",
"tag": "static",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 1,
"properties": {
"index": 1
},
"geometry": {
"type": "Point",
"coordinates": [
587614231.5210593,
3103881054.3056574
]
}
},
{
"type": "Feature",
"id": 2,
"properties": {
"index": 2
},
"geometry": {
"type": "Point",
"coordinates": [
587644226.1148031,
3103918228.249017
]
}
}
]
}
},
"props": {}
}
],
"mapLayers": [
{
"layerId": "marker_qigxhNnv",
"sourceId": "geojson_Z7cLnslC",
"memo": "",
"type": "marker",
"color": "#3FB1CE"
}
],
"baseMapType": "",
"webMapTiles": [],
"mapOpenOptions": {
"mapid": "sys_zp",
"version": "v2",
"mapopenway": "GeomRender",
"isVectorStyle": false,
"style": {
"backcolor": 0
}
},
"mapOptions": {}
}
let mapApp = new vjcommon.MapApp();
mapApp.mount("map");
await mapApp.setConfig(config);
// 通过mapApp.map获取地图对象
如果已有map对象,MapApp
可通过attachMap
关联地图
let mapApp = new vjcommon.MapApp();
// 关联地图对象
mapApp.attachMap(map);
// 增加数据源
await mapApp.addSource({
"id": "geojson_R6shwTDB",
"tag": "static",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 1,
"properties": {
"index": 1
},
"geometry": {
"type": "Point",
"coordinates": [
9945.14159398403,
8028.257974499531
]
}
},
{
"type": "Feature",
"id": 2,
"properties": {
"index": 2
},
"geometry": {
"type": "Point",
"coordinates": [
14330.729692594781,
8912.481704534506
]
}
}
]
}
},
"props": {}
}, true)
// 增加图层与数据源关联
await mapApp.addLayer( {
"layerId": "marker_NM49tApU",
"sourceId": "geojson_R6shwTDB",
"memo": "",
"type": "marker",
"color": "#3FB1CE",
"closeButton": true,
"closeOnClick": true
})
// 模拟变化 数据
setTimeout(async ()=> {
// 修改数据源,图层也会相应的变化
await mapApp.setSourceData("geojson_R6shwTDB", {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 1,
"properties": {
"index": 1
},
"geometry": {
"type": "Point",
"coordinates": [
8629.428315643036,
18411.03475111672
]
}
}
]
}, true)
}, 5000)
唯杰地图VJMAP
为用户自定义地图格式
WebGIS可视化
显示开发提供的一站式解决方案,支持的格式如常用的AutoCAD
的DWG
格式文件、GeoJSON
等常用GIS
文件格式,它使用WebGL矢量图块
和自定义样式
呈现交互式地图, 提供了全新的大数据可视化
、实时流数据
可视化功能,通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析,可帮助您在网站中构建功能丰富、交互性强、可定制的地图应用。
AutoCAD
格式的DWG
文件,无需转换矢量地图
渲染,支持栅格、图片、视频等图形渲染,支持3D模型渲染;windows
,linux
); 支持docker
部署;支持私有化
部署;支持桌面端语言开发(如C#
、Java
、C++
语言)此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。