移动端
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

MapGisLine.vue 14 KiB

3 lat temu
1 rok temu
3 lat temu
3 lat temu
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. <template>
  2. <div>
  3. <!-- <p class="fuTitle">地块位置绘制</p>-->
  4. <div id="full-screen-acceptance" style="width: 100%;height:73vh;">
  5. <div :id=this.uuidMap style="width: 100%;height: 100%"></div>
  6. <div id='land-btn-wrap'>
  7. <!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" @click="" type="primary">画图</el-button>-->
  8. <!--<input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消"/>&nbsp;&nbsp;-->
  9. <!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" type="primary">重置图层</el-button>-->
  10. <input :id="this.drawingPolygonMap" class="ant-btn ant-btn-red" type="button" value="画图"/>&nbsp;&nbsp;
  11. <input :id="this.drawingResetMap" type="button" class="ant-btn ant-btn-red" value="重置图层"/>
  12. </div>
  13. </div>
  14. <div id="info" style="display: none"></div>
  15. </div>
  16. </template>
  17. <script>
  18. import {getQueryLand} from "@/api/homesteadSurvey/zjdzd";
  19. import $ from "jquery";
  20. export default {
  21. components: {
  22. getQueryLand,
  23. },
  24. data() {
  25. return {
  26. closeMoule: null,
  27. uuidMap: this.guidProduct(),
  28. drawingPolygonMap: this.guidProduct(),
  29. drawingResetMap: this.guidProduct(),
  30. };
  31. },
  32. props: ['theGeom','message'],
  33. // created() {
  34. // // setTimeout(() => {
  35. // // this.drawingPaceCountryLine();
  36. // // }, 100);
  37. // },
  38. methods: {
  39. //地图加载
  40. formSubmit(){
  41. //父组件监听的名字必须是formSubmit
  42. // 子组件调用父组件的方法并传参
  43. if(this.closeMoule =="" || this.closeMoule == null){
  44. this.$emit('formSubmit', null);
  45. }else{
  46. this.$emit('formSubmit', JSON.stringify(this.closeMoule));
  47. }
  48. },
  49. guidProduct(){
  50. return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
  51. var r = Math.random() * 16 | 0,
  52. v = c == 'x' ? r : (r & 0x3 | 0x8);
  53. return v.toString(16);
  54. });
  55. },
  56. //地图查看
  57. drawingPaceCountryLine() {
  58. //加载地图编辑
  59. var that = this;
  60. var map;
  61. //var hc_land;
  62. var draw; // global so we can remove it later
  63. var vector_drawing;
  64. if (that.message != null && that.message != ""
  65. && that.message != undefined) {
  66. document.getElementById(that.uuidMap).innerHTML = '';
  67. var hc_land;
  68. var hc_landFuther;
  69. var draw; // global so we can remove it later
  70. var vector_drawing;
  71. var projection = new ol.proj.Projection({
  72. //地图投影类型
  73. code: "EPSG:3857",
  74. units: "degrees",
  75. //extent:extent
  76. });
  77. var aerial = new ol.layer.Tile({
  78. source: new ol.source.XYZ({
  79. url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
  80. "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
  81. "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
  82. }),
  83. isGroup: true,
  84. name: "卫星影像图",
  85. });
  86. var yingxzi = new ol.layer.Tile({
  87. source: new ol.source.XYZ({
  88. url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
  89. }),
  90. isGroup: true,
  91. name: "天地图文字标注--卫星影像图",
  92. });
  93. //加载地图
  94. map = new ol.Map({
  95. controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
  96. layers: [aerial, yingxzi],
  97. projection: projection,
  98. target: that.uuidMap,
  99. view: new ol.View({
  100. //center: ol.proj.fromLonLat([115.452752, 31.789033]),
  101. zoom: 15,
  102. minZoom: 5, //地图缩小限制
  103. maxZoom: 18.3, //地图放大限制
  104. }),
  105. });
  106. //图层查询定位开始 ---------start
  107. if(this.message.substring(0,1) =="{"){
  108. // var theGeomMap =this.message.replace("Point", "MultiPolygon");
  109. // var pointLeft = theGeomMap.replace("[", "[[[[");
  110. // var pointRight = pointLeft.replace("]", "]]]]");
  111. hc_land = new ol.layer.Vector({
  112. title: "add Layer",
  113. source: new ol.source.Vector({
  114. projection: projection,
  115. features: new ol.format.GeoJSON().readFeatures("{\n" +
  116. " \"type\": \"Feature\",\n" +
  117. " \"geometry\":" + this.message + "}"),
  118. }),
  119. style: new ol.style.Style({
  120. fill: new ol.style.Fill({
  121. //矢量图层填充颜色,以及透明度
  122. color: "rgba(204, 255, 204,0.3)",
  123. }),
  124. stroke: new ol.style.Stroke({
  125. //边界样式
  126. color: "#47c68f",
  127. width: 3,
  128. }),
  129. }),
  130. });
  131. map.addLayer(hc_land);
  132. var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
  133. var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
  134. var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
  135. var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
  136. //定位查询位置
  137. var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
  138. map.getView().animate({
  139. // 只设置需要的属性即可
  140. center: center, // 中心点
  141. zoom: 17.9, // 缩放级别
  142. rotation: undefined, // 缩放完成view视图旋转弧度
  143. duration: 1000, // 缩放持续时间,默认不需要设置
  144. });
  145. }
  146. // if(this.message.substring(0,1) =="["){
  147. // var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [[[this.message.replaceAll("\"","")]]]});
  148. // var leftJoin = zbNew.replace("\"[","[");
  149. // var rightJoin = leftJoin.replace("\"]","]");
  150. // hc_landFuther = new ol.layer.Vector({
  151. // title: "add Layer",
  152. // source: new ol.source.Vector({
  153. // projection: projection,
  154. // features: new ol.format.GeoJSON().readFeatures("{\n" +
  155. // " \"type\": \"Feature\",\n" +
  156. // " \"geometry\":" + rightJoin + "}"),
  157. // }),
  158. // style: new ol.style.Style({
  159. // fill: new ol.style.Fill({
  160. // //矢量图层填充颜色,以及透明度
  161. // color: "rgba(204, 255, 204,0.3)",
  162. // }),
  163. // stroke: new ol.style.Stroke({
  164. // //边界样式
  165. // color: "#47c68f",
  166. // width: 3,
  167. // }),
  168. // }),
  169. // });
  170. // map.addLayer(hc_landFuther);
  171. // var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;
  172. // var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;
  173. // var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;
  174. // var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;
  175. // //定位查询位置
  176. // var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
  177. // map.getView().animate({
  178. // // 只设置需要的属性即可
  179. // center: center, // 中心点
  180. // zoom: 17.9, // 缩放级别
  181. // rotation: undefined, // 缩放完成view视图旋转弧度
  182. // duration: 1000, // 缩放持续时间,默认不需要设置
  183. // });
  184. // }
  185. //图层查询定位结束 ---------end
  186. //开始绘制地图
  187. $("#"+this.drawingPolygonMap).click(function () {
  188. map.removeLayer(hc_land);
  189. //map.removeLayer(hc_landFuther);
  190. map.removeLayer(vector_drawing);
  191. //that.closeMoule = null;
  192. map.removeInteraction(draw);
  193. //var source = new ol.source.Vector({wrapX: false});
  194. vector_drawing = new ol.layer.Vector({
  195. source: new ol.source.Vector(),
  196. });
  197. map.addLayer(vector_drawing);
  198. function addInteraction() {
  199. draw = new ol.interaction.Draw({
  200. source: vector_drawing.getSource(),
  201. type: "Polygon"
  202. });
  203. draw.on('drawend', function (evt) {
  204. var feature = evt.feature;
  205. var geometry = feature.getGeometry();
  206. var coordinate = geometry.getCoordinates();
  207. that.closeMoule = coordinate;
  208. that.formSubmit();
  209. });
  210. map.addInteraction(draw);
  211. }
  212. addInteraction();
  213. });
  214. //清除画图鼠标点击事件
  215. // $("#drawRemove").click(function () {
  216. // //map.addLayer(hc_land);
  217. // map.removeInteraction(draw);
  218. // //map.removeLayer(vector_drawing);
  219. // });
  220. //还原之前图层
  221. $("#"+this.drawingResetMap).click(function () {
  222. if(that.closeMoule !=null) {
  223. map.removeLayer(vector_drawing);
  224. //map.removeLayer(hc_landFuther);
  225. map.removeInteraction(draw);
  226. map.addLayer(hc_land);
  227. //map.addLayer(hc_landFuther);
  228. // that.closeMoule = null;
  229. that.formSubmit();
  230. }
  231. });
  232. } else{
  233. //this.closeMoule = null;
  234. document.getElementById(that.uuidMap).innerHTML = '';
  235. var projection = new ol.proj.Projection({
  236. //地图投影类型
  237. code: "EPSG:3857",
  238. units: "degrees",
  239. //extent:extent
  240. });
  241. var aerial = new ol.layer.Tile({
  242. source: new ol.source.XYZ({
  243. url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
  244. "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
  245. "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
  246. }),
  247. isGroup: true,
  248. name: "卫星影像图",
  249. });
  250. var yingxzi = new ol.layer.Tile({
  251. source: new ol.source.XYZ({
  252. url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
  253. }),
  254. isGroup: true,
  255. name: "天地图文字标注--卫星影像图",
  256. });
  257. //获取坐标是否存在
  258. var Zb;
  259. getQueryLand().then((response) => {
  260. if (response.code == 200) {
  261. let InsertCode = response.data;
  262. if (InsertCode != null) {
  263. var lat = InsertCode.lat;
  264. var lng = InsertCode.lng;
  265. if(lat !=null && lng !=null && lat !="" && lng !=""){
  266. Zb = [lng,lat];
  267. }else {
  268. Zb =[115.452752, 31.789033];
  269. }
  270. //加载地图
  271. map = new ol.Map({
  272. controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
  273. layers: [aerial, yingxzi],
  274. projection: projection,
  275. logo: 'false',
  276. target: that.uuidMap,
  277. view: new ol.View({
  278. center: ol.proj.fromLonLat(Zb),
  279. //center: ol.proj.fromLonLat([115.452752, 31.789033]),
  280. zoom: 16.9,
  281. minZoom: 5, //地图缩小限制
  282. maxZoom: 18, //地图放大限制
  283. }),
  284. });
  285. }
  286. }
  287. });
  288. //图层查询定位结束 ---------end
  289. //开始绘制地图
  290. $("#"+this.drawingPolygonMap).click(function () {
  291. //that.closeMoule = null;
  292. map.removeInteraction(draw);
  293. //var source = new ol.source.Vector({wrapX: false});
  294. vector_drawing = new ol.layer.Vector({
  295. source: new ol.source.Vector(),
  296. });
  297. map.addLayer(vector_drawing);
  298. function addInteraction() {
  299. draw = new ol.interaction.Draw({
  300. source: vector_drawing.getSource(),
  301. type: "Polygon"
  302. });
  303. draw.on('drawend', function (evt) {
  304. var feature = evt.feature;
  305. var geometry = feature.getGeometry();
  306. var coordinate = geometry.getCoordinates();
  307. that.closeMoule = coordinate;
  308. that.formSubmit();
  309. });
  310. map.addInteraction(draw);
  311. }
  312. addInteraction();
  313. });
  314. //清除画图鼠标点击事件
  315. // $("#drawRemove").click(function () {
  316. // //map.addLayer(hc_land);
  317. // map.removeInteraction(draw);
  318. // //map.removeLayer(vector_drawing);
  319. // });
  320. //还原之前图层
  321. $("#"+this.drawingResetMap).click(function () {
  322. map.removeInteraction(draw);
  323. map.removeLayer(vector_drawing);
  324. //that.closeMoule = null;
  325. that.formSubmit();
  326. });
  327. }
  328. },
  329. },
  330. watch: {},
  331. };
  332. </script>
  333. <style scoped>
  334. #that.message {
  335. width: 100%;
  336. height: 100%;
  337. }
  338. .fuTitle {
  339. border-top: 1px solid #e9e9e9;
  340. text-align: center;
  341. padding: 10px 0px 0px 0px;
  342. font-size: 18px;
  343. color: #999;
  344. }
  345. .ant-btn-red {
  346. position: relative;
  347. display: inline-block;
  348. background: #D0EEFF;
  349. border: 1px solid #99D3F5;
  350. border-radius: 4px;
  351. padding: 4px 12px;
  352. overflow: hidden;
  353. color: #1E88C7;
  354. text-decoration: none;
  355. text-indent: 0;
  356. line-height: 30px;
  357. font-size: 28px;
  358. margin: 5px 0 5px;
  359. }
  360. #land-btn-wrap{
  361. position: relative;
  362. width: 25%;
  363. left: 75%;
  364. bottom: 100%;
  365. z-index: 2000;
  366. padding-top: 5%;
  367. }
  368. </style>