Skip to content

GIS / i2d-demo-vue2

Go to a project
Toggle navigation
Toggle navigation pinning
b1200dcb by 苗菁
Options

行政区导航

1 parent ac56149a
Inline Side-by-side
Showing 2 changed files with 43 additions and 575 deletions
......@@ -67,550 +67,55 @@ export default {
this.graphicLayer.destroy()
}
},
},
mounted() {
// 从数据库读取的地块信息
const dkCoord = {"type": "Polygon", "coordinates": [[[100.98204924173348, 40.47840655548055], [101.22951318633983, 40.43081733536394], [101.14765972773921, 40.10340350096175], [100.85070299421159, 40.181449821952924], [100.98204924173348, 40.47840655548055]]]}
const geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"bbox": [
126.03867381995315,
30.931927433113856,
126.04503594875791,
30.939514725477864
],
"type": "Polygon",
"coordinates": [
[
[
126.04127520446629,
30.939514725477864
],
[
126.04377230927992,
30.93881960784222
],
[
126.04332664844026,
30.937915552996117
],
[
126.04237115160002,
30.9363554853939
],
[
126.04215927170368,
30.93624139621903
],
[
126.04262377763028,
30.935679099571022
],
[
126.04354464025664,
30.93388626967902
],
[
126.04363428175124,
30.933169137722185
],
[
126.04503594875791,
30.93255794571354
],
[
126.04482901291135,
30.931927433113856
],
[
126.04305706342336,
30.932797864441227
],
[
126.03867381995315,
30.93460090076218
],
[
126.04127520446629,
30.939514725477864
]
]
]
},
"properties": {
"Id": 0,
"dkh": "FG52K9756-002",
"wz": "同兴村",
"tfbh": "I51H134002",
"tbbh": "448",
"ssqdlh": "702",
"sshdlh": "102",
"bcgdmj": 0.396,
"psnl": "充分满足",
"ggnl": "充分满足",
"dxbw": "平原低阶",
"zays": "盐碱",
"zdgx": "薄层型",
"nltwh": "高",
"swdyx": "丰富",
"qjcd": "清洁",
"yxtch": "20",
"pd": 0.3
}
},
{
"type": "Feature",
"geometry": {
"bbox": [
126.03523202362737,
30.9370592475255,
126.04110232335631,
30.940919299594437
],
"type": "Polygon",
"coordinates": [
[
[
126.03612469963673,
30.940919299594437
],
[
126.0387805796563,
30.940176044637667
],
[
126.04110232335631,
30.93952629860218
],
[
126.04104263663659,
30.939267656150548
],
[
126.04052535173344,
30.938392250929894
],
[
126.03976931995192,
30.9370592475255
],
[
126.03885412358487,
30.938332564210327
],
[
126.03817767409612,
30.938969222552544
],
[
126.03783944935175,
30.938312668636968
],
[
126.03523202362737,
30.939312482777378
],
[
126.03612469963673,
30.940919299594437
]
]
]
},
"properties": {
"Id": 0,
"dkh": "FG52K9756-001",
"wz": "同兴村",
"tfbh": "I51H134001",
"tbbh": "212",
"ssqdlh": "602",
"sshdlh": "102",
"bcgdmj": 3.219,
"psnl": "充分满足",
"ggnl": "满足",
"dxbw": "平原中阶",
"zays": "痦薄",
"zdgx": "松散型",
"nltwh": "高",
"swdyx": "丰富",
"qjcd": "清洁",
"yxtch": "120",
"pd": 2
}
},
{
"type": "Feature",
"geometry": {
"bbox": [
126.04532640224102,
30.921617099431955,
126.05379331158817,
30.93749197624271
],
"type": "Polygon",
"coordinates": [
[
[
126.04871486705144,
30.93749197624271
],
[
126.04846190345619,
30.931176956135005
],
[
126.04827119179015,
30.931188875614115
],
[
126.04844297749084,
30.93070448557421
],
[
126.04846190345619,
30.931176956135005
],
[
126.04853196704721,
30.931172577160513
],
[
126.04897202529332,
30.93104218953198
],
[
126.04949357580745,
30.930276162214454
],
[
126.04908611446831,
30.93026801298777
],
[
126.04968915725023,
30.929982790050413
],
[
126.04909426369511,
30.929013032063267
],
[
126.04991606228327,
30.928882166940983
],
[
126.05103021438244,
30.92665386274274
],
[
126.05379331158817,
30.925284251483845
],
[
126.05208706723067,
30.922100959772024
],
[
126.05169233905838,
30.921617099431955
],
[
126.05021449588128,
30.92249568794426
],
[
126.04765791472528,
30.927357668644618
],
[
126.04675639656466,
30.928943097133928
],
[
126.04812421722215,
30.931709825281875
],
[
126.04532640224102,
30.932735690774848
],
[
126.04871486705144,
30.93749197624271
]
]
]
},
"properties": {
"Id": 0,
"dkh": "FG52K9756-003",
"wz": "武德路",
"tfbh": "I51H134003",
"tbbh": "212",
"ssqdlh": "605",
"sshdlh": "103",
"bcgdmj": 1.017,
"psnl": "满足",
"ggnl": "基本满足",
"dxbw": "丘陵上部",
"zays": "酸化",
"zdgx": "紧实型",
"nltwh": "中",
"swdyx": "一般",
"qjcd": "清洁",
"yxtch": "120",
"pd": 3
addMarker() {
let graphic = new i2d.Graphic.Marker({
latlng: [32.3102954498753, 119.19403010080875],
style: {
rotationAngle: 49,
image: "./sdt.png",
width: 32,
height: 44,
horizontalOrigin: i2d.HorizontalOrigin.CENTER,
verticalOrigin: i2d.VerticalOrigin.BOTTOM
}
},
{
"type": "Feature",
"geometry": {
"bbox": [
126.02845013770947,
30.93611055509564,
126.03612469963673,
30.94242506807376
],
"type": "Polygon",
"coordinates": [
[
[
126.03068450384012,
30.94242506807376
],
[
126.03612469963673,
30.940919299594437
],
[
126.03345317491528,
30.93611055509564
],
[
126.02845013770947,
30.938587787110183
],
[
126.03068450384012,
30.94242506807376
]
]
]
},
"properties": {
"Id": 0,
"dkh": "FG52K9756-004",
"wz": "武德路",
"tfbh": "I51H134004",
"tbbh": "392",
"ssqdlh": "606",
"sshdlh": "109",
"bcgdmj": 2.2905,
"psnl": "满足",
"ggnl": "基本满足",
"dxbw": "山地坡上",
"zays": "渍潜",
"zdgx": "夹层型",
"nltwh": "中",
"swdyx": "一般",
"qjcd": "尚清洁",
"yxtch": "120",
"pd": 8
})
this.graphicLayer.addGraphic(graphic)
graphic = new i2d.Graphic.Marker({
latlng: [32.318242830742236, 119.21534353237826],
style: {
rotationAngle: 190,
image: "./sdt.png",
width: 32,
height: 44,
horizontalOrigin: i2d.HorizontalOrigin.CENTER,
verticalOrigin: i2d.VerticalOrigin.BOTTOM
}
},
{
"type": "Feature",
"geometry": {
"bbox": [
126.01426677009727,
30.93212755460195,
126.03068450384012,
30.945388031855657
],
"type": "Polygon",
"coordinates": [
[
[
126.01426677009727,
30.935187664737384
],
[
126.01902694141916,
30.945388031855657
],
[
126.03068450384012,
30.94242506807376
],
[
126.02845013770947,
30.938587787110183
],
[
126.02189275884767,
30.940919299594274
],
[
126.02111558801971,
30.938976372524166
],
[
126.02412712497835,
30.937664896751752
],
[
126.02130988072656,
30.934653359793117
],
[
126.02228134426161,
30.934216201202336
],
[
126.02053270989848,
30.933439030374192
],
[
126.01999840495432,
30.93212755460195
],
[
126.01426677009727,
30.935187664737384
]
]
]
},
"properties": {
"Id": 0,
"dkh": "FG52K9756-005",
"wz": "佳富村",
"tfbh": "I51H134005",
"tbbh": "424",
"ssqdlh": "607",
"sshdlh": "120",
"bcgdmj": 2.5785,
"psnl": "基本满足",
"ggnl": "基本满足",
"dxbw": "宽谷盆地",
"zays": "障碍层次",
"zdgx": "上紧下松型",
"nltwh": "低",
"swdyx": "不丰富",
"qjcd": "尚清洁",
"yxtch": "120",
"pd": 11
})
this.graphicLayer.addGraphic(graphic)
graphic = new i2d.Graphic.Marker({
latlng: [32.310656694051374, 119.22235167838745],
style: {
rotationAngle: 280,
image: "./sdt.png",
width: 32,
height: 44,
horizontalOrigin: i2d.HorizontalOrigin.CENTER,
verticalOrigin: i2d.VerticalOrigin.BOTTOM
}
})
this.graphicLayer.addGraphic(graphic)
},
{
"type": "Feature",
"geometry": {
"bbox": [
126.03046614992456,
30.929397064375333,
126.03778772086163,
30.93256762292026
],
"type": "Polygon",
"coordinates": [
[
[
126.03138293793768,
30.93256762292026
],
[
126.03336931196566,
30.932007363578975
],
[
126.03373606362345,
30.93170210542672
],
[
126.03441300785039,
30.9314531144467
],
[
126.03600178344641,
30.930868737215974
],
[
126.03692186551598,
30.93053031622486
],
[
126.03778772086163,
30.93000825638399
],
[
126.03758399019218,
30.929626261378587
],
[
126.03704919718463,
30.929728126713428
],
[
126.0369855313502,
30.92993185738288
],
[
126.03673086801336,
30.929995523217087
],
[
126.03524108749218,
30.930466650390482
],
[
126.03459169598295,
30.929397064375333
],
[
126.03046614992456,
30.930950510730725
],
[
126.03138293793768,
30.93256762292026
]
]
]
},
"properties": {
"Id": 0,
"dkh": "FG52K9756-006",
"wz": "佳富村",
"tfbh": "I51H134006",
"tbbh": "422",
"ssqdlh": "60008",
"sshdlh": "123",
"bcgdmj": 0.4245,
"psnl": "不满足",
"ggnl": "不满足",
"dxbw": "山间盆地",
"zays": "无",
"zdgx": "海绵型",
"nltwh": "低",
"swdyx": "不丰富",
"qjcd": "尚清洁",
"yxtch": "60",
"pd": 15
}
}
],
"fileName": "test/test"
}
// eslint-disable-next-line no-unused-vars
mounted() {
// 从数据库读取的地块信息
const dkCoord = {"type": "Feature", "geometry": {"bbox": [119.19403010080875, 32.3102954498753, 119.22235167838748, 32.31824283074223], "type": "Polygon", "coordinates": [[[119.19403010080875, 32.3102954498753], [119.21534353237826, 32.318242830742236], [119.22235167838745, 32.310656694051374], [119.20791069412338, 32.31047249760787], [119.19403010080875, 32.3102954498753]]]}}
this.map = new i2d.Map('map', this.mapOptions)
const _self = this;
const geoJsonLayer = new i2d.Layer.GeoJsonLayer({
name: "安徽各市",
data: geojson,
name: "dk",
data: dkCoord,
// 渲染颜色
symbol: {
type: "polygon",
......@@ -642,7 +147,7 @@ export default {
]));
} else {
//地块不含外包矩形 自己计算
const result = bbox(geojson);
const result = bbox(dkCoord);
this.map.fitBounds(L.latLngBounds([
[result[1], result[0]],
[result[3], result[2]]
......@@ -652,44 +157,7 @@ export default {
// 创建矢量数据图层
this.graphicLayer = new i2d.Layer.GraphicLayer()
this.map.addLayer(this.graphicLayer)
const graphic = new i2d.Graphic.Marker({
latlng: [40.20340350096175, 101.15070299421159],
style: {
image: "./mark1.png",
width: 32,
height: 44,
horizontalOrigin: i2d.HorizontalOrigin.CENTER,
verticalOrigin: i2d.VerticalOrigin.BOTTOM,
label: {
text: "照片1",
color: "#ff0000",
font_size: 20,
offsetY: 42
}
}
})
this.graphicLayer.addGraphic(graphic)
const graphic1 = new i2d.Graphic.Marker({
latlng: [40.30340350096175, 101.10070299421159],
style: {
image: "./mark1.png",
width: 32,
height: 44,
horizontalOrigin: i2d.HorizontalOrigin.CENTER,
verticalOrigin: i2d.VerticalOrigin.BOTTOM,
label: {
text: "照片2",
color: "#ff0000",
font_size: 20,
offsetY: 42
}
}
})
this.graphicLayer.addGraphic(graphic1)
this.addMarker()
}
}
</script>
......