add mark<\/strong><\/div>\n
\u65b9\u6cd5\u4e00<\/strong><\/span><\/div>\n
\u5982\u679c\u6709\u591a\u4e2a\u70b9\u7684\u8bdd\uff0c\u53ef\u4ee5\u751f\u6210\u591a\u4e2a feature\uff08\u5faa\u73af\u8c03\u7528 addFeature\uff09<\/p>\n
const iconStyle = () =>\r\n new Style({ image: new Icon({ scale: 0.2, src: image }) });\r\nconst addFeature = (point: Coordinate) =>\r\n new Feature({\r\n geometry: new Point(Proj.fromLonLat(point)),\r\n properties,\r\n name: \"\u5f53\u524d\u4f4d\u7f6e\",\r\n population: 4000,\r\n rainfall: 500,\r\n });\r\nconst pointSource = new VectorSource({\r\n features: [addFeature(point)],\r\n});\r\nconst clusterSourceForLayer = new Cluster({\r\n source: pointSource,\r\n distance: 50,\r\n});\r\nconst pointLayer = new VectorLayer({\r\n source: clusterSourceForLayer,\r\n zIndex: 3,\r\n style: iconStyle,\r\n});\r\nmap.addLayer(pointLayer);\r\npointLayer.set(\"baseMap\", \"iconLayer\");<\/pre>\n
\u65b9\u6cd5\u4e8c<\/strong><\/span><\/div>\n
\u7528 geojson \u53bb\u6e32\u67d3 mark<\/p>\n
const iconStyle = () =>\r\n new Style({ image: new Icon({ scale: 0.2, src: image }) });\r\nconst pointSource = new VectorSource({\r\n features: new GeoJSON().readFeatures(geojson, {\r\n dataProjection: \"EPSG:4326\",\r\n featureProjection: \"EPSG:3857\",\r\n }),\r\n});\r\nconst clusterSourceForLayer = new Cluster({\r\n source: pointSource,\r\n distance: 50,\r\n});\r\nconst pointLayer = new VectorLayer({\r\n source: clusterSourceForLayer,\r\n zIndex: 3,\r\n style: iconStyle,\r\n});\r\nmap?.addLayer(pointLayer);\r\npointLayer.set(\"baseMap\", \"iconLayer\");<\/pre>\n
geojson \u683c\u5f0f<\/strong><\/span><\/div>\n
\u751f\u6210 geojson \u7684\u65b9\u5f0f\uff1a<\/p>\n
\u81ea\u5df1\u624b\u52a8\u6784\u5efa<\/li>\n
\u4f7f\u7528 @turf\/helpers\uff0c\u5b83\u63d0\u4f9b\u4e86 point\u3001featureCollection \u7b49\u65b9\u6cd5<\/li>\n
{\r\n \"type\": \"FeatureCollection\",\r\n \"features\": [\r\n {\r\n \"type\": \"Feature\",\r\n \"properties\": {\r\n \"id\": \"customer002\",\r\n \"name\": \"c2\"\r\n },\r\n \"geometry\": {\r\n \"type\": \"Point\",\r\n \"coordinates\": [119.777738303153, 32.91324329434815]\r\n }\r\n },\r\n {\r\n \"type\": \"Feature\",\r\n \"properties\": {\r\n \"id\": \"customerId007\",\r\n \"name\": \"\u5f20\u4e09\"\r\n },\r\n \"geometry\": {\r\n \"type\": \"Point\",\r\n \"coordinates\": [109.54393448864997, 35.7427088696462]\r\n }\r\n }\r\n ]\r\n}<\/pre>\n
hover mark<\/strong><\/div>\n
popover<\/strong><\/span><\/div>\n
overlay \u9700\u8981\u4e00\u4e2a dom \u5143\u7d20\uff0c\u8fd9\u91cc\u662f\u7528\u8fc7 ref \u83b7\u53d6\u7684<\/p>\n
const o = new Overlay({ element: ref.current });\r\nmap?.addOverlay(o);\r\nsetOverlay(o);<\/pre>\n
\u65b9\u6cd5\u4e00<\/strong><\/span><\/div>\n
\u7528 select \u53bb\u505a\uff0c\u5b83\u6709\u4e2a select \u4e8b\u4ef6<\/p>\n
\u5b83\u4e8b\u4ef6\u53c2\u6570\u4e2d\uff0c\u6709\u4e2a selected\uff0c\u5982\u679c\u4e0d\u662f\u7a7a\u6570\u7ec4\uff0c\u8bf4\u660e\u4f60\u9f20\u6807\u6b63\u5728 hover mark\uff0c\u5c31\u53ef\u4ee5\u5f39\u51fa popover\uff0c\u663e\u793a\u4f60\u60f3\u8981\u663e\u793a\u7684\u5185\u5bb9<\/p>\n
const select = new Select({\r\n condition: pointerMove,\r\n hitTolerance: 1,\r\n layers: [iconLayer],\r\n style: iconStyle,\r\n});\r\nselect.on(\"select\", (e) => {\r\n const { selected } = e;\r\n if (selected.length) {\r\n const [feature] = selected;\r\n const _feature = feature.get(\"features\")[0];\r\n const id = _feature.get(\"id\");\r\n const name = _feature.get(\"name\");\r\n setContent({ name, id });\r\n const coordinate = feature.get(\"geometry\").flatCoordinates;\r\n overlay.setPosition(coordinate);\r\n } else {\r\n overlay.setPosition(undefined);\r\n }\r\n});\r\nmap?.addInteraction(select);<\/pre>\n
\u65b9\u6cd5\u4e8c<\/strong><\/span><\/div>\n
\u7528 select \u53bb\u505a\uff0c\u672c\u8d28\u4e5f\u662f\u901a\u8fc7 pointerMove \u4e8b\u4ef6\uff0c\u6240\u4ee5\u53ef\u4ee5\u76f4\u63a5\u5728 map \u4e0a\u76d1\u542c pointerMove \u4e8b\u4ef6<\/p>\n
\u5177\u4f53\u7684\u5b9e\u73b0\u65b9\u5f0f\u6211\u6ca1\u6709\u53bb\u5c1d\u8bd5\uff0c\u901a\u8fc7\u4e0a\u9762\u7684\u63a8\u65ad\uff0c\u6211\u89c9\u5f97\u662f\u53ef\u884c\u7684<\/p>\n
map.on(\"pointerMove\", (e) => {});<\/pre>\n
clear mark<\/strong><\/div>\n
\u901a\u8fc7 useEffect \u8fd4\u56de\u7684\u51fd\u6570\u6e05\u7406\u5730\u56fe\u4e2d\u7684 mark<\/p>\n
useEffect(() => {\r\n return () => {\r\n \/\/ \u5378\u8f7d\u9875\u9762\u4e2d\u7684 mark\r\n iconSource?.getFeatures().forEach((feature) => {\r\n iconSource?.removeFeature(feature);\r\n });\r\n };\r\n}, [points, iconSource]);<\/pre>\n
\u65b9\u6cd5 addInteraction\u3001addOverlay\u3001addLayer \u533a\u522b<\/strong><\/div>\n
\u6211\u6ca1\u6709\u641e\u6e05\u695a\u4ed6\u4eec\u4e4b\u95f4\u7684\u533a\u522b\uff0c\u76ee\u524d\u4e86\u89e3\u7684\u662f\uff1a<\/p>\n
addLayer\uff1a\u662f\u6dfb\u52a0\u56fe\u5c42\uff0c\u56fe\u5c42\u5206\u4e3a\uff1a<\/li>\n
\n\u6805\u683c\uff1aTile\uff08\u56fe\u7247\uff09<\/ol>\n
\n\u77e2\u91cf\uff1aVector\uff08geojson\u3001lerc\uff09<\/ol>\n
\n\u77e2\u91cf\u6805\u683c\uff1aVectorTile\uff08pbf\uff09<\/ol>\n
addInteraction\uff1a\u6dfb\u52a0 Select \u548c Modify<\/li>\n
addOverlay\uff1a\u6dfb\u52a0 Overlay \u548c Control<\/li>\n
\nPopover \u53ef\u4ee5\u7528 Overlay \u53bb\u505a<\/ol>\n
\u4ee5\u4e0a\u5c31\u662fOpenlayer add mark\u53ca\u6dfb\u52a0hover\u6548\u679c\u5b9e\u4f8b\u8be6\u89e3\u7684\u8be6\u7ec6\u5185\u5bb9<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5982\u679c\u6709\u591a\u4e2a\u70b9\u7684\u8bdd\uff0c\u53ef\u4ee5\u751f\u6210\u591a\u4e2a feature\uff08\u5faa\u73af\u8c03\u7528 addFeature\uff09 const iconStyl […]<\/p>\n","protected":false},"author":668,"featured_media":244540,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[],"class_list":["post-258256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thread"],"acf":[],"_links":{"self":[{"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/posts\/258256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/users\/668"}],"replies":[{"embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/comments?post=258256"}],"version-history":[{"count":6,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/posts\/258256\/revisions"}],"predecessor-version":[{"id":258262,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/posts\/258256\/revisions\/258262"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/media\/244540"}],"wp:attachment":[{"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/media?parent=258256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/categories?post=258256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gulass.cn\/wp-json\/wp\/v2\/tags?post=258256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}